fix: Refactor auth payloads and renew token once per request

Author: williammck

src/middleware.ts

@@ -1,5 +1,6 @@
 import { withAuth } from 'next-auth/middleware';
 import { type JWT } from 'next-auth/jwt';
+import { parseJwt } from '@/utils/jwt';
 
 const isAdmin = (token: JWT | null) => token?.user.permissions.is_admin ?? false;
 const isStaff = (token: JWT | null) => token?.user.permissions.is_staff ?? false;
@@ -41,7 +42,7 @@ export default withAuth({
             const now = Date.now() / 1000;
 
             // Check if refresh token is still valid
-            if (token && now > token.account.refresh_token_exp) {
+            if (token && now > parseJwt(token.refreshToken).exp) {
                 return false;
             }
 

src/types/next-auth.d.ts

@@ -1,5 +1,4 @@
-/* eslint-disable */
-import { type Account } from 'next-auth';
+import 'next-auth';
 
 type UserId = {
     first_name: string;
@@ -21,28 +20,18 @@ declare module 'next-auth' {
 
     interface Profile extends UserId { }
 
-    interface Account {
-        provider: 'vatsim';
-        type: 'oauth';
-        providerAccountId: string;
-        access_token: string;
-        access_token_exp: number;
-        refresh_token: string;
-        refresh_token_exp: number;
-    }
-
     interface Session {
         user: Profile;
-        access_token: string;
-        refresh_token: string;
+        accessToken: string;
     }
 }
 
-declare module "next-auth/jwt" {
+declare module 'next-auth/jwt' {
     interface User extends UserId { }
 
     interface JWT {
         user: User;
-        account: Account;
+        accessToken: string;
+        refreshToken: string;
     }
 }

src/utils/auth.ts

@@ -1,4 +1,5 @@
 import type { AuthOptions } from 'next-auth';
+import { parseJwt } from '@/utils/jwt';
 import type { UserId } from '@/types/next-auth';
 
 type RefreshedTokens = {
@@ -7,19 +8,7 @@ type RefreshedTokens = {
     profile: UserId;
 }
 
-type JWTPayload = {
-    token_type: 'access' | 'refresh';
-    exp: number;
-    iat: number;
-    jti: string;
-    user_id: number;
-}
-
-function parseJwt(token: string): JWTPayload {
-    const base64Url = token.split('.')[1];
-    const base64 = base64Url.replace('-', '+').replace('_', '/');
-    return JSON.parse(atob(base64));
-}
+const refreshTokenPromiseCache: { [key: string]: Promise<Response> } = {};
 
 export const authOptions: AuthOptions = {
     session: {
@@ -34,7 +23,7 @@ export const authOptions: AuthOptions = {
                 return {
                     ...session,
                     user: token.user,
-                    access_token: token.account.access_token,
+                    accessToken: token.accessToken,
                 };
             }
             return session;
@@ -47,39 +36,35 @@ export const authOptions: AuthOptions = {
 
                 return {
                     user: user as UserId,
-                    account: {
-                        ...account,
-                        access_token_exp: parseJwt(account.access_token).exp,
-                        refresh_token_exp: parseJwt(account.refresh_token).exp,
-                    },
+                    accessToken: account.access_token!,
+                    refreshToken: account.refresh_token!,
                 };
             }
 
             // Access token is expired :(
-            if (Date.now() / 1000 > token.account.access_token_exp) {
-                const body = JSON.stringify({ refresh: token.account.refresh_token });
+            if (Date.now() / 1000 > parseJwt(token.accessToken).exp) {
+                const body = JSON.stringify({ refresh: token.refreshToken });
+
+                const tokenId = parseJwt(token.refreshToken).jti;
 
                 // Obtain new token pair and new profile data
-                const { access, refresh, profile } = await fetch(
-                    `${process.env.NEXT_PUBLIC_API_URL}/auth/token/refresh/`,
-                    {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body,
-                    },
-                )
-                    .then<RefreshedTokens>((resp) => resp.json());
+                if (!refreshTokenPromiseCache[tokenId]) {
+                    refreshTokenPromiseCache[tokenId] = fetch(
+                        `${process.env.NEXT_PUBLIC_API_URL}/auth/token/refresh/`,
+                        {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body,
+                        },
+                    );
+                }
+                const resp = await refreshTokenPromiseCache[tokenId];
+                const { access, refresh, profile } = await resp.json() as RefreshedTokens;
 
                 return {
-                    ...token,
                     user: profile,
-                    account: {
-                        ...token.account,
-                        access_token: access,
-                        access_token_exp: parseJwt(access).exp,
-                        refresh_token: refresh,
-                        refresh_token_exp: parseJwt(refresh).exp,
-                    },
+                    accessToken: access,
+                    refreshToken: refresh,
                 };
             }
 

src/utils/fetch.ts

@@ -32,7 +32,7 @@ export async function fetchApi<T extends Record<string, unknown> | unknown[]>(ro
     }
 
     if (session) {
-        headers.append('Authorization', `Bearer ${session.access_token}`);
+        headers.append('Authorization', `Bearer ${session.accessToken}`);
     }
 
     return fetch(`${process.env.NEXT_PUBLIC_API_URL}/api${route}`, { ...config, headers })

src/utils/jwt.ts

@@ -0,0 +1,14 @@
+type JWTPayload = {
+    token_type: 'access' | 'refresh';
+    exp: number;
+    iat: number;
+    jti: string;
+    user_id: number;
+}
+
+export function parseJwt(token: string): JWTPayload {
+    const payload = token.split('.')[1];
+    const text = Buffer.from(payload, 'base64').toString();
+
+    return JSON.parse(text);
+}