React Token Manager

A simple React library to manage JWT tokens with support for localStorage, sessionStorage, and cookies. Features include storing tokens, decoding JWTs, checking expiration, and a convenient React hook.

Installation

npm install react-token-manager

Global Configuration

Set storage type and token key once for your app:

import { configureTokenManager } from 'react-token-manager'

configureTokenManager({
  storage: 'localStorage', // 'localStorage' | 'sessionStorage' | 'cookie'
})

Using the Hook useTokenManager

import { useTokenManager } from 'react-token-manager'

export default function Dashboard() {
  const {
    setTokens,
    getTokens,
    getSingleToken,
    removeTokens,
    clearTokens,
    decodeToken,
    isExpired,
  } = useTokenManager()

  // Set multiple tokens
  setTokens({
    access_token: 'abc123',
    refresh_token: 'xyz789',
  })

  // Get multiple tokens
  const tokens = getTokens(['access_token', 'refresh_token'])
  console.log(tokens.access_token) // 'abc123'

  // Get a single token by key
  const accessToken = getSingleToken('access_token')
  console.log(accessToken)

  // Decode a token
  const payload = decodeToken(accessToken!)

  // Check if a token is expired
  console.log(isExpired(accessToken!))

  // Remove multiple tokens
  removeTokens(['access_token', 'refresh_token'])

  // Clear all tracked tokens
  clearTokens()
}

You can override storage or tokenKey per hook if needed.

Using TokenManager Class Directly

import { TokenManager } from 'react-token-manager'

const manager = new TokenManager({ storage: 'cookie' })

// Set multiple tokens
manager.set({
  access_token: 'abc123',
  refresh_token: 'xyz789',
})

// Get multiple tokens
const tokens = manager.get(['access_token', 'refresh_token'])
console.log(tokens.access_token)

// Get a single token
const access = manager.getOne('access_token')

// Decode a token
console.log(manager.decode(access!))

// Check if token is expired
console.log(manager.isExpired(access!))

// Remove multiple tokens
manager.remove(['access_token', 'refresh_token'])

// Clear all tokens
manager.clear()

API Reference

Set global options.

{
  storage?: 'localStorage' | 'sessionStorage' | 'cookie';
}


useTokenManager(options?: TokenManagerOptions)

Returns:
  setTokens(tokens: Record<string, string>)       // Set multiple tokens

  getTokens(keys: string | string[])              // Get multiple tokens

  getSingleToken(key: string)	                    //Get a single token by key

  removeTokens(keys: string | string[])          // Remove multiple tokens

  decodeToken<T = unknown>(token: string)        // Decode a single token

  isExpired(token: string)                       // Check if a token is expired


TokenManager Class Methods
  set(tokens: Record<string, string>)            // Store multiple tokens

  get(keys: string | string[])                   // Retrieve multiple tokens

  getOne(key: string)	                           // Retrieve a single token

  remove(keys: string | string[])                // Delete multiple tokens

  decode<T = unknown>(token: string)             // Decode a single token

  isExpired(token: string)                       // Check if a token is expired

Examples

Multiple Tokens

const { setTokens, getTokens } = useTokenManager()

setTokens({
  access_token: 'abc',
  refresh_token: 'xyz',
})

const tokens = getTokens(['access_token', 'refresh_token'])
console.log(tokens.access_token) // 'abc'
console.log(tokens.refresh_token) // 'xyz'

Using Cookies

configureTokenManager({ storage: 'cookie' })

Checking Expiry Before API Call

const { getSingleToken, isExpired } = useTokenManager()
const accessToken = getSingleToken('access_token')

if (!isExpired(accessToken!)) {
  callApi(accessToken)
} else {
  refreshToken()
}