fix(JAQPOT-214): session-checker and refresh-token (#41)

* fix(JAQPOT-214/): session-checker and refresh-token

* fix: do not risk the refresh token impl and add todo

package.json

@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.1.3",
-    "@nextui-org/react": "^2.4.2",
+    "@nextui-org/react": "^2.4.6",
     "date-fns": "^3.6.0",
     "framer-motion": "^11.2.10",
     "jwt-decode": "^4.0.0",

src/app/SessionChecker.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { useEffect } from 'react';
+import { signOut } from 'next-auth/react';
+
+export default function SessionChecker() {
+  useEffect(() => {
+    fetch(`/api/auth/validate`)
+      .then(async (res) => {
+        if (!res.ok && res.status === 401) {
+          await signOut({ redirect: false });
+        }
+      })
+      .catch(() => signOut({ redirect: false }));
+  });
+
+  return null;
+}

src/app/api/auth/validate/route.ts

@@ -0,0 +1,29 @@
+import { NextRequest, NextResponse } from 'next/server';
+import {
+  ApiResponse,
+  errorResponse,
+  handleApiResponse,
+} from '@/app/util/response';
+import { auth } from '@/auth';
+import { isAuthenticated } from '@/app/util/auth';
+import { generatePaginationAndSortingSearchParams } from '@/app/util/sort';
+
+export async function GET(
+  request: NextRequest,
+): Promise<NextResponse<ApiResponse>> {
+  const session = await auth();
+  if (!isAuthenticated(session)) {
+    return errorResponse(
+      'You need to be authenticated to access this endpoint',
+      401,
+    );
+  }
+  const res = await fetch(`${process.env.API_URL}/v1/auth/validate`, {
+    headers: {
+      Authorization: `Bearer ${session!.token}`,
+      'Content-Type': 'application/json',
+    },
+  });
+
+  return handleApiResponse(res);
+}

src/app/dashboard/models/[modelId]/[tabName]/page.tsx

@@ -12,7 +12,7 @@ import { isAuthenticated } from '@/app/util/auth';
 import ModelBreadcrumbs from '@/app/dashboard/models/[modelId]/components/ModelBreadcrumbs';
 import { Metadata } from 'next';
 import { generateSharedMetadata } from '@/app/shared.metadata';
-import JaqpotTimeAgo from '@/app/dashboard/models/[modelId]/components/TimeAgo';
+import JaqpotTimeAgo from '@/app/dashboard/models/[modelId]/components/JaqpotTimeAgo';
 import { getErrorMessageFromResponse } from '@/app/util/response';
 import { Link } from '@nextui-org/link';
 import React from 'react';

src/app/dashboard/models/[modelId]/components/TimeAgo.tsx → src/app/dashboard/models/[modelId]/components/JaqpotTimeAgo.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import { formatDistance } from 'date-fns';
 import { getUserFriendlyDate } from '@/app/util/date';
 
 export default function JaqpotTimeAgo({ date }: { date: Date }) {
-  return <div>{getUserFriendlyDate(date)}</div>;
+  return <div title={date.toLocaleString()}>{getUserFriendlyDate(date)}</div>;
 }

src/app/dashboard/models/components/ModelsTable.tsx

@@ -19,7 +19,7 @@ import { CustomError } from '@/app/types/CustomError';
 import { ApiResponse } from '@/app/util/response';
 import { SortDescriptor } from '@react-types/shared/src/collections';
 import { convertSortDirection, SORT_DELIMITER } from '@/app/util/sort';
-import JaqpotTimeAgo from '@/app/dashboard/models/[modelId]/components/TimeAgo';
+import JaqpotTimeAgo from '@/app/dashboard/models/[modelId]/components/JaqpotTimeAgo';
 
 const fetcher: Fetcher<ApiResponse<ModelsResponseDto>, string> = async (
   url,

src/app/dashboard/results/components/ResultsTable.tsx

@@ -18,7 +18,7 @@ import SWRClientFetchError from '@/app/components/SWRClientFetchError';
 import { CustomError } from '@/app/types/CustomError';
 import { ApiResponse } from '@/app/util/response';
 import { Link } from '@nextui-org/link';
-import JaqpotTimeAgo from '@/app/dashboard/models/[modelId]/components/TimeAgo';
+import JaqpotTimeAgo from '@/app/dashboard/models/[modelId]/components/JaqpotTimeAgo';
 import { getDatasetStatusNode } from '@/app/util/dataset';
 import { SortDescriptor } from '@react-types/shared/src/collections';
 import { convertSortDirection, SORT_DELIMITER } from '@/app/util/sort';

src/app/providers.tsx

@@ -3,13 +3,15 @@
 import { NextUIProvider } from '@nextui-org/react';
 import { useRouter } from 'next/navigation';
 import { Toaster } from 'react-hot-toast';
+import SessionChecker from '@/app/SessionChecker';
 
 export function Providers({ children }: { children: React.ReactNode }) {
   const router = useRouter();
 
   return (
     <>
       <NextUIProvider navigate={router.push}>
+        <SessionChecker />
         <div>
           <Toaster toastOptions={{ duration: 7500 }} />
         </div>

src/app/util/response.ts

@@ -55,12 +55,6 @@ function getMessageFromStatusCode(statusCode: number) {
   }
 }
 
-async function signoutUserIf401(status: number, code: any) {
-  if (status === 401 && code !== EMAIL_NOT_VERIFIED) {
-    await signOut();
-  }
-}
-
 async function parseResponse(res: Response) {
   const contentType = res.headers.get('Content-Type') || '';
   let data;
@@ -78,7 +72,6 @@ export async function handleApiResponse(
   const data = await parseResponse(res);
 
   if (!res.ok) {
-    await signoutUserIf401(res.status, data?.code);
     const message = data?.message ?? getMessageFromStatusCode(res.status);
     return errorResponse(message, res.status);
   }

src/auth.ts

@@ -26,12 +26,28 @@ export const { auth, handlers, signIn, signOut } = NextAuth({
   providers: [Keycloak],
   callbacks: {
     jwt: async ({ token, user, account }) => {
+      // Initial sign in
       if (account && account.access_token) {
-        // set access_token to the token payload
         token.accessToken = account.access_token;
+        token.refreshToken = account.refresh_token;
+        if (account.expires_at) {
+          token.accessTokenExpires = account.expires_at * 1000;
+        }
       }
 
       return token;
+
+      // TODO check if refresh token works
+      // // Return previous token if the access token has not expired yet
+      // if (
+      //   !token.accessTokenExpires ||
+      //   Date.now() < (token.accessTokenExpires as number)
+      // ) {
+      //   return token;
+      // }
+      //
+      // // Access token has expired, try to update it
+      // return refreshAccessToken(token);
     },
     session: async ({ session, token, user }) => {
       // Next Auth shenanigans :(
@@ -52,3 +68,37 @@ export const { auth, handlers, signIn, signOut } = NextAuth({
     },
   },
 });
+
+async function refreshAccessToken(token: any) {
+  try {
+    const url = `${process.env.AUTH_KEYCLOAK_ISSUER}/protocol/openid-connect/token`;
+    const response = await fetch(url, {
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      method: 'POST',
+      body: new URLSearchParams({
+        client_id: process.env.AUTH_KEYCLOAK_ID!,
+        client_secret: process.env.AUTH_KEYCLOAK_SECRET!,
+        grant_type: 'refresh_token',
+        refresh_token: token.refreshToken,
+      }),
+    });
+
+    const refreshedTokens = await response.json();
+
+    if (!response.ok) {
+      throw refreshedTokens;
+    }
+
+    return {
+      ...token,
+      accessToken: refreshedTokens.access_token,
+      accessTokenExpires: Date.now() + refreshedTokens.expires_in * 1000,
+      refreshToken: refreshedTokens.refresh_token ?? token.refreshToken, // Fall back to old refresh token
+    };
+  } catch (error) {
+    return {
+      ...token,
+      error: 'RefreshAccessTokenError',
+    };
+  }
+}