{"id":15673872,"url":"https://github.com/gabrielbb/react-use-session","last_synced_at":"2025-05-06T22:47:10.188Z","repository":{"id":52062292,"uuid":"155759216","full_name":"GabrielBB/react-use-session","owner":"GabrielBB","description":"React hook to handle session from your browser storage","archived":false,"fork":false,"pushed_at":"2022-12-02T15:27:25.000Z","size":310,"stargazers_count":15,"open_issues_count":4,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-05-06T22:46:56.284Z","etag":null,"topics":["localstorage","react","react-hooks","session-management","sessionstorage"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-use-session","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GabrielBB.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-01T18:35:52.000Z","updated_at":"2021-04-17T19:32:06.000Z","dependencies_parsed_at":"2023-01-22T22:45:24.085Z","dependency_job_id":null,"html_url":"https://github.com/GabrielBB/react-use-session","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GabrielBB%2Freact-use-session","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GabrielBB%2Freact-use-session/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GabrielBB%2Freact-use-session/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GabrielBB%2Freact-use-session/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GabrielBB","download_url":"https://codeload.github.com/GabrielBB/react-use-session/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252782459,"owners_count":21803380,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["localstorage","react","react-hooks","session-management","sessionstorage"],"created_at":"2024-10-03T15:42:41.970Z","updated_at":"2025-05-06T22:47:10.156Z","avatar_url":"https://github.com/GabrielBB.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv  align=\"center\"\u003e\n\n\u003ch1\u003e\n\n\u003cbr/\u003e\n\n👤\n\n\u003cbr  /\u003e\n\nreact-use-session\n\n\u003c/h1\u003e\n\nReact hook to handle session from your browser storage\n\n\u003c/div\u003e\n\n  \n\n## Usage\n\n  \n\n#### Getting session\n\n  \n\nImport `useSession` from `react-use-session` and pass a sessionKey.\n\n  \n```jsx\n\nimport { useSession } from  'react-use-session';\n\n  \n\nconst { session } = useSession('my-app');\n\n  \n\n```\n\n  \n\nIf that key is found in your browser storage then its value will be returned as `session` since your app first render. If not, the returned value is `null`.\n\n  \n\n#### Saving or clearing session\n\n  \n\nTo save a new session you use the `save` function, you can save any object or string, to clear the session you use the `clear` function, both functions are given to you by `useSession`.\n\n  \n\n```jsx\n\nconst { session, save, clear } = useSession('my-app');\n\n```\n#### Non-persistent session\n  \n\nIf you don't want the session to be kept when the user closes the window. There is a second parameter called \"keepOnWindowClosed\" that you can assign to false. The default value is true, so session is persistent by default.\n```jsx\nconst { session } = useSession('my-app', false);\n```\n\n\n#### Auto \"JSON Web Token\" Parsing\n\n  \n\nIf you have a string containing a JSON Web Token, instead of calling `save`, you can call `saveJWT`, which will automatically parse the JWT to a Javascript Object, save it in the browser local storage, and return the object back to you.\n\n  \n\n```jsx\n\nconst { saveJWT } = useSession('my-app');\n\n```\n\n  \n\n\n## Example\n\n\n```jsx\nimport  React  from  'react';\nimport { useSession } from  'react-use-session';\n\nfunction  App() {\n\nconst  JSON_WEB_TOKEN = \"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJyZWFjdC11c2Utc2Vzc2lvbi1leGFtcGxlIiwiaWF0IjoxNTQxMDgwMjAwLCJleHAiOjE5MTk3Njg0MDAsImF1ZCI6ImxvY2FsaG9zdDozMDAwIiwic3ViIjoiZ2FicmllbGJiMDMwNkBnbWFpbC5jb20iLCJHaXZlbk5hbWUiOiJHYWJyaWVsIiwiU3VybmFtZSI6IkJhc2lsaW8gQnJpdG8iLCJSb2xlIjoiQ3JlYXRvciJ9.GK23QsdEgMzGmxCwX9CjEg5lbSztZ7C67vKc7L09KgI\";\n\nconst { session, saveJWT, clear } = useSession('jwt-test-app');\n\nreturn (\n\u003cdiv  className=\"App\"\u003e\n{\nsession ?\n\u003cdiv\u003e\n\u003cp\u003eYou are logged in as: \u003ccode\u003e{session.GivenName}\u003c/code\u003e\u003c/p\u003e\n\u003cbutton  onClick={clear}\u003eLog out\u003c/button\u003e\n\u003c/div\u003e\n:\n\u003cdiv\u003e\n\u003cp\u003eNo session. Please log in\u003c/p\u003e\n\u003cbutton  onClick={() =\u003e  saveJWT(JSON_WEB_TOKEN)}\u003eLog in\u003c/button\u003e\n\u003c/div\u003e\n}\n\u003c/div\u003e)\n}\n\nexport  default  App;\n```\n\n  \n\n![Screenshot](https://u.cubeupload.com/GabrielBB/reactusesession.gif)\n\n## Code Documentation\n\n``` typescript\n/**\n\n* React hook to handle session from your browser storage\n\n* @param  sessionKey This required parameter is used as the browser storage key. This should be a unique string per app. For example your package.json's name value.\n\n* @param  keepOnWindowClosed This optional parameter will determine if useSession will work with LocalStorage or SessionStorage. Default value is true, so default storage is LocalStorage\n\n* @returns If there is a session in your browser storage then it will be returned. If there is no session, it will return null. It also returns 3 functions to handle the session\n\n*/\n\ndeclare  function  useSession(sessionKey:  string, keepOnWindowClosed?:  boolean): {\n\nsession:  object  |  string  |  null;\n\nsave: (sessionValue:  object  |  string) =\u003e  void;\n\nsaveJWT: (jwt:  string) =\u003e  void;\n\nclear: () =\u003e  void;\n\n};\n`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgabrielbb%2Freact-use-session","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgabrielbb%2Freact-use-session","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgabrielbb%2Freact-use-session/lists"}