# jwt-auth-react
> Authenticate users in React app with JWT based authentication
Latest version **4.1.2** (published 2020-06-27) · Apache-2.0 license · 0 weekly downloads
> **Deprecated.** This package is deprecated.
## Install
```sh
npm install jwt-auth-react
pnpm add jwt-auth-react
yarn add jwt-auth-react
bun add jwt-auth-react
```
## Health
**Score 10/100 (F)** — status: deprecated.
Negative: deprecated.
## Facts
| | |
|---|---|
| Version | 4.1.2 |
| Published | 2020-06-27 |
| First published | 2020-06-16 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 67 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Arkadip Bhattacharya |
| Maintainers | darkmatter18 |
| Keywords | jwt, auth, react, reactJs, react native, authentication, react jwt auth, react token auth, react authentication, react json web token |
## Links
- npm: https://www.npmjs.com/package/jwt-auth-react
- Repository: https://github.com/darkmatter18/jwt-auth-react
- Issues: https://github.com/darkmatter18/jwt-auth-react/issues
- npm.io page: https://npm.io/package/jwt-auth-react
## Alternatives
- [@pothos/plugin-authz](https://npm.io/package/@pothos/plugin-authz.md) — 12.4K weekly downloads
- [@bounded-sh/client](https://npm.io/package/@bounded-sh/client.md) — 3.2K weekly downloads
- [@luigi-project/plugin-auth-oauth2](https://npm.io/package/@luigi-project/plugin-auth-oauth2.md) — 2.3K weekly downloads
- [@nocobase/plugin-verification](https://npm.io/package/@nocobase/plugin-verification.md) — 2.0K weekly downloads
- [escher-request](https://npm.io/package/escher-request.md) — 545 weekly downloads
## Recent versions
- 4.1.2 (latest) — 2020-06-27
- 4.1.1 — 2020-06-27
- 4.1.0 — 2020-06-27
- 4.0.6 — 2020-06-27
- 4.0.5 — 2020-06-27
- 4.0.4 — 2020-06-27
- 4.0.3 — 2020-06-27
- 4.0.2 — 2020-06-27
- 4.0.0 — 2020-06-21
- 3.2.9-0 — 2020-06-21
- 3.2.8 — 2020-06-21
- 3.2.7 — 2020-06-21
- 3.2.6 — 2020-06-21
- 3.2.5 — 2020-06-21
- 3.2.4 — 2020-06-21
- … 16 more at https://npm.io/package/jwt-auth-react/versions
## README
# jwt-auth-react
> Authenticate users in React app with JWT based authentication
[](https://www.npmjs.com/package/jwt-auth-react)
[](https://standardjs.com)
React [Context](https://reactjs.org/docs/context.html) and [Hooks](https://reactjs.org/docs/hooks-intro.html)
based `Authentication` Package for [React](https://reactjs.org/) Apps
## Install
```bash
npm install --save jwt-auth-react
```
## Usage
#### 1. AuthProvider
`AuthProvider` relies on the [context feature of React](https://reactjs.org/docs/context.html) 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.
```jsx
import {AuthProvider} from "jwt-auth-react";
...
```
#### 2. PrivateRoute
`PrivateRoute` relies on [react-router-dom](https://reacttraining.com/react-router) same as the
[`Route` component of React Router](https://reacttraining.com/react-router/web/api/Route).
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.
```jsx
import {BrowserRouter, Route} from "react-router-dom";
import {PrivateRoute} from "jwt-auth-react";
...
...
```
#### 3. loginAuth
`loginAuth` is a function api, relies on [React Hooks](https://reactjs.org/docs/hooks-intro.html).
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`:
```jsx
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`:
```jsx
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](https://reactjs.org/docs/hooks-intro.html).
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.
```jsx
import react from 'react';
import {logoutAuth} from "jwt-auth-react";
const logoutComponent = () => {
const logoutPipeline = () => {
logoutAuth()
}
return
}
```
#### 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`:
```jsx
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`:
```jsx
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()
...
}
}
```
## Maintainer
[](https://github.com/darkmatter18/) [](https://github.com/darkmatter18/)
[](https://sourcerer.io/fame/darkmatter18/darkmatter18/jwt-auth-react/links/0)[](https://sourcerer.io/fame/darkmatter18/darkmatter18/jwt-auth-react/links/1)[](https://sourcerer.io/fame/darkmatter18/darkmatter18/jwt-auth-react/links/2)[](https://sourcerer.io/fame/darkmatter18/darkmatter18/jwt-auth-react/links/3)[](https://sourcerer.io/fame/darkmatter18/darkmatter18/jwt-auth-react/links/4)[](https://sourcerer.io/fame/darkmatter18/darkmatter18/jwt-auth-react/links/5)[](https://sourcerer.io/fame/darkmatter18/darkmatter18/jwt-auth-react/links/6)[](https://sourcerer.io/fame/darkmatter18/darkmatter18/jwt-auth-react/links/7)
**[Arkadip Bhattacharya](https://www.linkedin.com/in/arkadip/)**
> ***Need help?***
***Feel free to contact me @ [in2arkadipb13@gmail.com](mailto:in2arkadipb13@gmail.com?Subject=Github:Udacity-Computer-Vision-Nanodegree-Repository)***
[](https://github.com/darkmatter18/) [](https://twitter.com/Arkadipb21)
[]()
[]()
[]()
## License
Apache-2.0 © [darkmatter18](https://github.com/darkmatter18)
---
_Source: https://npm.io/package/jwt-auth-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._