{"id":18605785,"url":"https://github.com/bernabe9/redux-react-session","last_synced_at":"2025-04-05T13:10:01.543Z","repository":{"id":17378573,"uuid":"81764089","full_name":"bernabe9/redux-react-session","owner":"bernabe9","description":":key: Simple Session API storage for Redux and React","archived":false,"fork":false,"pushed_at":"2022-12-07T09:42:42.000Z","size":1196,"stargazers_count":146,"open_issues_count":64,"forks_count":39,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-29T12:11:13.704Z","etag":null,"topics":["cookiesession","indexeddb","localstorage","react","react-router","react-router-v4","redux","server-side-rendering","session","universal-app","universal-react","websql"],"latest_commit_sha":null,"homepage":"https://bernabe9.github.io/redux-react-session/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bernabe9.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-12T22:55:48.000Z","updated_at":"2024-10-28T19:54:16.000Z","dependencies_parsed_at":"2023-01-14T07:45:16.285Z","dependency_job_id":null,"html_url":"https://github.com/bernabe9/redux-react-session","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bernabe9%2Fredux-react-session","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bernabe9%2Fredux-react-session/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bernabe9%2Fredux-react-session/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bernabe9%2Fredux-react-session/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bernabe9","download_url":"https://codeload.github.com/bernabe9/redux-react-session/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247339158,"owners_count":20923014,"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":["cookiesession","indexeddb","localstorage","react","react-router","react-router-v4","redux","server-side-rendering","session","universal-app","universal-react","websql"],"created_at":"2024-11-07T02:23:06.040Z","updated_at":"2025-04-05T13:10:01.523Z","avatar_url":"https://github.com/bernabe9.png","language":"JavaScript","readme":"# Redux React Session\n\n[![NPM version](https://img.shields.io/npm/v/redux-react-session.svg?style=flat)](https://npmjs.org/package/redux-react-session)\n[![Build status: Linux](https://travis-ci.org/bernabe9/redux-react-session.svg?branch=master)](https://travis-ci.org/bernabe9/redux-react-session)\n[![Dependency Status](https://img.shields.io/david/bernabe9/redux-react-session.svg)](https://david-dm.org/bernabe9/redux-react-session)\n[![Coverage Status](https://img.shields.io/coveralls/bernabe9/redux-react-session.svg)](https://coveralls.io/github/bernabe9/redux-react-session?branch=master)\n\nKeep your session sync with your local storage and Redux :key:\n\nRedux React Session provides an API that allows to manage sessions through the app, with authorization function for [react-router](https://github.com/ReactTraining/react-router) and a persisted session.\n\n## Installation\nyarn:\n\n`yarn add redux-react-session`\n\nnpm:\n\n`npm install redux-react-session --save`\n\n## Usage\n\n- Add the session reducer:\n```javascript\nimport { combineReducers } from 'redux';\nimport { sessionReducer } from 'redux-react-session';\n\nconst reducers = {\n  // ... your other reducers here ...\n  session: sessionReducer\n};\nconst reducer = combineReducers(reducers);\n```\n- Initiate the session service:\n```javascript\nimport { createStore } from 'redux';\nimport { sessionService } from 'redux-react-session';\n\nconst store = createStore(reducer)\n\nsessionService.initSessionService(store);\n```\n## Examples\nThe examples simulates a simple login/logout that sends requests to a server.\n\n### Run the example for react router v3\n1. **get into the folder**:`cd examples/example`\n2. **install dependencies**: `npm install`\n3. **run the example**: `npm start`\n\n### Run the example for react router v4\n1. **get into the folder**:`cd examples/react-router-v4-example`\n2. **install dependencies**: `npm install`\n3. **run the example**: `npm start`\n\n\n## API\n\n### initSessionService(store, options) : Promise\nInitialize an instance of the session service.\n\nThe promise will be resolved if the session is valid, and will be rejected if there is no data in the storage.\n\nOnce the promise is resolved or rejected the flag `checked` in the redux store will change from `false` to `true`. This allows to check into any component if the session was already checked and it's valid.\n\nOptions:\n- refreshOnCheckAuth(**default**: false): Refresh Redux store in the `checkAuth` function\n- redirectPath(**default**: `\"login\"`): Path used when a session is rejected or doesn't exist\n- driver: Force to use a particular driver, could be: 'INDEXEDDB', 'WEBSQL', 'LOCALSTORAGE' or 'COOKIES'\n- validateSession: Function to validate the saved session. It can either be a function to return an immediate boolean value or a function that returns a promise. In the case it returns an immadiate value and `false` is returned the session will be destroyed. In the case of a promise, if either `false` is returned or an exception is thrown, the session will be destroyed.\nExample:\n```javascript\nconst validateSession = (session) =\u003e {\n  // check if your session is still valid\n  return true;\n}\nconst options = { refreshOnCheckAuth: true, redirectPath: '/home', driver: 'COOKIES', validateSession };\n\nsessionService.initSessionService(store, options)\n  .then(() =\u003e console.log('Redux React Session is ready and a session was refreshed from your storage'))\n  .catch(() =\u003e console.log('Redux React Session is ready and there is no session in your storage'));\n```\n\n```javascript\nconst validateSession = (session) =\u003e {\n  // check if your session is still valid with a server check, through axios for instance\n  return api.invokeRemoteSessionValidationThroughAxios(session).then(response =\u003e response.isSessionValid);\n}\nconst options = { refreshOnCheckAuth: true, redirectPath: '/home', driver: 'COOKIES', validateSession };\n\nsessionService.initSessionService(store, options)\n  .then(() =\u003e console.log('Redux React Session is ready and a session was refreshed from your storage'))\n  .catch(() =\u003e console.log('Redux React Session is ready and there is no session in your storage'));\n```\n\n### refreshFromLocalStorage\nForce to refresh the Redux Store from the local storage.\n\nThe promise will be resolved if the session is valid, and will be rejected if there is no data in the storage.\n\nNote: this function is called once the session service is initialized\n\n### checkAuth\nAuthorization function for [react-router](https://github.com/ReactTraining/react-router) to restrict routes, it checks if exist a session and redirects to the `redirectPath`\n\nExample:\n```javascript\nimport React from 'react';\nimport { Route, IndexRoute } from 'react-router';\nimport { sessionService } from 'redux-react-session';\nimport App from './components/App';\nimport HomePage from './containers/HomePage';\nimport LoginPage from './containers/LoginPage';\n\nexport default (\n  \u003cRoute path=\"/\" component={App}\u003e\n    \u003cIndexRoute onEnter={sessionService.checkAuth} component={HomePage} /\u003e\n    \u003cRoute path=\"login\" component={LoginPage} /\u003e\n  \u003c/Route\u003e\n);\n```\n\nNote: If you're using react-router v4 this function it's not necessary. Check out the [react-router-v4-example](https://github.com/bernabe9/redux-react-session/tree/master/examples/react-router-v4-example)\n\nNote: This function could be used in the client side as well as the server side.\n\n### saveSession(session:object) : Promise\nSaves the session object in the storage/cookies and changes the `authenticated` flag to `true` in Redux Store\n\n### loadSession : Promise(currentSession:Object)\nReturns the current session if exists\n\nExample:\n```javascript\nloadSession\n.then(currentSession =\u003e console.log(currentSession))\n.catch(err =\u003e console.log(err))\n```\n\n### deleteSession : Promise\nDeletes the current session from the storage/cookies\n\n### saveUser(user:object) : Promise\nSaves the user object in the storage/cookies and in the Redux Store\n\n### loadUser : Promise\nReturns the current user if exists\n\n### deleteUser : Promise\nDeletes the current user from the storage/cookies\n\n## Immutable JS\nUsage of `redux-react-session` with an immutable store is really simple.\nInstead of the `sessionReducer` import the `sessionReducer` from `redux-react-session/immutable`, as the following example:\n\n- Add the session reducer:\n```javascript\nimport { combineReducers } from 'redux';\nimport { sessionReducer as session } from 'redux-react-session/immutable';\n\nconst reducers = {\n  // ... your other reducers here ...\n  session\n};\nconst reducer = combineReducers(reducers);\n```\n## Server Rendering\n`redux-react-session` also provides methods to keep the session with server rendering using cookies. So the session will work on the server side as well as the client side.\n\nHere is an [example](https://github.com/bernabe9/redux-react-session/tree/master/examples/server%20rendering) using server rendering\n\n### initServerSession(store, req)\nInitialize an instance of the server session service.\n\nThis function is used in the `server.js` to initialize a session service instance in each request.\n```javascript\n// server.js\nimport { sessionService, sessionReducer } from 'redux-react-session';\nimport { combineReducers, createStore } from 'redux';\n\n// ...\napp.use((req, res) =\u003e {\n  const reducer = combineReducers({\n    session: sessionReducer\n  });\n  // Create a new Redux store instance\n  const store = createStore(reducer);\n\n  sessionService.initServerSession(store, req);\n  // ...\n}\n// ...\n```\n### initSessionService(store, { driver: 'COOKIES' })\nInitialize an instance of the client session service, IMPORTANT to set the option 'COOKIES'(this is the way that the client send the session data to the server).\n\nThis function is used in the `client.js` of the server rendering to initialize a session service instance.\n```javascript\n// client.js\nimport { createStore } from 'redux';\nimport { sessionService } from 'redux-react-session';\n\nconst store = createStore(reducer)\n\ninitSessionService(store, { driver: 'COOKIES' });\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbernabe9%2Fredux-react-session","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbernabe9%2Fredux-react-session","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbernabe9%2Fredux-react-session/lists"}