@atayahmet/react-axios-token-provider

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

Basic 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.

License

MIT