Skip to content

Integration

React Auth Kit uses an RxJs-based store to maintain data and React's Context API to distribute data throughout the application.


Store Creation

To use React Auth Kit in the application, we first need to create the store that holds the data for our application.

Import

Import createStore in your app
import createStore from 'react-auth-kit/createStore';

Usage

Create Store
1
2
3
4
5
6
const store = createStore({
  authName:'_auth',
  authType:'cookie',
  cookieDomain: window.location.hostname,
  cookieSecure: window.location.protocol === 'https:',
});

AuthProvider

AuthProvider provides top-level context API for React Auth Kit.

Import

Import AuthProvider in your app
import AuthProvider from 'react-auth-kit';

Usage

Integrate AuthProvider before Routes. The best place is app.js.

app.js
import React from 'react';
import { AuthProvider } from 'react-auth-kit'
import RouteComponent from './routes';

const App = () => (
    <AuthProvider store={store}>
      <RoutesComponent/>
    </AuthProvider>
);

export default App;

API

Warning

AuthProvider should wrap the BrowserRouter or HashRouter, otherwise PrivateRoute will not work and throw an error.

Warning

If you are using the Refresh Token feature, then you must add the refresh prop with proper value, otherwise refresh token will throw a not implemented error. If you are not using the Refresh Token feature, then don't add it

— 🔑 —

React Auth Kit is MIT License code