@orsetra/shared-auth 1.0.0

package/ProtectedRoute.tsx

@@ -0,0 +1,109 @@
+"use client"
+
+import { ReactNode } from "react"
+import { useZitadel } from "./ZitadelProvider"
+import { useRouter } from "next/navigation"
+
+interface ProtectedRouteProps {
+  children: ReactNode
+  /**
+   * URL de redirection si l'utilisateur n'est pas authentifié
+   * Par défaut: affiche un écran de connexion
+   */
+  redirectTo?: string
+  /**
+   * Fonction de vérification personnalisée (ex: vérifier un rôle)
+   */
+  authorize?: (user: any) => boolean
+  /**
+   * Message personnalisé si l'autorisation échoue
+   */
+  unauthorizedMessage?: string
+}
+
+/**
+ * Composant pour protéger une route ou une section spécifique
+ * 
+ * @example
+ * // Protection simple
+ * <ProtectedRoute>
+ *   <AdminPanel />
+ * </ProtectedRoute>
+ * 
+ * @example
+ * // Avec vérification de rôle
+ * <ProtectedRoute 
+ *   authorize={(user) => user.profile?.roles?.includes('admin')}
+ *   unauthorizedMessage="Accès réservé aux administrateurs"
+ * >
+ *   <AdminPanel />
+ * </ProtectedRoute>
+ * 
+ * @example
+ * // Avec redirection
+ * <ProtectedRoute redirectTo="/login">
+ *   <Dashboard />
+ * </ProtectedRoute>
+ */
+export function ProtectedRoute({
+  children,
+  redirectTo,
+  authorize,
+  unauthorizedMessage = "Vous n'avez pas les permissions nécessaires pour accéder à cette page.",
+}: ProtectedRouteProps) {
+  const { user, isLoading, signIn } = useZitadel()
+  const router = useRouter()
+
+  // Chargement
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-[400px]">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900 mx-auto mb-4"></div>
+          <p className="text-gray-600">Vérification des permissions...</p>
+        </div>
+      </div>
+    )
+  }
+
+  // Non authentifié
+  if (!user) {
+    if (redirectTo) {
+      router.push(redirectTo)
+      return null
+    }
+
+    return (
+      <div className="flex items-center justify-center min-h-[400px] bg-gray-50">
+        <div className="max-w-md w-full bg-white shadow-lg rounded-lg p-8 text-center">
+          <h2 className="text-xl font-bold mb-4">Authentification requise</h2>
+          <p className="text-gray-600 mb-6">
+            Vous devez être connecté pour accéder à cette section.
+          </p>
+          <button
+            onClick={signIn}
+            className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors"
+          >
+            Se connecter
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  // Vérification d'autorisation personnalisée
+  if (authorize && !authorize(user)) {
+    return (
+      <div className="flex items-center justify-center min-h-[400px] bg-gray-50">
+        <div className="max-w-md w-full bg-white shadow-lg rounded-lg p-8 text-center">
+          <div className="text-red-500 text-5xl mb-4">🔒</div>
+          <h2 className="text-xl font-bold mb-4">Accès refusé</h2>
+          <p className="text-gray-600">{unauthorizedMessage}</p>
+        </div>
+      </div>
+    )
+  }
+
+  // Autorisé
+  return <>{children}</>
+}

package/README.md

@@ -0,0 +1,143 @@
+# @orsetra/shared-auth
+
+Shared authentication utilities for Orsetra platform using Zitadel OIDC.
+
+## Installation
+
+```bash
+npm install @orsetra/shared-auth
+# or
+pnpm add @orsetra/shared-auth
+```
+
+## Peer Dependencies
+
+```bash
+npm install react react-dom next oidc-client-ts jose
+```
+
+## Usage
+
+### 1. Configuration Zitadel
+
+```typescript
+import { createAuthConfig } from '@orsetra/shared-auth/config'
+
+const authConfig = createAuthConfig({
+  authority: process.env.NEXT_PUBLIC_ZITADEL_AUTHORITY,
+  client_id: process.env.NEXT_PUBLIC_ZITADEL_CLIENT_ID,
+  project_resource_id: process.env.NEXT_PUBLIC_ZITADEL_PROJECT_ID,
+})
+```
+
+### 2. Provider dans l'App Principale
+
+```tsx
+import { ZitadelProvider } from '@orsetra/shared-auth'
+
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        <ZitadelProvider config={authConfig}>
+          {children}
+        </ZitadelProvider>
+      </body>
+    </html>
+  )
+}
+```
+
+### 3. Protected Routes
+
+```tsx
+import { ProtectedRoute } from '@orsetra/shared-auth'
+
+export default function DashboardPage() {
+  return (
+    <ProtectedRoute>
+      <Dashboard />
+    </ProtectedRoute>
+  )
+}
+```
+
+### 4. Utiliser le Service d'Auth
+
+```typescript
+import { ZitadelAuthService } from '@orsetra/shared-auth/services'
+
+const authService = new ZitadelAuthService(authConfig)
+
+// Login
+await authService.login()
+
+// Logout
+await authService.logout()
+
+// Get user
+const user = await authService.getUser()
+
+// Get access token
+const token = await authService.getAccessToken()
+```
+
+## Architecture Micro-Frontend
+
+### App Main (Authentification Centralisée)
+
+L'app `main` gère le flow OAuth :
+
+```tsx
+// apps/main/app/layout.tsx
+import { ZitadelProvider } from '@orsetra/shared-auth'
+
+export default function RootLayout({ children }) {
+  return (
+    <ZitadelProvider config={authConfig}>
+      {children}
+    </ZitadelProvider>
+  )
+}
+```
+
+### Micro-Apps (Validation de Token)
+
+Les micro-apps valident le token reçu :
+
+```tsx
+// apps/assets/middleware.ts
+import { verifyToken } from '@orsetra/shared-auth/utils'
+
+export async function middleware(request: NextRequest) {
+  const token = request.headers.get('x-auth-token')
+  
+  if (!token) {
+    return NextResponse.redirect('/login')
+  }
+  
+  const isValid = await verifyToken(token)
+  
+  if (!isValid) {
+    return NextResponse.redirect('/login')
+  }
+  
+  return NextResponse.next()
+}
+```
+
+## Environment Variables
+
+```env
+NEXT_PUBLIC_ZITADEL_AUTHORITY=https://your-instance.zitadel.cloud
+NEXT_PUBLIC_ZITADEL_CLIENT_ID=your-client-id
+NEXT_PUBLIC_ZITADEL_PROJECT_ID=your-project-id
+```
+
+## License
+
+MIT
+
+## Repository
+
+[GitHub](https://github.com/orsetra/console-ui/tree/main/packages/shared-auth)

package/ZitadelProvider.tsx

@@ -0,0 +1,140 @@
+"use client"
+
+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 type { User } from "oidc-client-ts"
+
+interface ZitadelContextType {
+  user: User | null
+  isLoading: boolean
+  isConfigured: boolean
+  login: () => Promise<void>
+  logout: () => Promise<void>
+  signIn: () => Promise<void>
+  signOut: () => Promise<void>
+  handleCallback: () => Promise<void>
+  refreshUser: () => Promise<void>
+}
+
+const ZitadelContext = createContext<ZitadelContextType | undefined>(undefined)
+
+interface ZitadelProviderProps {
+  children: ReactNode
+  config: ZitadelConfig
+}
+
+export function ZitadelProvider({ children, config }: ZitadelProviderProps) {
+  const router = useRouter()
+  const [isConfigured, setIsConfigured] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
+  const [user, setUser] = useState<User | null>(null)
+
+  useEffect(() => {
+    const configure = async () => {
+      try { 
+        ZitadelAuthService.configureAuth(config)
+        setIsConfigured(true)
+        
+        const currentUser = await ZitadelAuthService.getUser()
+        setUser(currentUser)
+      } catch (error) {
+        console.error("Failed to configure Zitadel auth:", error)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    configure()
+  }, [config])
+
+  const signIn = async () => {
+    await ZitadelAuthService.signIn()
+  }
+
+  const signOut = async () => {
+    await ZitadelAuthService.signOut()
+    setUser(null)
+  }
+
+  const handleCallback = async () => {
+    try {
+      await ZitadelAuthService.handleCallback()
+      const currentUser = await ZitadelAuthService.getUser()
+      setUser(currentUser)
+    } catch (error) {
+      console.error('Callback handling failed:', error)
+      throw error
+    }
+  }
+
+  const refreshUser = async () => {
+    const currentUser = await ZitadelAuthService.getUser()
+    setUser(currentUser)
+  }
+
+  // Aliases pour compatibilité
+  const login = signIn
+  const logout = signOut
+
+  useEffect(() => {
+    if (!isLoading && !user && isConfigured) {
+      signIn()
+    }
+  }, [isLoading, user, isConfigured])
+
+  const value: ZitadelContextType = {
+    user,
+    isLoading,
+    isConfigured,
+    login,
+    logout,
+    signIn,
+    signOut,
+    handleCallback,
+    refreshUser,
+  }
+
+  if (isLoading) {
+    return (
+      <ZitadelContext.Provider value={value}>
+        <AuthCard>
+          <div className="text-center py-8">
+            <AuthCardSpinner />
+            <AuthCardTitle>Chargement</AuthCardTitle>
+            <AuthCardDescription>Vérification de l'authentification...</AuthCardDescription>
+          </div>
+        </AuthCard>
+      </ZitadelContext.Provider>
+    )
+  }
+
+  if (!user) {
+    return (
+      <ZitadelContext.Provider value={value}>
+        <AuthCard>
+          <div className="text-center py-8">
+            <AuthCardSpinner />
+            <AuthCardTitle>Redirection</AuthCardTitle>
+            <AuthCardDescription>Veuillez patienter...</AuthCardDescription>
+          </div>
+        </AuthCard>
+      </ZitadelContext.Provider>
+    )
+  }
+
+  return (
+    <ZitadelContext.Provider value={value}>
+      {children}
+    </ZitadelContext.Provider>
+  )
+}
+
+export function useZitadel() {
+  const context = useContext(ZitadelContext)
+  if (context === undefined) {
+    throw new Error("useZitadel must be used within a ZitadelProvider")
+  }
+  return context
+}

package/components/AuthCard.tsx

@@ -0,0 +1,143 @@
+"use client"
+
+import { ReactNode, useEffect, useState } from "react"
+
+interface AuthCardProps {
+  children: ReactNode
+  className?: string
+}
+
+/**
+ * Composant Card pour les pages d'authentification
+ * Utilise le même style que le login Zitadel (IBM Carbon Design)
+ */
+export function AuthCard({ children, className = "" }: AuthCardProps) {
+  const [isDark, setIsDark] = useState(false)
+
+  useEffect(() => {
+    // Détecter le dark mode
+    const checkDarkMode = () => {
+      setIsDark(document.documentElement.classList.contains('dark'))
+    }
+    
+    checkDarkMode()
+    
+    // Observer les changements de thème
+    const observer = new MutationObserver(checkDarkMode)
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class']
+    })
+    
+    return () => observer.disconnect()
+  }, [])
+
+  const bgColor = isDark ? 'var(--theme-dark-background-600)' : 'var(--theme-light-background-600)'
+  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)'
+
+  return (
+    <div className="relative flex min-h-screen flex-col justify-center" style={{ backgroundColor: bgColor }}>
+      <div className="relative mx-auto py-8 px-4" style={{ width: '440px' }}>
+        <div 
+          className={`p-8 ${className}`}
+          style={{ 
+            backgroundColor: cardBg,
+            border: '1px solid',
+            borderColor: borderColor,
+            borderRadius: '0',
+            width: '100%',
+            height: '450px',
+            boxShadow: 'none',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            overflow: 'hidden'
+          }}
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface AuthCardTitleProps {
+  children: ReactNode
+}
+
+export function AuthCardTitle({ children }: AuthCardTitleProps) {
+  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()
+  }, [])
+
+  return (
+    <h2 
+      className="text-xl font-semibold mb-3 text-center"
+      style={{ color: isDark ? 'var(--theme-dark-text)' : 'var(--theme-light-text)' }}
+    >
+      {children}
+    </h2>
+  )
+}
+
+interface AuthCardDescriptionProps {
+  children: ReactNode
+}
+
+export function AuthCardDescription({ children }: AuthCardDescriptionProps) {
+  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()
+  }, [])
+
+  return (
+    <p 
+      className="text-center leading-relaxed"
+      style={{ color: isDark ? 'var(--theme-dark-secondary-text)' : 'var(--theme-light-secondary-text)' }}
+    >
+      {children}
+    </p>
+  )
+}
+
+interface AuthCardSpinnerProps {
+  className?: string
+}
+
+export function AuthCardSpinner({ className = "" }: AuthCardSpinnerProps) {
+  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 spinnerColor = isDark ? 'var(--theme-dark-primary-500)' : 'var(--theme-light-primary-500)'
+
+  return (
+    <div 
+      className={`animate-spin rounded-full h-16 w-16 mx-auto mb-6 ${className}`}
+      style={{ 
+        borderWidth: '4px',
+        borderStyle: 'solid',
+        borderColor: 'transparent',
+        borderBottomColor: spinnerColor
+      }}
+    />
+  )
+}

