SaaS IDP Migration from Entra to PING LLD

interface IAuthProvider {
  // User state
  isAuthenticated: boolean;
  user: UserProfile | null;
  isLoading: boolean;
  
  // Actions
  login: () => Promise<void>;
  logout: () => Promise<void>;
  getAccessToken: () => Promise<string>;
  
  // User profile
  getUserProfile: () => UserProfile;
}
interface UserProfile {
  id: string;
  email: string;
  name: string;
  roles: string[];
  client?: Client; // Optional: for role-based access
}

// src/components/AuthProvider.tsx (high-level structure)
export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const authProvider = window.env.AUTH_PROVIDER || 'entra';
  
  if (authProvider === 'ping') {
    return <PingAuthProvider>{children}</PingAuthProvider>;
  }
  
  // Default to Entra for backward compatibility
  return <EntraAuthProvider>{children}</EntraAuthProvider>;
};

// @ts-nocheck
import { UserManagerSettings } from 'oidc-client-ts';
/**
 * OIDC Configuration for PING Identity
 * This configuration is used to initialize the OIDC client
 */
export interface PingOidcConfig extends UserManagerSettings {
  authority: string;
  client_id: string;
  redirect_uri: string;
  post_logout_redirect_uri: string;
  response_type: string;
  scope: string;
  automaticSilentRenew: boolean;
  loadUserInfo: boolean;
  silent_redirect_uri?: string;
}
/**
 * Creates OIDC configuration from environment variables
 */
export const createOidcConfig = (): PingOidcConfig => {
  const baseUrl = window.location.origin;
  
  // Validate required environment variables
  if (!window.env.PING_AUTHORITY) {
    throw new Error('PING_AUTHORITY environment variable is not set');
  }
  
  if (!window.env.PING_CLIENT_ID) {
    throw new Error('PING_CLIENT_ID environment variable is not set');
  }
  const config: PingOidcConfig = {
    // PING Identity server configuration
    authority: window.env.PING_AUTHORITY,
    client_id: window.env.PING_CLIENT_ID,
    
    // Redirect URIs
    redirect_uri: `${baseUrl}/callback`,
    post_logout_redirect_uri: `${baseUrl}/login`,
    silent_redirect_uri: `${baseUrl}/silent-renew.html`,
    
    // OAuth 2.0 / OIDC settings
    response_type: 'code',
    response_mode: 'query',
    
    // Scopes - request access to user info and API resources
    scope: window.env.PING_SCOPE || 'openid profile email',
    
    // Token management
    automaticSilentRenew: true,
    monitorSession: true,
    checkSessionInterval: 10000, // Check session every 10 seconds
    
    // User info endpoint
    loadUserInfo: true,
    
    // PKCE (Proof Key for Code Exchange) - required for SPAs
    // This is enabled by default in oidc-client-ts
    
    // Token storage
    storeAuthStateInCookie: false,
    userStore: undefined, // Use default WebStorageStateStore (sessionStorage)
    
    // Metadata
    metadataUrl: `${window.env.PING_AUTHORITY}/.well-known/openid-configuration`,
    
    // Additional settings
    filterProtocolClaims: true,
    includeIdTokenInSilentRenew: false,
    revokeTokensOnSignout: true,
    
    // Clock skew - allow 5 minute difference
    clockSkew: 300,
  };
  return config;
};
/**
 * Validate OIDC configuration
 */
export const validateOidcConfig = (config: PingOidcConfig): boolean => {
  const requiredFields = [
    'authority',
    'client_id',
    'redirect_uri',
    'post_logout_redirect_uri',
    'response_type',
    'scope',
  ];
  for (const field of requiredFields) {
    if (!config[field]) {
      console.error(`OIDC configuration missing required field: ${field}`);
      return false;
    }
  }
  return true;
};
/**
 * Get scope list as array
 */
export const getScopeArray = (): string[] => {
  const scope = window.env.PING_SCOPE || 'openid profile email';
  return scope.split(' ').filter(s => s.length > 0);
};
/**
 * Check if a scope is included in the config
 */
export const hasScope = (scopeName: string): boolean => {
  return getScopeArray().includes(scopeName);
};

