React Session Persist :key: :floppy_disk:

Keep your session sync with your storage and React components.

LIVE EXAMPLE

Installation

yarn: yarn add react-session-persist

npm: npm install react-session-persist --save

Usage

- Wrap your app with the Session component
``javascript
import { render } from 'react-dom';
import Session from 'react-session-persist';

render(


,
document.getElementById('app')
);
`
- Use the hook to get and handle the session inside React components
`javascript
import React from 'react';
import { useSession } from 'react-session-persist';

const MyComponent = () => {
const { authenticated, saveSession } = useSession();

const login = () => {
saveSession({ token: '123' });
}

if (authenticated) {
return

User logged in!


}

return LOG IN
}
`
- Use the API to handle the session anywhere
`javascript
import { saveSession } from 'react-session-persist';

const loginUser = (user) => {
const session = await loginRequest(user);
await saveSession(session);
}
`

Session

This component wraps the app to keep the internal session state in sync with the storage.

$3

| Prop | Default | Description |
| ------------- | -------------- | ------------- |
| storage | cache storage | Custom storage, it allows a simple storage or an async storage |
| initialData | undefined | Optional session data. Useful if your storage is async and you want an immediate start of your app or for SSR |

useSession hook

The hook consumes the session data and methods that the Session component provides through the context.

`javascript
{
session, // object with session data
authenticated, // boolean flag to check if the user is authenticated
user, // optional object with user data
saveSession, // promise to save the session
removeSession, // promise to remove the session
saveUser, // promise to save optional user data
loadDataFromStorage // get data directly from the storage
} = useSession()
`

API

$3

Returns the current session if exists. Otherwise, it returns undefined.

Example:
`javascript
import { getSession } from 'react-session-persist';

const session = await getSession();
`

$3


Saves the session in the storage and React state. Also, it updates the authenticated flag to true.

$3

Removes the session from the stores and React state. Also, it updates the authenticated flag to false.

$3

Returns the optional user data if exists. Otherwise, it returns undefined.

$3

Saves optional user data (user's name, email, etc) in the storage and React state. Also, it updates the authenticated flag to true.

$3

Returns a boolean flag that is true if there is a session in the storage.

$3

Gets the data directly from the storage.

Custom Storage

You can create your own storage just providing an object with 3 methods:

`javascript
const storage = {
getItem(key: string): Promise? or object,
setItem(key: string, data: object): Promise? or void,
removeItem(key: string): Promise? or void
}
`

Each method could return a promise or value. If a method returns a promise the storage is consider an async storage.

By default react-redux-persist` uses the cache storage.

$3

Check out the async example to use another storage, this example uses localForage.

$3

SSR