package/config/zitadel.config.ts

@@ -0,0 +1,43 @@
+import { UserManagerSettings } from 'oidc-client-ts';
+
+export type ZitadelConfig = Partial<UserManagerSettings> & {
+  project_resource_id?: string;
+};
+
+/**
+ * Obtient l'URL de base de l'application selon l'environnement
+ * - Production: URL Vercel ou domaine personnalisé
+ * - Development: localhost:3000
+ */
+function getBaseUrl(): string {
+  // En production, utiliser l'URL de l'application
+  if (typeof window !== 'undefined') {
+    return window.location.origin;
+  }
+  
+  return '';
+}
+
+/**
+ * Crée la configuration UserManager à partir de la config Zitadel
+ */
+export function createAuthConfig(zitadelConfig: ZitadelConfig): UserManagerSettings {
+  const baseUrl = getBaseUrl();
+  
+  return {
+    authority: `${zitadelConfig.authority}`,
+    client_id: `${zitadelConfig.client_id}`,
+    redirect_uri: zitadelConfig.redirect_uri ?? `${baseUrl}/callback`,
+    response_type: zitadelConfig.response_type ?? 'code',
+    scope: zitadelConfig.scope ?? `openid profile email ${
+      zitadelConfig.project_resource_id
+        ? `urn:zitadel:iam:org:project:id:${zitadelConfig.project_resource_id}:aud urn:zitadel:iam:org:projects:roles`
+        : ''
+    }`,
+    prompt: zitadelConfig.prompt ?? '',
+    post_logout_redirect_uri: zitadelConfig.post_logout_redirect_uri ?? baseUrl,
+    response_mode: zitadelConfig.response_mode ?? 'query',
+    disablePKCE: zitadelConfig.disablePKCE,
+    extraQueryParams: zitadelConfig.extraQueryParams,
+  };
+}