// @ts-nocheck
import React, { createContext, useContext, useEffect, useState } from 'react';
import { AuthProvider as OidcAuthProvider, useAuth as useOidcAuth } from 'react-oidc-context';
import { User, UserManager } from 'oidc-client-ts';
import { useNavigate } from 'react-router-dom';
import { createOidcConfig, validateOidcConfig } from '@/auth/OidcConfig';
import { api } from '@/utilities/api';
import { Client } from '@/hooks/useClients';
import * as jose from 'jose';
/**
 * Custom error class for authentication errors
 */
export class NotLoggedInError extends Error {
  constructor(message: string) {
    super(message);
    this.name = 'NotLoggedInError';
  }
}
/**
 * Auth context interface
 */
interface AuthContextType {
  tokens: {
    accessToken: string | null;
    idToken: string | null;
  };
  roles: string[];
  selectedClient: number | null;
  clients: Client[];
  loading: boolean;
  user: User | null;
  switchClient: (clientId: number, navigate: any) => void;
  addClient: (client: Client) => void;
  handleSignin: () => void;
  handleSignout: () => void;
}
/**
 * Create auth context
 */
const AuthContext = createContext<AuthContextType>({
  tokens: { accessToken: null, idToken: null },
  roles: [],
  selectedClient: null,
  clients: [],
  loading: false,
  user: null,
  switchClient: () => {},
  addClient: () => {},
  handleSignin: () => {},
  handleSignout: () => {},
});
/**
 * Hook to access auth context
 */
export const useAuth = () => {
  return useContext(AuthContext);
};
/**
 * Check if token is expiring soon (within 5 minutes)
 */
export const isTokenExpiring = (token: string | null): boolean => {
  if (!token) return true;
  try {
    const decoded = jose.decodeJwt(token);
    const exp = decoded.exp;
    
    if (!exp) return true;
    
    const now = Math.floor(Date.now() / 1000);
    const timeUntilExpiry = exp - now;
    
    // Consider token expiring if less than 5 minutes remaining
    return timeUntilExpiry < 300;
  } catch (error) {
    console.error('Error decoding token:', error);
    return true;
  }
};
/**
 * Remove tokens from storage (used on logout)
 */
export const removeTokens = () => {
  sessionStorage.removeItem(`oidc.user:${window.env.PING_AUTHORITY}:${window.env.PING_CLIENT_ID}`);
  localStorage.removeItem('logout-initiated');
  localStorage.removeItem('selectedClient');
  sessionStorage.removeItem('starredInvoices');
};
/**
 * Check if user is authenticated
 */
export const authenticated = (user: User | null | undefined): boolean => {
  return user != null && !user.expired;
};
/**
 * Development mode token injection for local testing
 */
