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