package/index.ts

@@ -0,0 +1,7 @@
+// Auth exports
+export { ZitadelProvider, useZitadel } from './ZitadelProvider'
+export { ProtectedRoute } from './ProtectedRoute'
+export { ZitadelAuthService } from './services/zitadel.auth.service'
+export { createAuthConfig } from './config/zitadel.config'
+export type { ZitadelConfig } from './config/zitadel.config'
+export * from './utils'

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@orsetra/shared-auth",
+  "version": "1.0.0",
+  "description": "Shared authentication utilities for Orsetra platform using Zitadel",
+  "main": "./index.ts",
+  "types": "./index.ts",
+  "exports": {
+    ".": "./index.ts",
+    "./config": "./config/zitadel.config.ts",
+    "./services": "./services/zitadel.auth.service.ts",
+    "./components": "./components/index.ts",
+    "./utils": "./utils/redirect-utils.ts"
+  },
+  "files": [
+    "index.ts",
+    "ZitadelProvider.tsx",
+    "ProtectedRoute.tsx",
+    "config",
+    "services",
+    "components",
+    "utils",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/orsetra/console-ui.git",
+    "directory": "packages/shared-auth"
+  },
+  "keywords": [
+    "authentication",
+    "zitadel",
+    "oidc",
+    "oauth2",
+    "orsetra"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "next": "^14.0.0 || ^15.0.0"
+  },
+  "dependencies": {
+    "oidc-client-ts": "^3.2.1",
+    "jose": "^5.9.6"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "typescript": "^5"
+  }
+}

