react-native-axios-jwt

Store, clear, transmit and automatically refresh JWT authentication tokens in a React Native environment.

Looking for a web alternative? Check out axios-jwt

What does it do?

Applies a request interceptor to your axios instance.

The interceptor automatically adds a header (default: Authorization) with an access token to all requests. It stores accessToken and refreshToken in AsyncStorage and reads them when needed.

It parses the expiration time of your access token and checks to see if it is expired before every request. If it has expired, a request to refresh and store a new access token is automatically performed before the request proceeds.

Installation

1. Install React Native Async Storage

2. Install this library

With npm:

1npm install react-native-axios-jwt

With Yarn:

1yarn add react-native-axios-jwt

How do I use it?

1. Create an axios instance.
2. Define a token refresh function.
3. Configure the interceptor.
4. Store tokens on login with setAuthTokens function.
5. Clear tokens on logout with clearAuthTokens function.

Applying the interceptor

1// api.ts
2
3import axios from 'axios'
4import {
5  type AuthTokenInterceptorConfig,
6  type AuthTokens,
7  type TokenRefreshRequest,
8  applyAuthTokenInterceptor,
9} from 'react-native-axios-jwt'
10
11const BASE_URL = 'https://api.example.com'
12
13// 1. Create an axios instance that you wish to apply the interceptor to
14export const axiosInstance = axios.create({
15  baseURL: BASE_URL,
16})
17
18// 2. Define token refresh function.
19// It is an async function that takes a refresh token and returns a promise
20// that resolves in fresh access token and refresh token.
21// You can also return only an access token in a case when a refresh token stays the same.
22const requestRefresh: TokenRefreshRequest = async (
23  refreshToken: string,
24): Promise<AuthTokens> => {
25  // Important! Do NOT use the axios instance that you supplied to applyAuthTokenInterceptor
26  // because this will result in an infinite loop when trying to refresh the token.
27  // Use the global axios client or a different instance.
28  const response = await axios.post(`${BASE_URL}/auth/refresh_token`, {
29    token: refreshToken,
30  })
31
32  const {
33    access_token: newAccessToken,
34    refresh_token: newRefreshToken,
35  } = response.data
36
37  return {
38    accessToken: newAccessToken,
39    refreshToken: newAccessToken,
40  }
41}
42
43const config: AuthTokenInterceptorConfig = {
44  requestRefresh,
45}
46
47// 3. Add interceptor to your axios instance
48applyAuthTokenInterceptor(axiosInstance, config)

Login

1// login.ts
2
3import { setAuthTokens } from 'react-native-axios-jwt'
4
5import { axiosInstance } from './api'
6
7// 4. Log in with POST request with the email and password.
8// Get access token and refresh token in response.
9// Call `setAuthTokens` with the tokens.
10const login = async (params: LoginRequestParams): void => {
11  const response = await axiosInstance.post('/auth/login', params)
12
13  const {
14    access_token: accessToken,
15    refresh_token: refreshToken,
16  } = response.data
17
18  // Save tokens to AsyncStorage.
19  await setAuthTokens({
20    accessToken,
21    refreshToken,
22  })
23}

Usage

1// usage.ts
2
3import {
4  getAccessToken,
5  getRefreshToken,
6  isLoggedIn,
7} from 'react-native-axios-jwt';
8
9// Check if the user is logged in.
10if (isLoggedIn()) {
11  // Assume the user is logged in because we have a refresh token stored in AsyncStorage.
12}
13
14// Use access token.
15const doSomethingWithAccessToken = async (): void => {
16  const accessToken = await getAccessToken()
17
18  console.log(accessToken)
19}
20
21// Use refresh token.
22const doSomethingWithRefreshToken = async (): void => {
23  const refreshToken = await getRefreshToken()
24
25  console.log(refreshToken)
26}

Logout

1// logout.ts
2
3import { clearAuthTokens } from 'react-native-axios-jwt'
4
5// 5. Log out by clearing the auth tokens from AsyncStorage.
6const logout = async (): void => {
7  await clearAuthTokens()
8}

Configuration

1applyAuthTokenInterceptor(axiosInstance, {
2  header = 'Authorization',  // header name
3  headerPrefix = 'Bearer ',  // header value prefix
4  requestRefresh,  // async function that resolves in fresh access token (and refresh token)
5})

Caveats

• Your backend should allow a few seconds of leeway between when the token expires and when it actually becomes unusable.