use-jwt-manager

use-jwt-manager

1)Create a context

import React from 'react';
import { jwtManagerContext } from 'use-jwt-manager/dist/constants/types';

export const AuthConext = React.createContext<Partial<jwtManagerContext>>({});

2)Create an Interceptor (optional):

import axios from 'axios';
import { useContext, useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import{ AuthConext } from '../contexts';

const useInterceptor = (): void => {
  const context = useContext(AuthConext);
  const history = useHistory();
  useEffect(() => {
    axios.interceptors.response.use(
      (response) => response , 
      (error) => {
        const { status } = error.response;
        if (status == 401) {
          if (context.refresh_token) {
            //@ts-ignore 
            context.refresh();
          } else {
            //@ts-ignore 
            context.logout().then(
              ()=> history.push('/login')
            )
           
          }
        }
        return Promise.reject(error);
      }
    );
  }, []);
};

export default useInterceptor;

3)Wrap your application with the Context provider

export const Root: React.FC<{}> = ({}) => {
  const config = { TOKEN_KEY, REFRESH_TOKEN_KEY };
  const authContext = useJWT({ login, me, refresh, config });
  useInterceptor();
  return (
    <AuthConext.Provider value={authContext}>
      <Router>
        <Switch>
          <Route path="/login" component={Login} exact />
          <PrivateRoute path="/" component={Home} exact />
        </Switch>
      </Router>
    </AuthConext.Provider>
  );
};