export const injectLocalDevelopmentTokens = async (): Promise<[string, string]> => {
  const scopes = 'openid profile email documents:read documents:write clients:read clients:write users:read users:write';
  const roles = ['Administrator', 'User', 'Developer'];
  // Secret key for signing (development only)
  const secretKey = '00000000-0000-0000-0000-000000000000';
  const encoder = new TextEncoder();
  const secretKeyUint8Array = encoder.encode(secretKey);
  const expireTime = Math.floor(Date.now() / 1000) + 7200; // 2 hours from now
  // Create mock ID token
  const mockIdToken = await new jose.SignJWT({
    sub: '00000000-0000-0000-0000-000000000000',
    name: 'CLA Developer',
    given_name: 'CLA',
    family_name: 'Developer',
    email: 'developer@claconnect.invalid',
    email_verified: true,
  })
    .setProtectedHeader({ alg: 'HS256' })
    .setIssuedAt()
    .setIssuer('http://localhost:4200')
    .setAudience(window.env.PING_CLIENT_ID || 'local-dev')
    .setExpirationTime('2h')
    .sign(secretKeyUint8Array);
  // Create mock access token with roles and scopes
  const mockAccessToken = await new jose.SignJWT({
    sub: '00000000-0000-0000-0000-000000000000',
    oid: '00000000-0000-0000-0000-000000000000',
    azp: window.env.PING_CLIENT_ID || 'local-dev',
    scope: scopes,
    roles: roles,
    groups: roles, // Some PING configs use groups instead of roles
  })
    .setProtectedHeader({ alg: 'HS256' })
    .setIssuedAt()
    .setIssuer('http://localhost:4200')
    .setAudience('api://documents-ai')
    .setExpirationTime('2h')
    .sign(secretKeyUint8Array);
  // Create mock user object
  const mockUser = {
    id_token: mockIdToken,
    session_state: null,
    access_token: mockAccessToken,
    refresh_token: null,
    token_type: 'Bearer',
    scope: scopes,
    profile: {
      sub: '00000000-0000-0000-0000-000000000000',
      name: 'CLA Developer',
      given_name: 'CLA',
      family_name: 'Developer',
      email: 'developer@claconnect.invalid',
      email_verified: true,
    },
    expires_at: expireTime,
    expires_in: 7200,
  };
  // Store in sessionStorage (mimicking OIDC client behavior)
  const storageKey = `oidc.user:${window.env.PING_AUTHORITY || 'http://localhost:4200'}:${window.env.PING_CLIENT_ID || 'local-dev'}`;
  sessionStorage.setItem(storageKey, JSON.stringify(mockUser));
  console.log('[DEV MODE] Mock tokens injected. User can access all features.');
  return [mockAccessToken, mockIdToken];
};
/**
 * Inner auth provider that wraps OIDC logic
 */
const InnerAuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const navigate = useNavigate();
  const oidcAuth = useOidcAuth();
  
  const [roles, setRoles] = useState<string[]>([]);
  const [selectedClient, setSelectedClient] = useState<number | null>(null);
  const [clients, setClients] = useState<Client[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  /**
   * Extract roles from OIDC user token
   */
  const extractRoles = (user: User | null | undefined): string[] => {
    if (!user || !user.profile) return [];
    // PING can provide roles in different claim names
    const profile = user.profile as any;
    
    // Try common role claim names
    const roleClaims = [
      profile.roles,           // Direct roles array
      profile.role,            // Single role
      profile.groups,          // Groups as roles
      profile.group,           // Single group
      profile['custom:roles'], // Custom claim
      profile['app_roles'],    // Application roles
    ];
    for (const claim of roleClaims) {
      if (Array.isArray(claim)) {
        return claim;
      } else if (typeof claim === 'string') {
        return [claim];
      }
    }
    return [];
  };
  /**
   * Fetch user's clients from API
   */
  const fetchClients = async (userRoles: string[], email?: string): Promise<Client[]> => {
    try {
      let endpoint = userRoles.includes('Administrator') ? '/clients' : '/clients/me';
      
      if (endpoint === '/clients/me' && email) {
        endpoint = `${endpoint}?email=${encodeURIComponent(email)}`;
      }
      const response = await api.get(endpoint);
      const raw = response.data;
      const items: any[] = Array.isArray(raw) ? raw : raw?.items ?? raw?.data ?? [];
      return items.map((c: any) => ({
        id: c.id,
        clientId: c.clientID,
        clientName: c.clientName,
        displayName: c.displayName,
        contactName: c.contactName,
        contactEmail: c.contactEmail,
        enabled: c.enabled,
        createdOn: c.createdOn,
        modifiedOn: c.modifiedOn,
        config: c.config,
      }));
    } catch (error) {
      console.error('Failed to fetch clients:', error);
      return [];
    }
  };
  /**
   * Initialize auth state from OIDC user
   */
  useEffect(() => {
    const initializeAuth = async () => {
      // Check if development mode
      const isDevelopment = window.env.NODE_ENV === 'development' && 
                           new URLSearchParams(window.location.search).has('mockAuth');
      if (isDevelopment) {
        // Inject development tokens
        await injectLocalDevelopmentTokens();
        setRoles(['Administrator', 'User', 'Developer']);
        setLoading(false);
        return;
      }
      if (oidcAuth.isLoading) {
        setLoading(true);
        return;
      }
      if (oidcAuth.user && !oidcAuth.user.expired) {
        // User is authenticated
        const userRoles = extractRoles(oidcAuth.user);
        setRoles(userRoles);
        // Fetch clients
        const email = oidcAuth.user.profile?.email as string | undefined;
        const clientList = await fetchClients(userRoles, email);
        setClients(clientList);
        // Restore selected client from localStorage
        const storedClientId = localStorage.getItem('selectedClient');
        if (storedClientId) {
          const clientId = parseInt(storedClientId, 10);
          if (clientList.some(c => c.id === clientId)) {
            setSelectedClient(clientId);
          } else if (clientList.length > 0) {
            // Default to first client if stored client not found
            setSelectedClient(clientList[0].id);
            localStorage.setItem('selectedClient', clientList[0].id.toString());
          }
        } else if (clientList.length > 0) {
          // No stored client, default to first
          setSelectedClient(clientList[0].id);
          localStorage.setItem('selectedClient', clientList[0].id.toString());
        }
      } else if (oidcAuth.error) {
        console.error('OIDC authentication error:', oidcAuth.error);
      }
      setLoading(false);
    };
    initializeAuth();
  }, [oidcAuth.isLoading, oidcAuth.user, oidcAuth.error]);
  /**
   * Handle client switching
   */
  const switchClient = (clientId: number, navigate: any) => {
    setSelectedClient(clientId);
    localStorage.setItem('selectedClient', clientId.toString());
    
    // Clear session-specific data
    sessionStorage.removeItem('invoicesColumnFilters');
    sessionStorage.removeItem('starredInvoices');
    
    // Navigate to dashboard
    if (navigate) {
      navigate('/');
    }
  };
  /**
   * Add a new client to the list
   */
  const addClient = (client: Client) => {
    setClients(prev => [...prev, client]);
  };
  /**
   * Handle sign in
   */
  const handleSignin = () => {
    oidcAuth.signinRedirect();
  };
  /**
   * Handle sign out
   */
  const handleSignout = () => {
    // Mark logout as initiated
    localStorage.setItem('logout-initiated', Date.now().toString());
    
    // Clear all local data
    removeTokens();
    
    // Sign out from PING
    oidcAuth.signoutRedirect();
  };
  const tokens = {
    accessToken: oidcAuth.user?.access_token || null,
    idToken: oidcAuth.user?.id_token || null,
  };
  const contextValue: AuthContextType = {
    tokens,
    roles,
    selectedClient,
    clients,
    loading: loading || oidcAuth.isLoading,
    user: oidcAuth.user || null,
    switchClient,
    addClient,
    handleSignin,
    handleSignout,
  };
  return (
    <AuthContext.Provider value={contextValue}>
      {children}
    </AuthContext.Provider>
  );
};
/**
 * Main AuthProvider component
 * Wraps application with OIDC provider
 */
