implements JWT token refresh in the frontend

removes comments

Author: tiagoapolo

api/app/settings/common.py

@@ -822,7 +822,7 @@
 }
 SIMPLE_JWT = {
     "AUTH_TOKEN_CLASSES": ["rest_framework_simplejwt.tokens.AccessToken"],
-    "ACCESS_TOKEN_LIFETIME": timedelta(minutes=60),  # Shorter lifetime
+    "ACCESS_TOKEN_LIFETIME": timedelta(hours=1),
     "REFRESH_TOKEN_LIFETIME": timedelta(days=1),
     "SIGNING_KEY": env.str("COOKIE_AUTH_JWT_SIGNING_KEY", default=SECRET_KEY),
 }

api/custom_auth/jwt_cookie/authentication.py

@@ -7,7 +7,7 @@
 )
 from rest_framework_simplejwt.tokens import Token
 
-from custom_auth.jwt_cookie.constants import ACCESS_TOKEN_COOKIE_KEY, REFRESH_TOKEN_COOKIE_KEY
+from custom_auth.jwt_cookie.constants import ACCESS_TOKEN_COOKIE_KEY
 from users.models import FFAdminUser
 
 
@@ -17,19 +17,11 @@ def authenticate_header(self, request: Request) -> str:
 
     def authenticate(self, request: Request) -> tuple[FFAdminUser, Token] | None:
         raw_access_token = request.COOKIES.get(ACCESS_TOKEN_COOKIE_KEY)
-        raw_refresh_token = request.COOKIES.get(REFRESH_TOKEN_COOKIE_KEY)
 
         if raw_access_token:
             try:
-                validated_access_token = self.get_validated_token(raw_access_token)  # type: ignore[arg-type]
-                return self.get_user(validated_access_token), validated_access_token  # type: ignore[return-value]
-            except (InvalidToken, TokenError, AuthenticationFailed):
-                pass
-
-        if raw_refresh_token:
-            try:
-                validated_refresh_token = self.get_validated_token(raw_refresh_token)  # type: ignore[arg-type]
-                return self.get_user(validated_refresh_token), validated_refresh_token  # type: ignore[return-value]
+                validated_access_token = self.get_validated_token(raw_access_token)
+                return self.get_user(validated_access_token), validated_access_token
             except (InvalidToken, TokenError, AuthenticationFailed):
                 pass
 

api/custom_auth/jwt_cookie/views.py

@@ -1,18 +1,56 @@
 from djoser.views import TokenDestroyView  # type: ignore[import-untyped]
 from rest_framework.request import Request
 from rest_framework.response import Response
+
+
 from rest_framework_simplejwt.tokens import RefreshToken
+from rest_framework_simplejwt.views import TokenRefreshView
+from rest_framework_simplejwt.exceptions import InvalidToken, TokenError
+from rest_framework_simplejwt.serializers import TokenRefreshSerializer
+from django.conf import settings
+
+from custom_auth.jwt_cookie.constants import (
+    REFRESH_TOKEN_COOKIE_KEY,
+    ACCESS_TOKEN_COOKIE_KEY,
+)
 
-from custom_auth.jwt_cookie.constants import REFRESH_TOKEN_COOKIE_KEY
 class JWTTokenLogoutView(TokenDestroyView):  # type: ignore[misc]
     def post(self, request: Request) -> Response:
         response = super().post(request)
 
         raw_refresh_token = request.COOKIES.get(REFRESH_TOKEN_COOKIE_KEY)
         if raw_refresh_token:
-            refresh_token = RefreshToken(raw_refresh_token)  # type: ignore[union-attr]
+            refresh_token = RefreshToken(raw_refresh_token)
             refresh_token.blacklist()
 