package/services/zitadel.auth.service.ts

@@ -0,0 +1,93 @@
+"use client"
+
+import { User, UserManager, WebStorageStateStore } from 'oidc-client-ts';
+import { ZitadelConfig, createAuthConfig } from '../config/zitadel.config';
+
+export type { ZitadelConfig };
+
+export interface ZitadelAuth {
+  authorize(): Promise<void>;
+  signout(): Promise<void>;
+  userManager: UserManager;
+}
+
+function createZitadelAuth(zitadelConfig: ZitadelConfig): ZitadelAuth {
+  const authConfig = createAuthConfig(zitadelConfig);
+
+  const userManager = new UserManager({
+    userStore: new WebStorageStateStore({ store: window.localStorage }),
+    loadUserInfo: true,
+    ...authConfig,
+  });
+
+  return {
+    authorize: () => userManager.signinRedirect(),
+    signout: () => userManager.signoutRedirect(),
+    userManager,
+  };
+}
+
+export class ZitadelAuthService {
+  private static zitadelAuth: ZitadelAuth | null = null;
+
+  static configureAuth(config: ZitadelConfig) {
+    this.zitadelAuth = createZitadelAuth(config);
+  }
+
+  private static getAuth(): ZitadelAuth {
+    if (!this.zitadelAuth) {
+      throw new Error('Zitadel auth not configured. Call configureAuth() first.');
+    }
+    return this.zitadelAuth;
+  }
+
+  static async signIn() {
+    try {
+      await this.getAuth().authorize();
+    } catch (error) {
+      throw this.handleAuthError(error);
+    }
+  }
+
+  static async signOut() {
+    try {
+      await this.getAuth().signout();
+    } catch (error) {
+      throw this.handleAuthError(error);
+    }
+  }
+
+  static async getUser(): Promise<User | null> {
+    try {
+      return await this.getAuth().userManager.getUser();
+    } catch (error) {
+      console.error('Error getting user:', error);
+      return null;
+    }
+  }
+
+  static async handleCallback(): Promise<User> {
+    try {
+      return await this.getAuth().userManager.signinRedirectCallback();
+    } catch (error) {
+      throw this.handleAuthError(error);
+    }
+  }
+
+  static async isAuthenticated(): Promise<boolean> {
+    const user = await this.getUser();
+    return user !== null && !user.expired;
+  }
+
+  static getUserManager(): UserManager {
+    return this.getAuth().userManager;
+  }
+
+  private static handleAuthError(error: any): Error {
+    console.error('Auth error:', error);
+    if (error.message) {
+      return new Error(error.message);
+    }
+    return new Error('An error occurred during authentication');
+  }
+}