export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [oidcConfig, setOidcConfig] = useState<any>(null);
  const [configError, setConfigError] = useState<string | null>(null);
  useEffect(() => {
    try {
      const config = createOidcConfig();
      
      if (!validateOidcConfig(config)) {
        throw new Error('Invalid OIDC configuration');
      }
      setOidcConfig(config);
    } catch (error) {
      console.error('Failed to create OIDC configuration:', error);
      setConfigError(error.message);
    }
  }, []);
  if (configError) {
    return (
      <div style={{ padding: '20px', color: 'red' }}>
        <h1>Configuration Error</h1>
        <p>{configError}</p>
        <p>Please check your environment variables.</p>
      </div>
    );
  }
  if (!oidcConfig) {
    return <div>Loading authentication...</div>;
  }
  const onSigninCallback = () => {
    // After successful auth, navigate to home or original destination
    const returnUrl = sessionStorage.getItem('auth-return-url') || '/';
    sessionStorage.removeItem('auth-return-url');
    window.history.replaceState({}, document.title, returnUrl);
  };
  return (
    <OidcAuthProvider
      {...oidcConfig}
      onSigninCallback={onSigninCallback}
      onRemoveUser={() => {
        console.log('User removed from session');
      }}
    >
      <InnerAuthProvider>{children}</InnerAuthProvider>
    </OidcAuthProvider>
  );
};
// Export for backwards compatibility
export default AuthProvider;