-        response.delete_cookie('access_token')
-        response.delete_cookie('refresh_token')
-        return response # type: ignore[no-any-return]
+        response.delete_cookie(ACCESS_TOKEN_COOKIE_KEY)
+        response.delete_cookie(REFRESH_TOKEN_COOKIE_KEY)
+        return response
+
+
+class JWTCookieTokenRefreshView(TokenRefreshView):
+    def post(self, request: Request, *args, **kwargs) -> Response:
+        raw_refresh_token = request.COOKIES.get(REFRESH_TOKEN_COOKIE_KEY)
+
+        if not raw_refresh_token:
+            raise InvalidToken("No valid refresh token found in cookie")
+
+        serializer = self.get_serializer(data={"refresh": raw_refresh_token})
+        serializer.is_valid(raise_exception=True)
+
+        response = Response(serializer.validated_data)
+
+        print(serializer.validated_data["access"])
+
+        response.set_cookie(
+            ACCESS_TOKEN_COOKIE_KEY,
+            str(serializer.validated_data["access"]),
+            httponly=True,
+            secure=settings.USE_SECURE_COOKIES,
+            samesite=settings.COOKIE_SAME_SITE,
+            max_age=int(
+                settings.SIMPLE_JWT["ACCESS_TOKEN_LIFETIME"].total_seconds()
+            ),
+        )
+
+        return response

api/custom_auth/urls.py

@@ -1,8 +1,8 @@
 from django.urls import include, path
 from rest_framework.routers import DefaultRouter
-from rest_framework_simplejwt.views import TokenRefreshView
 
 from custom_auth.jwt_cookie.views import JWTTokenLogoutView
+from custom_auth.jwt_cookie.views import JWTCookieTokenRefreshView
 from custom_auth.views import (
     CustomAuthTokenLoginOrRequestMFACode,
     CustomAuthTokenLoginWithMFACode,
@@ -34,7 +34,7 @@
     ),
     path(
         "token/refresh/",
-        TokenRefreshView.as_view(),
+        JWTCookieTokenRefreshView.as_view(),
         name='token_refresh',
     ),
     path("", include(ffadmin_user_router.urls)),

api/users/serializers.py

@@ -2,7 +2,7 @@
     UserSerializer as DjoserUserSerializer,
 )
 from rest_framework import serializers
-from rest_framework.exceptions import ValidationError
+from rest_framework.exceptions import ValidationError, NotAuthenticated
 
 from organisations.models import Organisation
 from organisations.serializers import UserOrganisationSerializer
@@ -160,6 +160,11 @@ class Meta(DjoserUserSerializer.Meta):  # type: ignore[misc]
             "date_joined",
             "uuid",
         )
+    def to_representation(self, instance):
+        if not instance.is_authenticated:
+            raise NotAuthenticated("User is not authenticated.")
+
+        return super().to_representation(instance)
 
 
 class ListUsersQuerySerializer(serializers.Serializer):  # type: ignore[type-arg]

frontend/common/data/base/_data.js

@@ -56,7 +56,7 @@ module.exports = {
       document.getElementById('e2e-request').innerText = JSON.stringify(payload)
     }
 
-    return fetch(url, options)
+    return this.fetchWithInterceptor(url, options)
       .then((response) => this.status(response, isExternal))
       .then((response) => {
         // always return json
@@ -73,9 +73,39 @@ module.exports = {
         return response
       })
   },
+
   delete(url, data, headers) {
     return this._request('delete', url, data, headers)
   },
