From 87c143a332e3bab3c2b24219b23afe5899007c42 Mon Sep 17 00:00:00 2001 From: Cory Hawklvelt Date: Fri, 16 Jan 2026 17:50:56 +1030 Subject: [PATCH] Force mfa if enabled at login --- src/components/auth/ComplianceBanner.tsx | 14 ++- src/contexts/AuthContext.tsx | 71 +++++++++-- src/lib/api.ts | 1 + src/pages/auth/LoginPage.tsx | 152 ++++++++++++++++++++++- 4 files changed, 215 insertions(+), 23 deletions(-) diff --git a/src/components/auth/ComplianceBanner.tsx b/src/components/auth/ComplianceBanner.tsx index c00c190..15ec4b1 100644 --- a/src/components/auth/ComplianceBanner.tsx +++ b/src/components/auth/ComplianceBanner.tsx @@ -55,6 +55,11 @@ export function ComplianceBanner({ compliance }: ComplianceBannerProps) { // Check if MFA is required based on effective_mode (if available) const mfaRequired = isMfaRequired(compliance); + // DEBUG: Log compliance data to diagnose the error + console.log('[ComplianceBanner] compliance:', compliance); + console.log('[ComplianceBanner] missing_methods:', compliance?.missing_methods); + console.log('[ComplianceBanner] missing_methods is array:', Array.isArray(compliance?.missing_methods)); + // Don't show if no compliance data or already compliant if (!compliance || compliance.overall_status === 'compliant' || compliance.overall_status === 'not_applicable') { @@ -64,7 +69,8 @@ export function ComplianceBanner({ compliance }: ComplianceBannerProps) { // Show banner if: // 1. MFA is required (effective_mode starts with "require_"), OR // 2. There are missing methods (fallback for older data without effective_mode) - if (!mfaRequired && compliance.missing_methods.length === 0) { + // Guard against missing_methods being undefined + if (!mfaRequired && (!compliance.missing_methods || compliance.missing_methods.length === 0)) { return null; } @@ -80,7 +86,7 @@ export function ComplianceBanner({ compliance }: ComplianceBannerProps) { Your account requires MFA enrollment to access full features. Please configure MFA immediately to restore access.

- {compliance.missing_methods.length > 0 && ( + {compliance.missing_methods?.length > 0 && (

Required methods: {compliance.missing_methods.join(', ')}

@@ -107,7 +113,7 @@ export function ComplianceBanner({ compliance }: ComplianceBannerProps) { Time remaining: {countdown}

)} - {compliance.missing_methods.length > 0 && ( + {compliance.missing_methods?.length > 0 && (

Required methods: {compliance.missing_methods.join(', ')}

@@ -129,7 +135,7 @@ export function ComplianceBanner({ compliance }: ComplianceBannerProps) {

Your organization has enabled MFA requirements. You have a grace period to configure your authentication methods.

- {compliance.missing_methods.length > 0 && ( + {compliance.missing_methods?.length > 0 && (

Required methods: {compliance.missing_methods.join(', ')}

diff --git a/src/contexts/AuthContext.tsx b/src/contexts/AuthContext.tsx index 88c9d00..4b7e5be 100644 --- a/src/contexts/AuthContext.tsx +++ b/src/contexts/AuthContext.tsx @@ -4,6 +4,7 @@ import { api, User, ApiError, tokenManager, MfaComplianceSummary } from '@/lib/a interface LoginResult { requiresTotp: boolean; + requiresWebAuthn: boolean; requiresMfaEnrollment?: boolean; } @@ -15,6 +16,7 @@ interface AuthContextType { requiresMfaEnrollment: boolean; login: (email: string, password: string, rememberMe?: boolean) => Promise; verifyTotp: (code: string, isBackupCode?: boolean) => Promise; + verifyWebAuthn: () => Promise; logout: () => Promise; refreshUser: () => Promise; refreshCompliance: () => Promise; @@ -38,13 +40,39 @@ function persistMfaCompliance(compliance: MfaComplianceSummary | null): void { function loadMfaCompliance(): MfaComplianceSummary | null { try { const stored = localStorage.getItem(MFA_COMPLIANCE_KEY); - if (!stored) return null; + if (!stored) { + console.log('[AuthContext] loadMfaCompliance: no stored data'); + return null; + } - const compliance = JSON.parse(stored); + const parsed = JSON.parse(stored); + console.log('[AuthContext] loadMfaCompliance: raw parsed:', parsed); + + // Handle both direct format and legacy double-nested format + // Legacy format: { mfa_compliance: { ... } } + // Current format: { ... } + let compliance: Record; + if (parsed.mfa_compliance && typeof parsed.mfa_compliance === 'object') { + console.log('[AuthContext] loadMfaCompliance: detected legacy double-nested format, unwrapping'); + compliance = parsed.mfa_compliance as Record; + } else { + compliance = parsed; + } // Validate that the stored data has the required fields - if (!compliance || typeof compliance !== 'object') return null; - if (!Array.isArray(compliance.orgs)) return null; + if (!compliance || typeof compliance !== 'object') { + console.log('[AuthContext] loadMfaCompliance: invalid compliance object'); + return null; + } + if (!Array.isArray(compliance.orgs)) { + console.log('[AuthContext] loadMfaCompliance: orgs is not an array'); + return null; + } + + // Validate missing_methods exists and is an array + if (!Array.isArray(compliance.missing_methods)) { + console.log('[AuthContext] loadMfaCompliance: missing_methods is not an array or missing'); + } // Check if at least one org has effective_mode (new field from API) // If not, treat as stale data and return null to fetch fresh data @@ -53,11 +81,14 @@ function loadMfaCompliance(): MfaComplianceSummary | null { ); if (!hasEffectiveMode) { + console.log('[AuthContext] loadMfaCompliance: no effective_mode found, treating as stale'); return null; } - return compliance; - } catch { + console.log('[AuthContext] loadMfaCompliance: loaded successfully'); + return compliance as unknown as MfaComplianceSummary; + } catch (error) { + console.log('[AuthContext] loadMfaCompliance: error loading:', error); return null; } } @@ -144,17 +175,24 @@ export function AuthProvider({ children }: { children: ReactNode }) { const login = useCallback(async (email: string, password: string, rememberMe = false): Promise => { console.log('[AuthContext] login() called'); const response = await api.auth.login(email, password, rememberMe); - console.log('[AuthContext] login response:', { - requires_totp: response.requires_totp, + console.log('[AuthContext] login response:', { + requires_totp: response.requires_totp, + requires_webauthn: response.requires_webauthn, requires_mfa_enrollment: response.requires_mfa_enrollment, - hasToken: !!response.token, - hasUser: !!response.user + hasToken: !!response.token, + hasUser: !!response.user }); + // If WebAuthn is required, don't set user yet - wait for WebAuthn verification + if (response.requires_webauthn) { + console.log('[AuthContext] WebAuthn required, returning early'); + return { requiresTotp: false, requiresWebAuthn: true }; + } + // If TOTP is required, don't set user yet - wait for TOTP verification if (response.requires_totp) { console.log('[AuthContext] TOTP required, returning early'); - return { requiresTotp: true }; + return { requiresTotp: true, requiresWebAuthn: false }; } // If MFA enrollment is required (past deadline), set compliance state @@ -171,7 +209,7 @@ export function AuthProvider({ children }: { children: ReactNode }) { persistMfaCompliance(response.mfa_compliance); } setRequiresMfaEnrollment(true); - return { requiresTotp: false, requiresMfaEnrollment: true }; + return { requiresTotp: false, requiresWebAuthn: false, requiresMfaEnrollment: true }; } // Login complete: store token explicitly before setting user state @@ -194,9 +232,15 @@ export function AuthProvider({ children }: { children: ReactNode }) { setRequiresMfaEnrollment(false); navigate('/profile'); } - return { requiresTotp: false }; + return { requiresTotp: false, requiresWebAuthn: false }; }, [navigate]); + const verifyWebAuthn = useCallback(async () => { + // WebAuthn verification is handled directly in the LoginPage component + // This is a placeholder for consistency with the interface + console.log('[AuthContext] verifyWebAuthn called - verification handled in LoginPage'); + }, []); + const verifyTotp = useCallback(async (code: string, isBackupCode = false) => { const response = await api.totp.verify(code, isBackupCode); @@ -244,6 +288,7 @@ export function AuthProvider({ children }: { children: ReactNode }) { requiresMfaEnrollment, login, verifyTotp, + verifyWebAuthn, logout, refreshUser, refreshCompliance, diff --git a/src/lib/api.ts b/src/lib/api.ts index d5abaf3..a64f294 100644 --- a/src/lib/api.ts +++ b/src/lib/api.ts @@ -77,6 +77,7 @@ export interface LoginResponse { token?: string; expires_at?: string; requires_totp?: boolean; + requires_webauthn?: boolean; requires_mfa_enrollment?: boolean; mfa_compliance?: MfaComplianceSummary; } diff --git a/src/pages/auth/LoginPage.tsx b/src/pages/auth/LoginPage.tsx index 3e92088..95cfab6 100644 --- a/src/pages/auth/LoginPage.tsx +++ b/src/pages/auth/LoginPage.tsx @@ -24,7 +24,7 @@ import { import { AddPasskeyWizard } from "@/components/security/AddPasskeyWizard"; import { TotpEnrollmentWizard } from "@/components/security/TotpEnrollmentWizard"; -type LoginStep = 'credentials' | 'totp' | 'passkey-email' | 'mfa-enrollment'; +type LoginStep = 'credentials' | 'totp' | 'webauthn' | 'passkey-email' | 'mfa-enrollment'; export default function LoginPage() { const { login, verifyTotp, refreshUser } = useAuth(); @@ -45,21 +45,23 @@ export default function LoginPage() { try { const result = await login(email, password, rememberMe); - if (result.requiresTotp) { + if (result.requiresWebAuthn) { + setStep('webauthn'); + } else if (result.requiresTotp) { setStep('totp'); setTotpCode(""); } else if (result.requiresMfaEnrollment) { // MFA enrollment required - will be handled by ProtectedLayout // Navigation happens in AuthContext } - // If no TOTP or MFA enrollment required, navigation happens in AuthContext + // If no TOTP, WebAuthn, or MFA enrollment required, navigation happens in AuthContext } catch (error) { if (import.meta.env.DEV) { console.error("[Gatehouse] Login failed:", error); } - const message = error instanceof ApiError - ? error.message + const message = error instanceof ApiError + ? error.message : import.meta.env.DEV && error instanceof Error ? error.message : "An unexpected error occurred"; @@ -123,7 +125,7 @@ export default function LoginPage() { return; } - // If we have an email from the form, use it directly + // If we have an email from the credentials form or passkey-email step, use it const emailToUse = email || passkeyEmail; if (!emailToUse) { @@ -186,6 +188,74 @@ export default function LoginPage() { } }; + // Handle WebAuthn verification specifically for the WebAuthn step (after login response) + const handleWebAuthnVerify = async () => { + // Use the email from the credentials form + if (!email) { + toast({ + variant: "destructive", + title: "Error", + description: "Email is required. Please go back and try again.", + }); + handleBackToCredentials(); + return; + } + + setIsLoading(true); + + try { + // Step 1: Get login options from server + const options = await api.webauthn.beginLogin(email) as WebAuthnLoginOptions; + + // Step 2: Create assertion using browser WebAuthn API + const assertion = await createLoginAssertion(options); + + // Step 3: Complete login with server + const formattedAssertion = formatLoginAssertion(assertion); + const result = await api.webauthn.completeLogin(formattedAssertion); + + // Token is stored by completeLogin, refresh user and navigate + await refreshUser(); + navigate('/profile'); + + toast({ + title: "Welcome back", + description: `Signed in as ${result.user.email}`, + }); + } catch (error) { + if (import.meta.env.DEV) { + console.error("[Gatehouse] WebAuthn verification failed:", error); + } + + let message = "Failed to verify passkey"; + + if (error instanceof ApiError) { + message = error.message; + } else if (error instanceof DOMException) { + switch (error.name) { + case "NotAllowedError": + message = "Authentication was cancelled or timed out. Please try again or use your authenticator app."; + break; + case "InvalidStateError": + message = "No passkey found for this account."; + break; + default: + message = error.message || message; + } + } else if (error instanceof Error) { + message = error.message; + } + + toast({ + variant: "destructive", + title: "Verification failed", + description: message, + }); + } finally { + setIsLoading(false); + } + }; + const handlePasskeyEmailSubmit = async (e: React.FormEvent) => { e.preventDefault(); if (!passkeyEmail) return; @@ -427,6 +497,76 @@ export default function LoginPage() { ); } + // WebAuthn verification step - shows when user has WebAuthn enrolled + if (step === 'webauthn') { + return ( +
+
+
+ +
+

+ Passkey verification +

+

+ Use your passkey to complete sign in +

+
+ +
+ + +
+ + + or + +
+ + + + +
+
+ ); + } + // Credentials step (default) return (