🛡
Axios Token Bother with handling jwt web tokens in your React project? Wanna a "magick stick" which does everything by its own? So, you are in right package!
Please welcome to axios-token
- fastest way to handle web tokens.
Here are all steps you need to do:
Step 1
Create an instance of Axios and pass it to axiosToken
as shown down below:
import { axiosToken } from "axios-token-handler";
const axios = Axios.create({
baseURL,
timeout: 100000,
withCredentials: true,
headers: {
"Content-type": "application/json"
}
});
export const tokenHandler = axiosToken(axios, {
accessTokenKey: "access_token",
refreshTokenKey: "refresh_token",
accessTokenExpiresInKey: "expires_in",
refreshTokenUrl: "/auth/refresh",
onExpired() {
tokenHandler.clearToken();
// Logout from project or redirect to login page
}
});
Step 2
In your signin or signup implementations pass sucessfull payload to setToken()
method:
// for example
const { mutate, isLoading } = useMutation(AuthApi.loginUser, {
onSuccess: tokens => tokenHandler.setToken(tokens);
});
Let's suppose your server returns following payload during user signin
or signup
:
{
"token_type": "Bearer",
"access_token": "yourJWTAccessToken",
"refresh_token": "yourJWTRefreshToken",
"expires_in": 86400
}
All token information are saved to sessionStorage
by default.
Fields explanation:
Field name | Default values | Description |
---|---|---|
accessTokenKey |
accessToken |
this field per our response example should be changed to access_token
|
refreshTokenKey |
refreshToken |
this field per our response example should be changed to refresh_token
|
accessTokenExpiresInKey |
accessTokenExpiresIn |
this field per our response example should be changed to expires_in
|
refreshTokenurl |
an empty string
|
this field requires refresh token url path implemented in server. If server url provided as axios baseUrl it is enough to add relative path like /auth/refresh . |
Methods explanation:
Method name | Parameters | Description |
---|---|---|
getToken() |
access_token | refresh_token | or no argument |
If no argument has been passed it returns object payload saved in Storage. Otherwise, it returns string of provided key value. |
setToken() |
payload from server | On Signin or Signup just pass an object of token information. Example response has been provided above. |
refreshToken() |
no arguments | In case where new tokens are required, just call this method and all tokens would be refreshed. |
clearToken() |
no arguments | Clears token information from Storage. |
Callback methods explanation:
Method name | Return values | Description |
---|---|---|
onExpired() |
error | This is for controlling next step in case when refresh token expires. Usually in this case better to clear storage and forward to login/home pages. |
ontError() |
error | If during handling process somthing goes wrong, then an error would be thrown for further catch at your side. |