Fix token refresh flow for multipart requests (#84)

Author: Gadhi Rodriguez

packages/authentication/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @baseapp-frontend/authentication
 
+## 2.0.0
+
+### Major Changes
+
+- The getUser function is async now, handle accordingly.
+- Some types were added to make testing easier.
+
+### Patch Changes
+
+- Updated dependencies [2300f2d]
+  - @baseapp-frontend/utils@2.0.0
+
 ## 1.2.6
 
 ### Patch Changes

packages/authentication/modules/user/getUser/__tests__/getUser.test.ts

@@ -6,18 +6,18 @@ import getUser from '../index'
 import jwt from './fixtures/jwt.json'
 
 describe('getUser', () => {
-  it('should return the user from the JWT cookie', () => {
+  it('should return the user from the JWT cookie', async () => {
     ;(Cookies.get as CookiesGetByNameFn) = jest.fn(() => jwt.token)
-    const user = getUser()
+    const user = await getUser()
 
     expect(user?.email).toBe('user@company.com')
     expect(user?.firstName).toBe('John')
     expect(user?.lastName).toBe('Doe')
   })
 
-  it('should return null if the JWT cookie is not set', () => {
+  it('should return null if the JWT cookie is not set', async () => {
     ;(Cookies.get as CookiesGetByNameFn) = jest.fn(() => undefined)
-    const user = getUser()
+    const user = await getUser()
 
     expect(user).toBeNull()
   })

packages/authentication/modules/user/getUser/index.ts

@@ -5,10 +5,10 @@ import { IJWTContent } from '@baseapp-frontend/utils/types/jwt'
 import { IUser } from '../../../types/user'
 import { GetUserOptions } from './types'
 
-const getUser = <TUser extends Partial<IUser> & IJWTContent>({
+const getUser = async <TUser extends Partial<IUser> & IJWTContent>({
   cookieName = ACCESS_COOKIE_NAME,
 }: GetUserOptions = {}) => {
-  const token = getToken(cookieName)
+  const token = await getToken(cookieName)
   if (token) {
     try {
       const user = decodeJWT<TUser>(token)

packages/authentication/modules/user/useSimpleTokenUser/__tests__/useSimpleTokenUser.test.tsx

@@ -5,18 +5,38 @@ import {
   renderHook,
   waitFor,
 } from '@baseapp-frontend/test'
-import { axios } from '@baseapp-frontend/utils'
 
+import { UseQueryResult } from '@tanstack/react-query'
 import Cookies from 'js-cookie'
 
 import { IUser } from '../../../../types/user'
-import useSimpleTokenUser from '../index'
+import { IUseSimpleTokenUser } from '../types'
 import request from './fixtures/request.json'
 
-// @ts-ignore TODO: (BA-1081) investigate AxiosRequestHeaders error
-export const axiosMock = new MockAdapter(axios)
+interface IUseSimpleTokenUserResult<IUser> extends Omit<UseQueryResult<IUser, unknown>, 'data'> {
+  user?: IUser
+}
 
 describe('useSimpleTokenUser', () => {
+  let useSimpleTokenUser: <TUser extends Partial<IUser>>(
+    props?: IUseSimpleTokenUser<TUser>,
+  ) => IUseSimpleTokenUserResult<TUser>
+  let defaultTokenType: string | undefined
+  let axios: any
+  let axiosMock: MockAdapter
+
+  beforeAll(async () => {
+    defaultTokenType = process.env.NEXT_PUBLIC_TOKEN_TYPE
+    process.env.NEXT_PUBLIC_TOKEN_TYPE = 'simple'
+    axios = (await import('@baseapp-frontend/utils')).axios
+    axiosMock = new MockAdapter(axios)
+    useSimpleTokenUser = (await import('../index')).default as any
+  })
+
+  afterAll(() => {
+    process.env.NEXT_PUBLIC_TOKEN_TYPE = defaultTokenType
+  })
+
   test('should user be present for authenticated', async () => {
     ;(Cookies.get as CookiesGetByNameFn) = jest.fn(() => 'fake token')
 
@@ -80,4 +100,6 @@ describe('useSimpleTokenUser', () => {
     await waitFor(() => expect(Cookies.remove).toHaveBeenCalled())
     expect(result.current.user).not.toBeDefined()
   })
+
+  process.env.NEXT_PUBLIC_TOKEN_TYPE = defaultTokenType
 })

packages/authentication/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/authentication",
   "description": "Authentication modules.",
-  "version": "1.2.6",
+  "version": "2.0.0",
   "main": "./dist/index.ts",
   "module": "./dist/index.mjs",
   "scripts": {

packages/utils/CHANGELOG.md

@@ -1,12 +1,20 @@
 # @baseapp-frontend/utils
 
+## 2.0.0
+
+### Major Changes
+
+- The axios instance will try to refresh the access token on the request interceptor if the JWT token flow is used, enabling the flow to be used with file uploads.
+- The getToken function is async now, handle accordingly.
+- The refreshAccessToken function was moved to its own file and it won't try to make the request again on a 401 error.
+- Some 'use client' directives were added to allow imports on server-side components.
+
 ## 1.4.4
 
 ### Patch Changes
 
 - Make `OptionalActions` types inside `withController` more flexible.
 
-
 ## 1.4.3
 
 ### Patch Changes

packages/utils/functions/axios/createAxiosInstance/__tests__/createAxiosInstance.test.ts

@@ -17,6 +17,12 @@ jest.mock('js-cookie', () => ({
   ...jest.requireActual('js-cookie'),
   get: () => 'someAuthToken',
 }))
+jest.mock('../../../token/decodeJWT', () => ({
+  decodeJWT: () => ({ exp: 1234567890 }),
+}))
+jest.mock('../../../token/isUserTokenValid', () => ({
+  isUserTokenValid: () => true,
+}))
 
 describe('createAxiosInstance', () => {
   afterEach(() => {

packages/utils/functions/axios/createAxiosInstance/__tests__/refreshAccessToken.test.ts

@@ -4,15 +4,21 @@ import Cookies from 'js-cookie'
 
 import { ACCESS_COOKIE_NAME, REFRESH_COOKIE_NAME } from '../../../../constants/cookie'
 import { CookieType } from '../../../../types/cookie'
+import { simpleAxios as refreshTokenAxios } from '../../../token'
+import { isUserTokenValid } from '../../../token/isUserTokenValid'
 import { axios } from '../index'
 
 jest.mock('js-cookie')
+jest.mock('../../../token/decodeJWT')
+jest.mock('../../../token/isUserTokenValid')
 
 describe('refreshAccessToken', () => {
   // @ts-ignore TODO: (BA-1081) investigate AxiosRequestHeaders error
   const axiosMock = new MockAdapter(axios)
+  // @ts-ignore TODO: (BA-1081) investigate AxiosRequestHeaders error
+  const refreshTokenAxiosMock = new MockAdapter(refreshTokenAxios)
 
-  it('should refresh the token if token type is jwt and endpoint returns 401 error ', async () => {
+  it('should refresh the token if token type is jwt and the token is expired ', async () => {
     const cookiesFakeStore = {
       [ACCESS_COOKIE_NAME]: 'accessToken',
       [REFRESH_COOKIE_NAME]: 'refreshToken',
@@ -26,27 +32,25 @@ describe('refreshAccessToken', () => {
     ;(Cookies.get as jest.Mock).mockImplementation(
       (cookieName: CookieType) => cookiesFakeStore[cookieName],
     )
+    ;(isUserTokenValid as jest.Mock).mockImplementation(() => false)
 
-    let timesCalled = 0
-    axiosMock.onPost('/test-endpoint').reply(() => {
-      timesCalled += 1
-      if (timesCalled === 1) {
-        return [401, {}]
-      }
-      return [200, {}]
-    })
-    axiosMock
+    axiosMock.onPost('/test-endpoint').reply(200, {})
+    refreshTokenAxiosMock
       .onPost('/auth/refresh')
       .reply(200, { access: 'newAccessToken', refresh: 'newRefreshToken' })
 
     await axios.post('/test-endpoint')
 
-    expect(timesCalled).toBe(2)
+    expect(axiosMock.history.post.length).toBe(1)
+    expect(refreshTokenAxiosMock.history.post.length).toBe(1)
     expect(Cookies.set).toBeCalledTimes(1)
     expect(cookiesFakeStore[ACCESS_COOKIE_NAME]).toBe('newAccessToken')
   })
 
   it('should remove the token cookies if the refresh endpoint fails', async () => {
+    axiosMock.resetHistory()
+    refreshTokenAxiosMock.resetHistory()
+
     const cookiesFakeStore = {
       [ACCESS_COOKIE_NAME]: 'accessToken',
       [REFRESH_COOKIE_NAME]: 'refreshToken',
@@ -59,10 +63,11 @@ describe('refreshAccessToken', () => {
     })
 
     axiosMock.onPost('/test-endpoint').reply(401, {})
-    axiosMock.onPost('/auth/refresh').reply(401, {})
+    refreshTokenAxiosMock.onPost('/auth/refresh').reply(401, {})
 
     await expect(axios.post('/test-endpoint')).rejects.toThrow()
 
+    expect(refreshTokenAxiosMock.history.post.length).toBe(1)
     expect(Cookies.remove).toBeCalledTimes(2)
     expect(cookiesFakeStore[ACCESS_COOKIE_NAME]).toBeUndefined()
     expect(cookiesFakeStore[REFRESH_COOKIE_NAME]).toBeUndefined()

packages/utils/functions/axios/createAxiosInstance/index.ts

@@ -1,16 +1,15 @@
-import _axios, { AxiosRequestConfig } from 'axios'
+import _axios from 'axios'
 import humps from 'humps'
 import Cookies from 'js-cookie'
 
 import { SERVICES_WITHOUT_TOKEN } from '../../../constants/axios'
 import { ACCESS_COOKIE_NAME, REFRESH_COOKIE_NAME } from '../../../constants/cookie'
 import { LOGOUT_EVENT } from '../../../constants/events'
 import { TokenTypes } from '../../../constants/token'
-import { IJWTResponse } from '../../../types/jwt'
 import { eventEmitter } from '../../events'
 import { buildQueryString } from '../../string'
-
-const REFRESH_TOKEN_URL = '/auth/refresh'
+import { decodeJWT, isUserTokenValid } from '../../token'
+import { refreshAccessToken } from '../../token/refreshAccessToken'
 
 export const createAxiosInstance = ({
   returnData = true,
@@ -35,9 +34,22 @@ export const createAxiosInstance = ({
   instance.defaults.headers.put['Content-Type'] = contentType
 
   const requestInterceptorId = instance.interceptors.request.use(async (request) => {
-    const authToken = Cookies.get(cookieName)
+    let authToken = Cookies.get(cookieName)
 
     if (authToken) {
+      const isTokenValid =
+        tokenType === TokenTypes.jwt ? isUserTokenValid(decodeJWT(authToken)) : true
+      if (!isTokenValid) {
+        try {
+          authToken = await refreshAccessToken(cookieName, refreshCookieName)
+        } catch (error) {
+          if (eventEmitter.listenerCount(LOGOUT_EVENT)) {
+            eventEmitter.emit(LOGOUT_EVENT)
+          }
+          return Promise.reject(error)
+        }
+      }
+
       if (
         request.headers &&
         !request.headers.Authorization &&
@@ -67,22 +79,6 @@ export const createAxiosInstance = ({
       return returnData && response.data ? response.data : response
     },
     async (error) => {
-      if (
-        tokenType === TokenTypes.jwt &&
-        error.response?.status === 401 &&
-        error.config.url !== REFRESH_TOKEN_URL
-      ) {
-        try {
-          const originalRequest = error.config
-          // eslint-disable-next-line @typescript-eslint/no-use-before-define
-          return await refreshAccessToken(cookieName, refreshCookieName, originalRequest)
-        } catch (refreshError) {
-          if (eventEmitter.listenerCount(LOGOUT_EVENT)) {
-            eventEmitter.emit(LOGOUT_EVENT)
-          }
-        }
-      }
-
       if (error.response.data && error.response.headers?.['content-type'] === 'application/json') {
         const newError = { response: { data: {} } }
         newError.response.data = humps.camelizeKeys(error.response.data)
@@ -102,38 +98,3 @@ export const {
   requestInterceptorId: requestInterceptorIdForFiles,
   responseInterceptorId: responseInterceptorIdForFiles,
 } = createAxiosInstance({ file: true })
-
-// TODO: move this function to a separate file (we can't do it now because of a circular dependency)
-export const refreshAccessToken = async (
-  cookieName: string,
-  refreshCookieName: string,
-  originalRequest: AxiosRequestConfig,
-) => {
-  const refreshToken = Cookies.get(refreshCookieName)
-
-  if (!refreshToken) {
-    return Promise.reject(new Error('No refresh token'))
-  }
-
-  try {
-    const response = (await axios.post(REFRESH_TOKEN_URL, {
-      refresh: refreshToken,
-    })) as IJWTResponse
-
-    Cookies.set(cookieName, response.access, {
-      secure: process.env.NODE_ENV === 'production',
-    })
-
-    if (originalRequest.headers) {
-      // eslint-disable-next-line no-param-reassign
-      originalRequest.headers.Authorization = `Bearer ${response.access}`
-    }
-
-    return await axios(originalRequest)
-  } catch (error) {
-    Cookies.remove(cookieName)
-    Cookies.remove(refreshCookieName)
-
-    return Promise.reject(error)
-  }
-}

packages/utils/functions/form/withController/index.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { ChangeEventHandler, FC, FocusEventHandler } from 'react'
 
 import { Controller } from 'react-hook-form'

packages/utils/functions/token/decodeJWT/index.ts

@@ -1,5 +1,11 @@
 import humps from 'humps'
 import jwt_decode from 'jwt-decode'
 
-export const decodeJWT = <JWTContentType>(token: string) =>
-  humps.camelizeKeys(jwt_decode(token)) as JWTContentType
+export const decodeJWT = <JWTContentType>(token: string) => {
+  try {
+    return humps.camelizeKeys(jwt_decode(token)) as JWTContentType
+  } catch (error) {
+    // If the token has an invalid format, jwt_decode throws an error
+    return null
+  }
+}

packages/utils/functions/token/getToken/__tests__/getClientSideToken.test.ts

@@ -20,10 +20,10 @@ describe('getToken function on the client', () => {
     jest.clearAllMocks()
   })
 
-  it('retrieves a client-side cookie', () => {
+  it('retrieves a client-side cookie', async () => {
     ;(ClientCookies.get as CookiesGetByNameFn) = jest.fn(() => clientCookieValue)
 
-    expect(getToken(cookieName)).toBe(clientCookieValue)
+    expect(await getToken(cookieName)).toBe(clientCookieValue)
     expect(ClientCookies.get).toHaveBeenCalledWith(cookieName)
   })
 })

packages/utils/functions/token/getToken/__tests__/getServerSideToken.test.ts

@@ -23,9 +23,9 @@ describe('getToken function on the server', () => {
     jest.clearAllMocks()
   })
 
-  it('retrieves a server-side cookie', () => {
+  it('retrieves a server-side cookie', async () => {
     ;(ClientCookies.get as CookiesGetByNameFn) = jest.fn(() => clientCookieValue)
 
-    expect(getToken(cookieName)).toBe(serverCookieValue)
+    expect(await getToken(cookieName)).toBe(serverCookieValue)
   })
 })

packages/utils/functions/token/getToken/index.ts

@@ -1,10 +1,10 @@
 import ClientCookies from 'js-cookie'
-import { cookies as serverCookies } from 'next/headers'
 
 import { ACCESS_COOKIE_NAME } from '../../../constants/cookie'
 
-export const getToken = (cookieName = ACCESS_COOKIE_NAME) => {
+export const getToken = async (cookieName = ACCESS_COOKIE_NAME) => {
   if (typeof window === typeof undefined) {
+    const { cookies: serverCookies } = await import('next/headers')
     return serverCookies().get(cookieName)?.value
   }
   return ClientCookies.get(cookieName)

packages/utils/functions/token/index.ts

@@ -1,3 +1,4 @@
 export * from './decodeJWT'
 export * from './getToken'
 export * from './isUserTokenValid'
+export * from './refreshAccessToken'