jwt-auth-react

Authenticate users in React app with JWT based authentication

dependencies

React Context and Hooks based Authentication Package for React Apps

Install

npm install --save jwt-auth-react

Usage

1. AuthProvider

AuthProvider relies on the context feature of React to pass the Auth down to the components, so you need to make sure that AuthProvider is a parent of the Routing components. You can learn more about this in the API section.

import {AuthProvider} from "jwt-auth-react";
 
...
 
<AuthProvider>
    <RouteComponent />
</AuthProvider>

2. PrivateRoute

PrivateRoute relies on react-router-dom same as the Route component of React Router. It creates a Route to an Authentication based component. If the user is not authenticated, it will redirect to login Page. You can learn more about this in the API section.

import {BrowserRouter, Route} from "react-router-dom";
import {PrivateRoute} from "jwt-auth-react";
 
...
 
<BrowserRouter>
    <Route component={LoginComponent} path={LOGIN_URL} exact/>
    ...
    <PrivateRoute component={DashboardComponent} path={DASHBOARD_URL} loginPath={LOGIN_URL}/>
</BrowserRouter>

3. loginAuth

loginAuth is a function api, relies on React Hooks. It logs in the user and stores the JWT token and expiresIn time in minutes. Impliment the loginAuth function on login pipeline i.e in login api response. You can learn more about this in the API section.

Example with fetch:

import {loginAuth} from "jwt-auth-react";
 
const do_login = async () => {
    const res = await fetch("https://api.abc.xyz/login");
    if (res.status === 200){
        const res_json = res.json()
        const jit_token = res_json.jit;
        const expiresIn = res_json.expiresIn;
        loginAuth(token = jit_token, expiresIn = expiresIn);
    }
}

Example with axios:

import axios from 'axios'
import {loginAuth} from "jwt-auth-react";
 
const do_login = async () => {
    const res = await axios.post("https://api.abc.xyz/login");
    if (res.status === 200){
        const res_json = res.data;
        const jit_token = res_json.jit;
        const expiresIn = res_json.expiresIn;
        loginAuth(token = jit_token, expiresIn = expiresIn);
    }
}

4. logoutAuth

logoutAuth is a function api, relies on React Hooks. It logouts the current user and clear all token. Impliment the logoutAuth function on logout pipeline ex. on Logout Button Click. You can learn more about this in the API section.

import react from 'react';
import {logoutAuth} from "jwt-auth-react";
 
const logoutComponent = () => {
    const logoutPipeline = () => {
        logoutAuth()
    }
    return <button onClick={logoutPipeline}>Logout</button>
}

5. authHeader

logoutAuth is a function api. It produces the authentication header string for logged in user.

It returns Bearer: xxxxxx string

Example with fetch:

import {authHeader} from "jwt-auth-react";
 
const do_something = async () => {
    const myInit = {
        method: 'GET',
        headers: {
            'Authentication': authHeader()
        }
    }
    const res = await fetch("https://api.abc.xyz/something", myInit);
 
    if (res.status === 200){
        const res_json = res.json()
        ...
    }
}

Example with axios:

import axios from "axios";
import {authHeader} from "jwt-auth-react";
 
const do_something = async () => {
    const res = await axios.get("https://api.abc.xyz/something",
        headers: {
            'Authentication': authHeader()
        });
    if (res.status === 200){
        const res_json = res.json()
        ...
    }
}