React Axios Token Provider package is a make easy what repetitive processes. For example handle access token or refresh token management process easly.

It can be preferred to reduce repetitive practices for authentication operations in projects.

• Access token management
• Refresh token management
• Csrf/Xsrf token management

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-provider

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>
  );
}

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>;

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>

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>

{
  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'],
}

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>

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

MIT