+  fetchWithInterceptor(url, options) {
+    const originalFetch = fetch
+    const isExternal = !url.startsWith(Project.api)
+    const excludedUrls = [
+      `${Project.api}auth/token/refresh/`,
+      `${Project.api}auth/logout/`,
+    ]
+    const isExcluded = excludedUrls.includes(url)
+    const isCookieAuthEnabled = Project.cookieAuthEnabled
+
+    return originalFetch(url, options).then((response) => {
+      if (
+        isCookieAuthEnabled &&
+        response.status === 401 &&
+        !isExternal &&
+        !isExcluded
+      ) {
+        return this.post(`${Project.api}auth/token/refresh/`)
+          .then(() => {
+            return originalFetch(url, options)
+          })
+          .catch((error) => {
+            AppActions.setUser(null)
+            return Promise.reject(error)
+          })
+      }
+      return Promise.resolve(response)
+    })
+  },
 
   get(url, data, headers) {
     return this._request('get', url, data || null, headers)

frontend/common/service.ts

@@ -1,49 +1,93 @@
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/dist/query/react'
+import {
+  BaseQueryApi,
+  createApi,
+  fetchBaseQuery,
+} from '@reduxjs/toolkit/dist/query/react'
 
-import { FetchBaseQueryArgs } from '@reduxjs/toolkit/dist/query/fetchBaseQuery'
+import {
+  FetchArgs,
+  FetchBaseQueryArgs,
+} from '@reduxjs/toolkit/dist/query/fetchBaseQuery'
 import { CreateApiOptions } from '@reduxjs/toolkit/dist/query/createApi'
 import { StoreStateType } from './store'
 
 const Project = require('./project')
 const _data = require('./data/base/_data.js')
 
+const excludedEndpoints = [
+  'register',
+  'createConfirmEmail',
+  'createResetPassword',
+  'createResendConfirmationEmail',
+  'createForgotPassword',
+]
+
+const refreshAccessToken = async () => {
+  try {
+    const response = await fetch(`${Project.api}auth/token/refresh/`, {
+      credentials: 'include',
+      method: 'POST',
+    })
+
+    if (!response.ok) {
+      throw new Error('Failed to refresh token')
+    }
+
+    return
+  } catch (error) {
+    console.error('Token refresh failed', error)
+    throw error
+  }
+}
+
 export const baseApiOptions = (queryArgs?: Partial<FetchBaseQueryArgs>) => {
+  const baseQuery = fetchBaseQuery({
+    baseUrl: Project.api,
+    credentials: Project.cookieAuthEnabled ? 'include' : undefined,
+    prepareHeaders: async (headers, { endpoint, getState }) => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const state = getState() as StoreStateType
+      if (!excludedEndpoints.includes(endpoint)) {
+        try {
+          const token = _data.token
+          if (token && !Project.cookieAuthEnabled) {
+            headers.set('Authorization', `Token ${token}`)
+          }
+        } catch (e) {}
+      }
+
+      return headers
+    },
+    ...queryArgs,
+  })
+
+  const baseQueryWithInterceptor = async (
+    args: string | FetchArgs,
+    api: BaseQueryApi,
+    extraOptions: {},
+  ) => {
+    const result = await baseQuery(args, api, extraOptions)
+    if (
+      Project.cookieAuthEnabled &&
+      result.error &&
+      result.error.status === 401
+    ) {
+      await refreshAccessToken()
+      return baseQuery(args, api, extraOptions)
+    }
+    return result
+  }
+
   const res: Pick<
     CreateApiOptions<any, any, any, any>,
     | 'baseQuery'
     | 'refetchOnReconnect'
     | 'refetchOnFocus'
     | 'extractRehydrationInfo'
   > = {
-    baseQuery: fetchBaseQuery({
-      baseUrl: Project.api,
-      credentials: Project.cookieAuthEnabled ? 'include' : undefined,
-      prepareHeaders: async (headers, { endpoint, getState }) => {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const state = getState() as StoreStateType
-        if (
-          endpoint !== 'register' &&
-          endpoint !== 'createConfirmEmail' &&
-          endpoint !== 'createResetPassword' &&
-          endpoint !== 'createResendConfirmationEmail' &&
-          endpoint !== 'createForgotPassword'
-        ) {
-          try {
-            const token = _data.token
-            if (token && !Project.cookieAuthEnabled) {
-              headers.set('Authorization', `Token ${token}`)
-            }
-          } catch (e) {}
-        }
-
-        return headers
-      },
-      ...queryArgs,
-    }),
-
-    refetchOnFocus: true,
-    refetchOnReconnect: true,
+    baseQuery: baseQueryWithInterceptor,
   }
+
   return res
 }