Skip to content

Refresh Tokens

Refresh your auth Tokens in an interval

Sometimes, you need to refresh authentication token details, or the authenticated user's state (information).

To do this dynamically in your component, You have to include the RefreshToken object in your component.

You can use in both React Hooks or React Higher Order Component for both Functional Components and Class-based Components

1. Add Refresh Token Object in Component

Refresh Token using Hooks in Functional Components

RefreshToken object can be included in functional component using useRefreshToken hook

import { useRefreshToken } from 'react-auth-kit'

Demo

import React from "react"
import { useRefreshToken } from 'react-auth-kit'

const AnyPrivateComponent = () => {
    const refreshToken = useRefreshToken()

    ...
}

Refresh Token using Higher Order Component in Class-based Components

Sign In using Higher Order Component using withSignOut.

Add the withSignOut HOC and call the this.props.signOut function inside the component

import { withSignOut } from 'react-auth-kit'

Demo

import React from "react"
import { withRefreshToken } from 'react-auth-kit'

class AnyPrivateComponent extends React.Component {
  render(){
    const {refreshToken} = this.props
    return (
      ...
    )
  }
}

export default withRefreshToken(AnyPrivateComponent)

2. Implement refreshToken object methods

RefreshToken has all the methods you need to refresh the auth states programmatically.

Methods

There are 4 methods, you can use to refresh the Auth Token and User's details

  1. getCurrentAuthState(): Get the current auth token, auth token type, expiring time
  2. getCurrentUserState(): Get the current user state
  3. updateAuthState(): Update the auth state including auth token, auth token type and expiring time
  4. updateUserState(): Update the user's auth state

See the example below for the usage, and see the API for detailed description.

Full Demo (using hook and FC)

import React from 'react'
import axios from 'axios'
import {useRefreshToken} from 'react-auth-kit'

const RefreshComponent = () => {
  const refreshToken = useRefreshToken() // Create the refresh token object

  React.useEffect(()=>{
    const {authToken, authTokenType, expireAt} = refreshToken.getCurrentAuthState() //Get the current state
    const userState = refreshToken.getCurrentUserState()  //Get the current user's state

    //Send the current auth token ad user state to backend
    axios.post('/some/refresh/api/to/backend', data={
      authToken: authToken,
      authTokenType: authTokenType,
      expireAt: expireAt,
      userState: userState
    }).then((res)=>{
      if(res.status === 200) {
        // Setting the auth state
        refreshToken.updateAuthState(res.data.authToken, res.data.authTokenType, res.data.expireIn)

        // Setting the userstate
        refreshToken.updateUserState(res.data.userState)
      }
      else {
        // Throw error
      }
    })
  },[])

  return <React.Fragment/>
}

RefreshToken API

RefreshToken has the following 4 methods.

  1. getCurrentAuthState():

Get the current auth state as an object

Returns { authToken: string | null; authTokenType: string | null; expireAt: Date | null }

  • authToken: current auth token
  • authTokenType: current auth Token type (eg. Bearer)
  • expireAt: current expire time

  • getCurrentUserState():

Get the Current User State

Returns object | null - Current User state

  1. getCurrentRefreshToken():

Get the current Refresh Token

Returns { refreshToken: string | null; refreshTokenExpireAt: Date | null }

  • refreshToken: string | null - Current Refresh Token
  • refreshTokenExpireAt: Date | null - Expiry time of current refresh Token

  • updateAuthState():

updates the AuthState

Parameters

  • authToken: string

    The Updated authToken

  • optional authTokenType: undefined | string

    The updated authType (optional)

  • optional expiresIn: undefined | number

    The updated expiresIn in minutes. (optional)

If the new authToken has different expire time, then you must have to update the expiresIn param

Returns void

  1. updateRefreshToken():

Updates the Current Refresh Token

Parameters

  • refreshToken: string

    New Refresh Token

  • expiresIn: number

    New Expiry Time for the new Refresh Token in Minutes

Returns void

  1. updateUserState():

Updates the Auth User's state

Parameters

userState: object

Updated User State

Returns void

— 🔑 —

React Auth Kit is Apache 2.0 License code