update auth to handle more reliable

Author: felixevers

web/api/auth/authService.ts

@@ -1,69 +1,74 @@
 'use client'
 
 import { getConfig } from '@/utils/config'
-
 import type { User } from 'oidc-client-ts'
-import { UserManager } from 'oidc-client-ts'
+import { UserManager, WebStorageStateStore } from 'oidc-client-ts'
 
 const config = getConfig()
 
-
-const userManager = new UserManager({
+const createUserManager = () => {
+  return new UserManager({
     authority: config.auth.issuer,
     client_id: config.auth.clientId,
     redirect_uri: config.auth.redirect_uri,
     response_type: 'code',
     scope: 'openid profile email',
     post_logout_redirect_uri: config.auth.post_logout_redirect_uri,
-})
+    userStore: typeof window !== 'undefined' ? new WebStorageStateStore({ store: window.localStorage }) : undefined,
+  })
+}
+
+export const userManager = createUserManager()
 
 export const signUp = () => {
-    return userManager.signinRedirect()
+  return userManager.signinRedirect()
 }
 
-export const login = (redirectURI?: string) => {
-    return userManager.signinRedirect({ redirect_uri: redirectURI })
+export const login = async (returnUrl?: string) => {
+  return userManager.signinRedirect({
+    state: { returnUrl: returnUrl || window.location.href }
+  })
 }
 
 export const handleCallback = async () => {
-    return await userManager.signinRedirectCallback()
+  return await userManager.signinRedirectCallback()
 }
 
 export const logout = () => {
-    return userManager.signoutRedirect()
+  return userManager.signoutRedirect()
 }
 
 export const getUser = async (): Promise<User | null> => {
-    return await userManager.getUser()
+  return await userManager.getUser()
 }
 
 export const renewToken = async () => {
-    return await userManager.signinSilent()
+  return await userManager.signinSilent()
 }
 
 export const removeUser = async () => {
-    return await userManager.removeUser()
+  return await userManager.removeUser()
 }
 
 export const restoreSession = async (): Promise<User | undefined> => {
-    if (typeof window === 'undefined') return
+  if (typeof window === 'undefined') return
+  try {
     const user = await userManager.getUser()
-    if (!user) return
+    if (!user) return undefined
 
     if (user.expired) {
-        try {
-            console.debug('Access token expired, refreshing...')
-            const refreshedUser = await renewToken()
-            return refreshedUser ?? undefined
-        } catch (error) {
-            console.debug('Silent token renewal failed', error)
-            return
-        }
+      console.debug('Access token expired, refreshing...')
+      const refreshedUser = await renewToken()
+      return refreshedUser ?? undefined
     }
 
     return user
+  } catch (error) {
+    console.warn('Session restoration failed:', error)
+    return undefined
+  }
 }
 
 export const onTokenExpiringCallback = (callback: () => void) => {
-    userManager.events.addAccessTokenExpiring(callback)
+  userManager.events.addAccessTokenExpiring(callback)
 }

web/hooks/useAuth.tsx

@@ -1,15 +1,11 @@
 'use client'
 
 import type { ComponentType, PropsWithChildren } from 'react'
-import { useEffect } from 'react'
-import { createContext, useContext, useState } from 'react'
+import { useEffect, createContext, useContext, useState } from 'react'
 import { LoadingAnimation } from '@helpwave/hightide'
-import { LoginPage } from '@/components/pages/login'
 import { login, logout, onTokenExpiringCallback, removeUser, renewToken, restoreSession } from '@/api/auth/authService'
 import type { User } from 'oidc-client-ts'
-import { getConfig } from '@/utils/config'
-
-const config = getConfig()
+import { usePathname } from 'next/navigation'
 
 type AuthContextType = {
   identity: User,
@@ -23,54 +19,64 @@ type AuthState = {
   isLoading: boolean,
 }
 
-
-// TODO add option for unprotected routes
 export const AuthProvider = ({ children }: PropsWithChildren) => {
-  const [{ isLoading, identity }, setAuthState] = useState<AuthState>({ isLoading: true })
+  const [authState, setAuthState] = useState<AuthState>({ isLoading: true })
+  const pathname = usePathname()
 
   useEffect(() => {
-    restoreSession().then(identity => {
-      if (identity) {
-        setAuthState({
-          identity,
-          isLoading: false,
-        })
-        onTokenExpiringCallback(async () => {
-          console.debug('Token expiring, refreshing...')
-          const identity = await renewToken()
-          setAuthState({
-            identity: identity ?? undefined,
-            isLoading: false,
-          })
-        })
-      } else {
-        login(config.auth.redirect_uri + `?redirect_uri=${encodeURIComponent(window.location.href)}`).catch(console.error)
+    if (pathname === '/auth/callback') {
+      setAuthState({ isLoading: false, identity: undefined })
+      return
+    }
+
+    let isMounted = true
+
+    const initAuth = async () => {
+      try {
+        const identity = await restoreSession()
+
+        if (isMounted) {
+          if (identity) {
+            setAuthState({ identity, isLoading: false })
+
+            onTokenExpiringCallback(async () => {
+              const refreshedIdentity = await renewToken()
+              setAuthState({
+                identity: refreshedIdentity ?? undefined,
+                isLoading: false,
+              })
+            })
+          } else {
+            await login()
+          }
+        }
+      } catch {
+        if (isMounted) {
+          await removeUser()
+          await login()
+        }
       }
-    }).catch(async () => {
-      await removeUser()
-      await login(config.auth.redirect_uri + `?redirect_uri=${encodeURIComponent(window.location.href)}`)
-    })
-  }, [])
+    }
 
-  if (!identity && isLoading) {
-    return (
-      <div className="flex-col-0 items-center justify-center w-screen h-screen">
-        <LoadingAnimation loadingText="Logging in..." />
-      </div>
-    )
+    initAuth()
+
+    return () => { isMounted = false }
+  }, [pathname])
+
+  if (pathname === '/auth/callback') {
+    return <>{children}</>
   }
 
-  if (!identity) {
+  if (authState.isLoading || !authState.identity) {
     return (
-      <LoginPage login={async () => {
-        await login(config.auth.redirect_uri + `?redirect_uri=${encodeURIComponent(window.location.href)}`)
-        return true
-      }} />
+      <div className="flex flex-col items-center justify-center w-screen h-screen">
+        <LoadingAnimation loadingText="Redirecting to login..." />
+      </div>
     )
   }
 
   return (
-    <AuthContext.Provider value={{ identity, logout }}>
+    <AuthContext.Provider value={{ identity: authState.identity, logout }}>
       {children}
     </AuthContext.Provider>
   )
@@ -87,7 +93,6 @@ export const withAuth = <P extends object>(Component: ComponentType<P>) => {
   return WrappedComponent
 }
 
-
 export const useAuth = () => {
   const context = useContext(AuthContext)
   if (!context) {

web/i18n/translations.ts

@@ -1,7 +1,7 @@
 // AUTO-GENERATED. DO NOT EDIT.
 /* eslint-disable @stylistic/quote-props */
-/* eslint-disable no-useless-escape */
-/* eslint-disable @typescript-eslint/no-unused-vars */
+
+
 import type { Translation } from '@helpwave/internationalization'
 import { TranslationGen } from '@helpwave/internationalization'
 

web/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./build/dev/types/routes.d.ts";
+import './build/dev/types/routes.d.ts'
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.