atayahmet
React Axios Token Provider
React Axios Token Provider package is a make easy what repetitive processes. For example handle access token or refresh token management process easly.
Why
It can be preferred to reduce repetitive practices for authentication operations in projects.
Features
- Access token management
- Refresh token management
- Csrf/Xsrf token management
Installation
Use the package manager yarn or npm to install react-axios-token-provider
$ npm i @atayahmet/react-axios-token-provider --save$ yarn add @atayahmet/react-axios-token-providerBasic Usage
import AxiosTokenProvider from '@atayahmet/react-axios-token-provider';
import axios from 'axios';
function App() {
return (
<AxiosTokenProvider instance={axios}>
<div>
<h1>Hello World!</h1>
</div>
</AxiosTokenProvider>
);
}Props
| name | type | default | description |
|---|---|---|---|
| instance | AxiosInstance | AxiosInstance | An axios instance. |
| init | Function | - | Initializer helper function. |
| refreshToken | Boolean | false | Activation of refresh token. |
| csrfToken | Boolean | false | Activation of csrf token. |
| initialAccessToken | String | - | Initial access token. |
| initialRefreshToken | String | - | Initial refresh token. |
| initialCsrfToken | String | - | Initial csrf token. |
| tokenPathVariants | IPathVariants | Default Path Variants | The paths of all type tokens in response object. |
| statusCallbacks | Object | - | Specific events of status codes. |
instance
You need to define your axios instance you want to manage. If no instance is defined, no action will be taken. A log is written to the console at the warning level.
Example:
import axios from 'axios';
<AxiosTokenProvider instance={axios}>
<App />
</AxiosTokenProvider>;init
The init prop is a inilizer function for provide extra config to developers.
Example:
function initializer(instance) {
instance.baseURL = 'https://reqres.in/api';
}<AxiosTokenProvider init={initializer} instance={axios}>
<App />
</AxiosTokenProvider>tokenPathVariants
You can define all token (access, refresh or csrf) paths to this prop.
Example:
<AxiosTokenProvider
tokenPathVariants={{
accessToken: ['headers.X-Access-Token', 'data.tokens.access_token'],
refreshToken: ['headers.X-Refresh-Token', 'data.tokens.refresh_token'],
}}
></AxiosTokenProvider>Default Path Variants
{
accessToken: ['headers.x-access-token', 'data.access_token'],
csrfToken: ['headers.x-csrf-token', 'headers.x-xsrf-token'],
refreshToken: ['headers.x-refresh-token', 'data.refresh_token'],
}statusCallbacks
You can define specific callbacks to response status codes.
Example:
function unauthorized(response) {
location.href = '/login';
}
function forbidden(response) {
// do something
}<AxiosTokenProvider
statusCallbacks={{
401: unauthorized,
403: forbidden,
}}
></AxiosTokenProvider>Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.