This Package is depricated. Use react-auth-kit for more optimized and enhanced experience
react-auth-jwt
Authenticate users in React app with JWT based authentication
React Context and Hooks
based Authentication
Package for React Apps
Install
npm install --save react-auth-jwt
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 "react-auth-jwt" ... <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 "react-auth-jwt" ... <BrowserRouter> <Route = = /> ... <PrivateRoute = = = /></BrowserRouter>
3. useSignIn
useSignIn
is a function api, relies on React Hooks.
It logs in the user and stores the JWT token
and expiresIn
time in minutes
.
Implement the useSignIn
function on login pipeline i.e in login api response
.
You can learn more about this in the API section.
Example with fetch
:
import React from 'react'import useSignIn from "react-auth-jwt" const AnyComponent = const signIn = const do_login = const res = await if resstatus === 200 const res_json = res const jit_token = res_jsonjit const expiresIn = res_jsonexpiresIn return <React.Fragment> ... </React.Fragment>
Example with axios
:
import React from 'react'import axios from 'axios'import useSignIn from "react-auth-jwt" const AnyComponent = const signIn = const do_login = const res = await axios; if resstatus === 200 const res_json = resdata; const jit_token = res_jsonjit; const expiresIn = res_jsonexpiresIn; ; return <React.Fragment> ... </React.Fragment>
4. useSignOut
useSignOut
is a function api, relies on React Hooks.
It logouts the current user and clear all token.
Implement the useSignOut
function on logout pipeline ex. on Logout Button Click.
You can learn more about this in the API section.
import React from 'react';import useSignOut from "react-auth-jwt"; const LogoutComponent = const signOut = const logoutPipeline = return <React.Fragment> <button =>Logout</button> </React.Fragment>
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 React from "react";import useAuthHeader from "react-auth-jwt"; const AnyComponent = const authHeader = const myInit = method: 'GET' headers: 'Authentication': const res = await ; if resstatus === 200 const res_json = res ... return <React.Fragment> ... </React.Fragment>
Example with axios
:
import React from "react";import axios from "axios";import useAuthHeader from "react-auth-jwt"; const AnyComponent = const authHeader = const do_something = const res = await axios; if resstatus === 200 const res_json = res ... return <React.Fragment> ... </React.Fragment>
License
Apache-2.0 © darkmatter18