Migrate off bento-auth-js onto Auth.js (next-auth v5)

package.json

@@ -34,6 +34,7 @@
     "i18next-http-backend": "^4.0.1",
     "leaflet": "^1.9.4",
     "next": "^16.3.1",
+    "next-auth": "^5.0.0-beta.32",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-error-boundary": "^6.1.2",

src/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,3 @@
+import { handlers } from '@/auth';
+
+export const { GET, POST } = handlers;

src/app/api/auth/end-session-url/route.ts

@@ -0,0 +1,11 @@
+import { CLIENT_ID, getEndSessionEndpoint } from '@/auth';
+
+export async function GET() {
+  try {
+    const endSessionEndpoint = await getEndSessionEndpoint();
+    return Response.json({ endSessionEndpoint: endSessionEndpoint ?? null, clientId: CLIENT_ID });
+  } catch (err) {
+    console.error('Error discovering end_session_endpoint', err);
+    return Response.json({ endSessionEndpoint: null, clientId: CLIENT_ID });
+  }
+}

src/app/public/config.js/route.ts

@@ -37,8 +37,7 @@ export function GET() {
     BEACON_NETWORK_ENABLED: parseBoolean(process.env.BENTO_BEACON_NETWORK_ENABLED),
 
     // Authentication
-    CLIENT_ID: process.env.CLIENT_ID || null,
-    OPENID_CONFIG_URL: process.env.OPENID_CONFIG_URL || null,
+    SESSION_REFETCH_INTERVAL_SECONDS: process.env.BENTO_PUBLIC_SESSION_REFETCH_INTERVAL_SECONDS || '120',
   };
 
   return new Response(`BENTO_PUBLIC_CONFIG = ${JSON.stringify(siteConfig, null, 2)};\n`, {

src/js/App.tsx

@@ -6,6 +6,7 @@ import { useEffect } from 'react';
 // Redux and routing imports
 import { Provider } from 'react-redux';
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
+import { SessionProvider } from 'next-auth/react';
 
 // i18n and constants imports
 import { useTranslation } from 'react-i18next';
@@ -19,20 +20,19 @@ import frCA from 'antd/locale/fr_CA';
 import dayjs from 'dayjs';
 import 'dayjs/locale/fr-ca';
 import { ChartConfigProvider } from 'bento-charts';
-import Loader from '@/components/Loader';
 import BentoAppRouter from '@/components/BentoAppRouter';
 import LanguageHandler from '@/components/Util/LanguageHandler';
 import AuthOutlet from '@/components/Util/AuthOutlet';
 import ResponsiveProvider from '@/components/Util/ResponsiveProvider';
 
 // Hooks and utilities imports
-import { BentoAuthContext } from 'bento-auth-js';
 import { NotificationProvider } from '@/hooks/notifications';
 import { useSmallScreen } from '@/hooks/useResponsiveContext';
+import { useHandleRefreshTokenError } from '@/features/auth/hooks';
 
 // Store and configuration imports
 import { store } from './store';
-import { AUTH_CALLBACK_URL, CLIENT_ID, OPENID_CONFIG_URL, PCGL_MODE, PUBLIC_URL_NO_TRAILING_SLASH } from './config';
+import { PCGL_MODE, SESSION_REFETCH_INTERVAL_SECONDS } from './config';
 
 // Styles imports
 import 'antd/dist/reset.css';
@@ -47,7 +47,6 @@ const BaseRoutes = () => {
   return (
     <Routes>
       <Route element={<AuthOutlet />}>
-        <Route path="/callback" element={<Loader fullHeight={true} />} />
         <Route element={<LanguageHandler />}>
           <Route path="/:lang/*" element={<BentoAppRouter />} />
           <Route path="*" element={<Navigate to="/en/" />} />
@@ -63,6 +62,8 @@ const InnerRootApp = () => {
   const antdLocale = i18n.language === SUPPORTED_LNGS.FRENCH ? frCA : enUS;
   const isSmallScreen = useSmallScreen();
 
+  useHandleRefreshTokenError();
+
   // antd's ConfigProvider locale only translates UI text (buttons, placeholders); the DatePicker's
   // month/day names come from dayjs's own locale, which must be set separately or it stays English.
   useEffect(() => {
@@ -93,24 +94,15 @@ const InnerRootApp = () => {
 };
 
 const RootApp = () => (
-  <Provider store={store}>
-    <BrowserRouter>
-      <ResponsiveProvider>
-        <BentoAuthContext
-          value={{
-            applicationUrl: PUBLIC_URL_NO_TRAILING_SLASH,
-            openIdConfigUrl: OPENID_CONFIG_URL,
-            clientId: CLIENT_ID,
-            scope: 'openid email',
-            postSignOutUrl: `${PUBLIC_URL_NO_TRAILING_SLASH}/`,
-            authCallbackUrl: AUTH_CALLBACK_URL,
-          }}
-        >
+  <SessionProvider refetchInterval={SESSION_REFETCH_INTERVAL_SECONDS}>
+    <Provider store={store}>
+      <BrowserRouter>
+        <ResponsiveProvider>
           <InnerRootApp />
-        </BentoAuthContext>
-      </ResponsiveProvider>
-    </BrowserRouter>
-  </Provider>
+        </ResponsiveProvider>
+      </BrowserRouter>
+    </Provider>
+  </SessionProvider>
 );
 
 export default RootApp;