@orsetra/shared-auth 1.0.12 → 1.1.2

package/ZitadelProvider.tsx

@@ -4,6 +4,7 @@ import { createContext, useContext, useEffect, useState, ReactNode } from "react
 import { useRouter } from "next/navigation"
 import { ZitadelAuthService, ZitadelConfig } from "./services/zitadel.auth.service"
 import { AuthCard, AuthCardTitle, AuthCardDescription, AuthCardSpinner } from "./components/AuthCard"
+import { SessionExpiredModal } from "./components/SessionExpiredModal"
 import type { User } from "oidc-client-ts"
 
 interface ZitadelContextType {
@@ -23,13 +24,16 @@ const ZitadelContext = createContext<ZitadelContextType | undefined>(undefined)
 interface ZitadelProviderProps {
   children: ReactNode
   config: ZitadelConfig
+  /** Render the action button shown inside the session-expired modal. Receives the sign-in handler. */
+  renderSessionExpiredAction?: (onReauthenticate: () => void) => ReactNode
 }
 
-export function ZitadelProvider({ children, config }: ZitadelProviderProps) {
+export function ZitadelProvider({ children, config, renderSessionExpiredAction }: ZitadelProviderProps) {
   const router = useRouter()
   const [isConfigured, setIsConfigured] = useState(false)
   const [isLoading, setIsLoading] = useState(true)
   const [user, setUser] = useState<User | null>(null)
+  const [sessionExpired, setSessionExpired] = useState(false)
 
   useEffect(() => {
     // Skip on server-side
@@ -38,8 +42,9 @@ export function ZitadelProvider({ children, config }: ZitadelProviderProps) {
     const configure = async () => {
       try { 
         ZitadelAuthService.configureAuth(config)
+        ZitadelAuthService.onSessionExpired = () => setSessionExpired(true)
         setIsConfigured(true)
-        
+
         const currentUser = await ZitadelAuthService.getUser()
         setUser(currentUser)
       } catch (error) {
@@ -130,6 +135,11 @@ export function ZitadelProvider({ children, config }: ZitadelProviderProps) {
   return (
     <ZitadelContext.Provider value={value}>
       {children}
+      {sessionExpired && (
+        <SessionExpiredModal
+          action={renderSessionExpiredAction?.(signIn)}
+        />
+      )}
     </ZitadelContext.Provider>
   )
 }

package/components/SessionExpiredModal.tsx

@@ -0,0 +1,122 @@
+"use client"
+
+import { ReactNode, useEffect, useState } from "react"
+
+interface SessionExpiredModalProps {
+  /** The action element rendered at the bottom of the modal (e.g. a sign-in button). */
+  action: ReactNode
+}
+
+export function SessionExpiredModal({ action }: SessionExpiredModalProps) {
+  const [isDark, setIsDark] = useState(false)
+
+  useEffect(() => {
+    const checkDarkMode = () => setIsDark(document.documentElement.classList.contains('dark'))
+    checkDarkMode()
+    const observer = new MutationObserver(checkDarkMode)
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
+    return () => observer.disconnect()
+  }, [])
+
+  const cardBg = isDark ? 'var(--theme-dark-background-500)' : 'var(--theme-light-background-100)'
+  const borderColor = isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)'
+  const textColor = isDark ? 'var(--theme-dark-text)' : 'var(--theme-light-text)'
+  const secondaryText = isDark ? 'var(--theme-dark-secondary-text)' : 'var(--theme-light-secondary-text)'
+  const warningBg = isDark ? 'rgba(250,163,0,0.1)' : 'rgba(250,163,0,0.08)'
+  const warningBorder = 'rgba(250,163,0,0.4)'
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="session-expired-title"
+      style={{
+        position: 'fixed',
+        inset: 0,
+        zIndex: 9999,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(0,0,0,0.6)',
+        backdropFilter: 'blur(2px)',
+      }}
+    >
+      <div
+        style={{
+          width: '440px',
+          backgroundColor: cardBg,
+          border: '1px solid',
+          borderColor,
+          padding: '2.5rem',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: '1.25rem',
+        }}
+      >
+        {/* Icon */}
+        <div
+          style={{
+            width: '56px',
+            height: '56px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: warningBg,
+            border: '1px solid',
+            borderColor: warningBorder,
+            flexShrink: 0,
+          }}
+        >
+          <svg
+            width="28"
+            height="28"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="#FAA300"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <rect x="3" y="11" width="18" height="11" />
+            <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+            <circle cx="12" cy="16" r="1" fill="#FAA300" stroke="none" />
+          </svg>
+        </div>
+
+        {/* Title */}
+        <h2
+          id="session-expired-title"
+          style={{
+            margin: 0,
+            fontSize: '1.125rem',
+            fontWeight: 600,
+            color: textColor,
+            textAlign: 'center',
+          }}
+        >
+          Session Expired
+        </h2>
+
+        {/* Description */}
+        <p
+          style={{
+            margin: 0,
+            fontSize: '0.875rem',
+            lineHeight: '1.6',
+            color: secondaryText,
+            textAlign: 'center',
+          }}
+        >
+          Your session has expired and could not be renewed automatically.
+          Please sign in again to continue.
+        </p>
+
+        {/* Action slot — provided by the consumer */}
+        <div style={{ width: '100%' }}>
+          {action}
+        </div>
+      </div>
+    </div>
+  )
+}

package/components/index.ts

@@ -1,2 +1,3 @@
 export { AuthCard, AuthCardTitle, AuthCardDescription, AuthCardSpinner } from './AuthCard'
 export { AuthCallbackError } from './AuthCallbackError'
+export { SessionExpiredModal } from './SessionExpiredModal'

package/config/zitadel.config.ts

@@ -29,7 +29,7 @@ export function createAuthConfig(zitadelConfig: ZitadelConfig): UserManagerSetti
     client_id: `${zitadelConfig.client_id}`,
     redirect_uri: zitadelConfig.redirect_uri ?? `${baseUrl}/callback`,
     response_type: zitadelConfig.response_type ?? 'code',
-    scope: zitadelConfig.scope ?? `openid profile email ${
+    scope: zitadelConfig.scope ?? `openid profile email offline_access ${
       zitadelConfig.project_resource_id
         ? `urn:zitadel:iam:org:project:id:${zitadelConfig.project_resource_id}:aud urn:zitadel:iam:org:projects:roles access_offline`
         : ''

package/hooks/useSession.ts

@@ -6,6 +6,7 @@ interface SessionUser {
   access_token: string
   id_token?: string
   expires_at?: number
+  refresh_token?: string
   profile: {
     sub: string
     email?: string
@@ -25,6 +26,7 @@ interface SessionState {
 /**
  * Hook pour récupérer la session utilisateur dans les micro-apps
  * Lit depuis localStorage (partagé via même domaine)
+ * Vérifie automatiquement l'expiration et redirige vers login si nécessaire
  */
 export function useSession(): SessionState {
   const [state, setState] = useState<SessionState>({
@@ -54,6 +56,14 @@ export function useSession(): SessionState {
             accessToken: userData.access_token,
           })
           return
+        } else {
+          // Token expiré - nettoyer et rediriger
+          localStorage.removeItem(storageKey)
+          
+          // Rediriger vers l'app principale pour reconnexion
+          const mainAppUrl = process.env.NEXT_PUBLIC_MAIN_APP_URL || window.location.origin
+          window.location.href = `${mainAppUrl}/?redirect=${encodeURIComponent(window.location.pathname)}`
+          return
         }
       }
     } catch (error) {

package/index.ts

@@ -11,5 +11,6 @@ export { SessionProvider, useSession } from './SessionProvider'
 // Components
 export { AuthCard, AuthCardTitle, AuthCardDescription, AuthCardSpinner } from './components/AuthCard'
 export { AuthCallbackError } from './components/AuthCallbackError'
+export { SessionExpiredModal } from './components/SessionExpiredModal'
 
 export * from './utils'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orsetra/shared-auth",
-  "version": "1.0.12",
+  "version": "1.1.2",
   "description": "Shared authentication utilities for Orsetra platform using Zitadel",
   "main": "./index.ts",
   "types": "./index.ts",

package/services/zitadel.auth.service.ts

@@ -26,6 +26,8 @@ function createZitadelAuth(zitadelConfig: ZitadelConfig): ZitadelAuth {
   const userManager = new UserManager({
     userStore: new WebStorageStateStore({ store: window.localStorage }),
     loadUserInfo: true,
+    automaticSilentRenew: true,
+    silent_redirect_uri: authConfig.redirect_uri?.replace('/callback', '/silent-refresh'),
     ...authConfig,
   });
 
@@ -37,6 +39,31 @@ function createZitadelAuth(zitadelConfig: ZitadelConfig): ZitadelAuth {
     document.cookie = 'auth_session=; path=/; max-age=0';
   });
 
+  userManager.events.addUserSignedOut(() => {
+    document.cookie = 'auth_session=; path=/; max-age=0';
+    Object.keys(localStorage).forEach(key => {
+      if (key.startsWith('oidc.user:')) {
+        localStorage.removeItem(key);
+      }
+    });
+  });
+
+  userManager.events.addAccessTokenExpired(() => {
+    console.warn(' Access token expired - triggering silent renew');
+    // Le renouvellement silencieux est géré automatiquement par automaticSilentRenew
+  });
+
+  userManager.events.addAccessTokenExpiring(() => {
+    console.log(' Access token expiring soon - preparing silent renew');
+    // Se déclenche environ 60 secondes avant l'expiration
+  });
+
+  userManager.events.addSilentRenewError((error) => {
+    console.error(' Silent renew failed:', error);
+    document.cookie = 'auth_session=; path=/; max-age=0';
+    ZitadelAuthService.onSessionExpired?.();
+  });
+
   return {
     authorize: () => userManager.signinRedirect(),
     signout: () => userManager.signoutRedirect(),
@@ -46,6 +73,7 @@ function createZitadelAuth(zitadelConfig: ZitadelConfig): ZitadelAuth {
 
 export class ZitadelAuthService {
   private static zitadelAuth: ZitadelAuth | null = null;
+  static onSessionExpired: (() => void) | null = null;
 
   static configureAuth(config: ZitadelConfig) {
     this.zitadelAuth = createZitadelAuth(config);
@@ -68,7 +96,27 @@ export class ZitadelAuthService {
 
   static async signOut() {
     try {
+      // Nettoyer le cookie d'auth
       document.cookie = 'auth_session=; path=/; max-age=0';
+      
+      // Nettoyer toutes les sessions localStorage (pour les micro-apps)
+      const authority = process.env.NEXT_PUBLIC_ZITADEL_AUTHORITY;
+      const clientId = process.env.NEXT_PUBLIC_ZITADEL_CLIENT_ID;
+      
+      // Nettoyer la session de l'app courante
+      if (authority && clientId) {
+        const storageKey = `oidc.user:${authority}:${clientId}`;
+        localStorage.removeItem(storageKey);
+      }
+      
+      // Nettoyer toutes les autres sessions Zitadel potentielles
+      Object.keys(localStorage).forEach(key => {
+        if (key.startsWith('oidc.user:')) {
+          localStorage.removeItem(key);
+        }
+      });
+      
+      // Signout redirect vers Zitadel
       await this.getAuth().signout();
     } catch (error) {
       throw this.handleAuthError(error);
@@ -103,6 +151,28 @@ export class ZitadelAuthService {
     return user !== null && !user.expired;
   }
 
+  static async getTokenRemainingTime(): Promise<number> {
+    const user = await this.getUser();
+    if (!user || !user.expires_at) return 0;
+    return Math.max(0, user.expires_at - Math.floor(Date.now() / 1000));
+  }
+
+  static async isTokenExpiringSoon(secondsThreshold: number = 60): Promise<boolean> {
+    const remainingTime = await this.getTokenRemainingTime();
+    return remainingTime > 0 && remainingTime <= secondsThreshold;
+  }
+
+  static async forceTokenRenew(): Promise<User | null> {
+    try {
+      const userManager = this.getUserManager();
+      // Force le renouvellement silencieux manuellement
+      return await userManager.signinSilent();
+    } catch (error) {
+      console.error('Manual token renew failed:', error);
+      return null;
+    }
+  }
+
   static getUserManager(): UserManager {
     return this.getAuth().userManager;
   }