// @ts-nocheck
import React, { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from 'react-oidc-context';
import { Loading } from '@/components/Loading';
/**
 * OIDC callback page
 * This page handles the redirect from PING after authentication
 */
export const OidcCallback: React.FC = () => {
  const navigate = useNavigate();
  const auth = useAuth();
  useEffect(() => {
    // The OIDC client automatically handles the callback
    // We just need to wait for it to complete and then navigate
    
    if (auth.user && !auth.isLoading) {
      // Authentication successful, navigate to home or stored return URL
      const returnUrl = sessionStorage.getItem('auth-return-url') || '/';
      sessionStorage.removeItem('auth-return-url');
      navigate(returnUrl, { replace: true });
    } else if (auth.error) {
      // Authentication failed
      console.error('Authentication error:', auth.error);
      navigate('/login?error=auth_failed', { replace: true });
    }
  }, [auth.user, auth.isLoading, auth.error, navigate]);
  if (auth.error) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-center">
          <h1 className="text-2xl font-bold mb-4">Authentication Error</h1>
          <p className="text-red-600 mb-4">{auth.error.message}</p>
          <button
            onClick={() => navigate('/login', { replace: true })}
            className="px-4 py-2 bg-primary text-white rounded"
          >
            Return to Login
          </button>
        </div>
      </div>
    );
  }
  return (
    <div className="flex items-center justify-center min-h-screen">
      <div className="text-center">
        <Loading />
        <p className="mt-4 text-muted-foreground">Completing authentication...</p>
      </div>
    </div>
  );
};
export default OidcCallback;

// @ts-nocheck
import axios from 'axios';
import { useAuth } from 'react-oidc-context';
let api: any;
// Create axios instance
if (new URLSearchParams(window.location.search).has('mockAxios')) {
  const module = await import('../__mocks__/axios');
  api = module.default;
} else {
  console.log('Window Env API URL:', (window as any).env?.REACT_APP_API_URL);
  let API_BASE_URL = (window as any).env?.REACT_APP_API_URL;
  
  api = axios.create({
    baseURL: `${API_BASE_URL}/v1`,
    timeout: 30000,
    headers: {
      Accept: 'application/json',
    },
  });
  /**
   * Request interceptor to add authentication token
   */
  api.interceptors.request.use(
    async (config: any) => {
      const token = await getToken();
      if (token) {
        config.headers.Authorization = `Bearer ${token}`;
        return config;
      } else {
        // No token available - user needs to login
        console.error('No authentication token available');
        window.location.assign('/login');
        return Promise.reject(new Error('No authentication token'));
      }
    },
    (error: any) => {
      return Promise.reject(error);
    }
  );
  /**
   * Response interceptor to handle 401 errors
   */
  api.interceptors.response.use(
    (response: any) => response,
    async (error: any) => {
      const originalRequest = error.config;
      // If 401 and we haven't retried yet, try to refresh token
      if (error.response?.status === 401 && !originalRequest._retry) {
        originalRequest._retry = true;
        try {
          // Trigger silent token renewal
          await refreshToken();
          
          // Retry original request with new token
          const token = await getToken();
          originalRequest.headers.Authorization = `Bearer ${token}`;
          return api(originalRequest);
        } catch (refreshError) {
          // Refresh failed, redirect to login
          console.error('Token refresh failed:', refreshError);
          window.location.assign('/login');
          return Promise.reject(refreshError);
        }
      }
      return Promise.reject(error);
    }
  );
}
/**
 * Get access token from OIDC user
 */
const getToken = async (): Promise<string | null> => {
  // Get OIDC user from session storage
  const storageKey = `oidc.user:${window.env.PING_AUTHORITY}:${window.env.PING_CLIENT_ID}`;
  const userJson = sessionStorage.getItem(storageKey);
  
  if (!userJson) {
    return null;
  }
  try {
    const user = JSON.parse(userJson);
    
    // Check if token is expired
    const now = Math.floor(Date.now() / 1000);
    if (user.expires_at && user.expires_at < now) {
      console.warn('Access token expired, attempting renewal...');
      await refreshToken();
      
      // Get updated user
      const updatedUserJson = sessionStorage.getItem(storageKey);
      if (updatedUserJson) {
        const updatedUser = JSON.parse(updatedUserJson);
        return updatedUser.access_token;
      }
      
      return null;
    }
    return user.access_token;
  } catch (error) {
    console.error('Error parsing user from storage:', error);
    return null;
  }
};
/**
 * Refresh access token using OIDC client
 */
