@orsetra/shared-auth 1.1.0 → 1.1.3

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 {
@@ -20,16 +21,19 @@ interface ZitadelContextType {
 
 const ZitadelContext = createContext<ZitadelContextType | undefined>(undefined)
 
-interface ZitadelProviderProps {
+export 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/index.ts

@@ -1,5 +1,6 @@
 // Auth exports - Main app
 export { ZitadelProvider, useZitadel } from './ZitadelProvider'
+export type { ZitadelProviderProps } from './ZitadelProvider'
 export { ProtectedRoute } from './ProtectedRoute'
 export { ZitadelAuthService } from './services/zitadel.auth.service'
 export { createAuthConfig } from './config/zitadel.config'
@@ -11,5 +12,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.1.0",
+  "version": "1.1.3",
   "description": "Shared authentication utilities for Orsetra platform using Zitadel",
   "main": "./index.ts",
   "types": "./index.ts",

package/services/zitadel.auth.service.ts

@@ -48,6 +48,22 @@ function createZitadelAuth(zitadelConfig: ZitadelConfig): ZitadelAuth {
     });
   });
 
+  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(),
@@ -57,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);
@@ -134,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;
   }