Refresh accessToken when JWT access token has expired

README.md

@@ -48,7 +48,7 @@ yarn
 
 ### 3. Create Discord Bot
 
-Create and setup the Discord bot. Be sure to take not of ENV variables during setup as these will be needed during the next step. You need to have administrative access to a Discord server in order to create a bot. Creating a server is free, we recommend setting up a personal server to use for testing purposes. 
+Create and setup the Discord bot. Be sure to take not of ENV variables during setup as these will be needed during the next step. You need to have administrative access to a Discord server in order to create a bot. Creating a server is free, we recommend setting up a personal server to use for testing purposes.
 
 [Create the Praise Discord bot](https://givepraise.xyz/docs/server-setup/create-discord-bot)
 
@@ -70,6 +70,12 @@ Run mongo:
 yarn mongodb:start
 ```
 
+Finishing ENV setup
+
+```
+yarn run setup
+```
+
 ### 6. Build and start api backend
 
 Api, discord-bot and frontend can also be started from the Visual Studio Code Launch menu.

packages/frontend/package.json

@@ -74,7 +74,7 @@
     "analyze": "yarn run build && source-map-explorer --gzip 'build/static/js/*.js'",
     "load-env": "env-cmd --silent --no-override -f ../../.env env-cmd --silent --no-override",
     "start": "PORT=$(grep FRONTEND_PORT ../../.env | cut -d '=' -f2) TAILWIND_MODE=watch yarn run load-env craco start",
-    "lint": "eslint . --ext .ts --ext .tsx",
+    "lint": "eslint . --ext .ts --ext .tsx --fix",
     "test": "jest",
     "test:watch": "jest --watch"
   },

packages/frontend/src/model/auth/auth.ts

@@ -27,6 +27,16 @@ export const AccessToken = selector<string | undefined>({
   },
 });
 
+export const RefreshToken = selector<string | undefined>({
+  key: 'RefreshToken',
+  get: ({ get }) => {
+    const activeTokenSet = get(ActiveTokenSet);
+    if (!activeTokenSet) return;
+
+    return activeTokenSet.refreshToken;
+  },
+});
+
 export const DecodedAccessToken = selector<JwtTokenData | undefined>({
   key: 'DecodedAccessToken',
   get: ({ get }) => {

packages/frontend/src/model/auth/dto/refresh-token-input-dto.ts

@@ -0,0 +1,3 @@
+import { components } from 'api-types';
+
+export type RefreshTokenInputDto = components['schemas']['GenerateTokenDto'];

packages/frontend/src/model/auth/interfaces/token-set.interface.ts

@@ -1,3 +1,4 @@
 export interface TokenSet {
   accessToken: string;
+  refreshToken: string;
 }

packages/frontend/src/utils/auth.ts

@@ -7,6 +7,7 @@ import { ActivateInputDto } from '@/model/activate/dto/activate-input.dto';
 import { TokenSet } from '@/model/auth/interfaces/token-set.interface';
 import { LoginResponseDto } from '@/model/auth/dto/login-response.dto';
 import { NonceResponseDto } from '@/model/auth/dto/nonce-response.dto';
+import { RefreshTokenInputDto } from '@/model/auth/dto/refresh-token-input-dto';
 
 export const requestApiAuth = async (
   params: LoginInputDto
@@ -15,10 +16,30 @@ export const requestApiAuth = async (
   const response = await apiClient.post('/auth/eth-signature/login', params);
   if (!response) throw Error('Failed to request authorization');
 
-  const { accessToken } = response.data as unknown as LoginResponseDto;
+  const { accessToken, refreshToken } =
+    response.data as unknown as LoginResponseDto;
 
   setRecoil(ActiveTokenSet, {
     accessToken,
+    refreshToken,
+  });
+
+  return getRecoil(ActiveTokenSet);
+};
+
+export const requestApiRefreshToken = async (
+  params: RefreshTokenInputDto
+): Promise<TokenSet | undefined> => {
+  const apiClient = makeApiClient();
+  const response = await apiClient.post('/auth/eth-signature/refresh', params);
+  if (!response) throw Error('Failed to request authorization');
+
+  const { accessToken, refreshToken } =
+    response.data as unknown as LoginResponseDto;
+
+  setRecoil(ActiveTokenSet, {
+    accessToken,
+    refreshToken,
   });
 
   return getRecoil(ActiveTokenSet);

packages/frontend/src/utils/axios.ts

@@ -1,5 +1,6 @@
 import axios, { AxiosError, AxiosInstance } from 'axios';
 import { toast } from 'react-hot-toast';
+import { requestApiRefreshToken } from '@/utils/auth';
 
 const isJsonBlob = (data): data is Blob =>
   data instanceof Blob && data.type === 'application/json';
@@ -9,10 +10,48 @@ const isJsonBlob = (data): data is Blob =>
  *
  * @param err
  */
-export const handleErrors = (
-  err: AxiosError,
+export const handleErrors = async (
+  err: AxiosError<{
+    code: number;
+    message: string;
+    statusCode: number;
+  }>,
   handleErrorsAutomatically = true
-): AxiosError => {
+): Promise<
+  AxiosError<{
+    code: number;
+    message: string;
+    statusCode: number;
+  }>
+> => {
+  let refreshToken;
+  const recoilPersist = localStorage.getItem('recoil-persist');
+  if (recoilPersist) {
+    refreshToken = JSON.parse(recoilPersist)?.ActiveTokenSet?.refreshToken;
+  }
+
+  if (
+    refreshToken &&
+    recoilPersist &&
+    err?.response?.status === 401 &&
+    // 1092, 1107 are the error codes for invalid jwt token that defined in backend
+    (err?.response?.data?.code === 1092 || err?.response?.data?.code === 1107)
+  ) {
+    // delete the old token from localStorage to prevent infinite loop
+    delete recoilPersist['ActiveTokenSet'];
+    localStorage.setItem(JSON.stringify(recoilPersist), 'recoil-persist');
+    try {
+      await requestApiRefreshToken({ refreshToken });
+      toast('Please try again');
+      return err;
+    } catch (error) {
+      console.log(
+        'refresh accessToken error',
+        (error as AxiosError)?.response?.data
+      );
+    }
+  }
+
   // Handling errors automatically means the error will be displayed to the user with a toast.
   // If not handled automatically, the error will just be logged to the console and returned.
   if (!handleErrorsAutomatically) {
@@ -27,8 +66,8 @@ export const handleErrors = (
         const json = JSON.parse(text);
         toast.error(json.message);
       });
-    } else if ((err.response.data as Error).message) {
-      toast.error((err.response.data as Error).message);
+    } else if (err.response.data.message) {
+      toast.error(err.response.data.message);
     } else {
       toast.error('Something went wrong');
     }