const refreshToken = async (): Promise<void> => {
  // We need access to the OIDC auth context, but we're in a utility file
  // The OIDC client handles automatic token renewal if automaticSilentRenew is true
  // If manual renewal is needed, we can use the UserManager directly
  
  const { UserManager } = await import('oidc-client-ts');
  const { createOidcConfig } = await import('@/auth/OidcConfig');
  
  const config = createOidcConfig();
  const userManager = new UserManager(config);
  
  try {
    const user = await userManager.signinSilent();
    console.log('Token refreshed successfully');
  } catch (error) {
    console.error('Failed to refresh token:', error);
    throw error;
  }
};
/**
 * Check if token is expiring soon (within 5 minutes)
 */
export const isTokenExpiring = (token: string | null): boolean => {
  if (!token) return true;
  try {
    // Decode JWT (without verification, just to read claims)
    const base64Url = token.split('.')[1];
    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    const jsonPayload = decodeURIComponent(
      atob(base64)
        .split('')
        .map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
        .join('')
    );
    const payload = JSON.parse(jsonPayload);
    const exp = payload.exp;
    
    if (!exp) return true;
    
    const now = Math.floor(Date.now() / 1000);
    const timeUntilExpiry = exp - now;
    
    // Consider token expiring if less than 5 minutes remaining
    return timeUntilExpiry < 300;
  } catch (error) {
    console.error('Error decoding token:', error);
    return true;
  }
};
export { api };

// @ts-nocheck
import React, { useEffect } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { useAuth } from '@/components/AuthProvider';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Alert, AlertDescription } from '@/components/ui/alert';
export const Login: React.FC = () => {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const auth = useAuth();
  const error = searchParams.get('error');
  useEffect(() => {
    // If user is already authenticated, redirect to home
    if (auth.user && !auth.loading) {
      const returnUrl = sessionStorage.getItem('auth-return-url') || '/';
      sessionStorage.removeItem('auth-return-url');
      navigate(returnUrl, { replace: true });
    }
  }, [auth.user, auth.loading, navigate]);
  const handleLogin = () => {
    // Store current URL as return URL if not login page
    if (window.location.pathname !== '/login') {
      sessionStorage.setItem('auth-return-url', window.location.pathname + window.location.search);
    }
    
    // Initiate OIDC login
    auth.handleSignin();
  };
  const getErrorMessage = (errorCode: string | null): string => {
    switch (errorCode) {
      case 'auth_failed':
        return 'Authentication failed. Please try again.';
      case 'timeout':
        return 'Authentication request timed out. Please try again.';
      case 'cancelled':
        return 'Authentication was cancelled.';
      case 'access_denied':
        return 'Access denied. You may not have permission to access this application.';
      default:
        return 'An error occurred during authentication.';
    }
  };
  return (
    <div className="flex items-center justify-center min-h-screen bg-background">
      <Card className="w-full max-w-md">
        <CardHeader className="space-y-1">
          <CardTitle className="text-2xl font-bold">Welcome to Documents AI</CardTitle>
          <CardDescription>
            Sign in with your organization credentials to continue
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          {error && (
            <Alert variant="destructive">
              <AlertDescription>{getErrorMessage(error)}</AlertDescription>
            </Alert>
          )}
          
          <Button
            onClick={handleLogin}
            disabled={auth.loading}
            className="w-full"
            size="lg"
          >
            {auth.loading ? 'Loading...' : 'Sign In with PING Identity'}
          </Button>
          <div className="text-center text-sm text-muted-foreground">
            <p>By signing in, you agree to our Terms of Service and Privacy Policy.</p>
          </div>
        </CardContent>
      </Card>
    </div>
  );
};
export default Login;

// Find the logout handler and update it:
const handleLogout = () => {
  // Use auth context logout
  auth.handleSignout();
};