package/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './token-validator'
+export * from '../redirect-utils'

package/utils/token-validator.ts

@@ -0,0 +1,54 @@
+import { jwtVerify, createRemoteJWKSet } from 'jose'
+
+/**
+ * Vérifie et décode un token JWT Zitadel
+ */
+export async function verifyToken(
+  token: string,
+  authority: string,
+  clientId: string
+): Promise<boolean> {
+  try {
+    const JWKS = createRemoteJWKSet(new URL(`${authority}/.well-known/openid-configuration/jwks`))
+    
+    const { payload } = await jwtVerify(token, JWKS, {
+      issuer: authority,
+      audience: clientId,
+    })
+    
+    // Vérifier l'expiration
+    if (payload.exp && payload.exp < Date.now() / 1000) {
+      return false
+    }
+    
+    return true
+  } catch (error) {
+    console.error('Token validation failed:', error)
+    return false
+  }
+}
+
+/**
+ * Décode un token JWT sans vérification (pour debug uniquement)
+ */
+export function decodeToken(token: string): any {
+  try {
+    const [, payload] = token.split('.')
+    return JSON.parse(Buffer.from(payload, 'base64').toString())
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Extrait le token du header Authorization
+ */
+export function extractTokenFromHeader(authHeader: string | null): string | null {
+  if (!authHeader) return null
+  
+  const [type, token] = authHeader.split(' ')
+  
+  if (type !== 'Bearer') return null
+  
+  return token
+}