nexgen_mirrors
e5fbbf521d
Extract social login buttons (Passkey, Google, GitHub, Microsoft) from LoginPage into a dedicated SocialLoginButtons component. This enables reuse in OIDCLoginPage and improves code maintainability.
1038 lines
34 KiB
TypeScript
1038 lines
34 KiB
TypeScript
import { useState, useEffect, useCallback, useRef } from "react";
|
|
import { Link, useNavigate, useSearchParams } from "react-router-dom";
|
|
import { Mail, Lock, ArrowRight, Fingerprint, ArrowLeft, ShieldCheck, Loader2, Smartphone, AlertTriangle, Terminal } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { useAuth } from "@/contexts/AuthContext";
|
|
import { api, ApiError, tokenManager } from "@/lib/api";
|
|
import { useToast } from "@/hooks/use-toast";
|
|
import {
|
|
InputOTP,
|
|
InputOTPGroup,
|
|
InputOTPSlot,
|
|
} from "@/components/ui/input-otp";
|
|
import {
|
|
isWebAuthnSupported,
|
|
createLoginAssertion,
|
|
formatLoginAssertion,
|
|
WebAuthnLoginOptions,
|
|
} from "@/lib/webauthn";
|
|
import { AddPasskeyWizard } from "@/components/security/AddPasskeyWizard";
|
|
import { TotpEnrollmentWizard } from "@/components/security/TotpEnrollmentWizard";
|
|
import { OAuthProvider } from "@/lib/oauth";
|
|
import { config } from "@/config";
|
|
import { SocialLoginButtons } from "@/components/auth/SocialLoginButtons";
|
|
|
|
/**
|
|
* Complete an OIDC authorization flow after the user has authenticated.
|
|
* Sends the bearer token + oidc_session_id to the backend, which generates
|
|
* the auth code and returns the redirect URL for the calling application.
|
|
*/
|
|
async function completeOidcFlow(oidcSessionId: string, token: string): Promise<string> {
|
|
const res = await fetch(`${config.api.baseUrl}/oidc/complete`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ oidc_session_id: oidcSessionId, token }),
|
|
});
|
|
const body = await res.json();
|
|
if (!res.ok || !body.success) {
|
|
throw new Error(body.message ?? 'OIDC completion failed');
|
|
}
|
|
return body.data.redirect_url as string;
|
|
}
|
|
|
|
export default function LoginPage() {
|
|
const { login, verifyTotp, refreshUser, user, isLoading: authLoading, checkOrgAdmin } = useAuth();
|
|
const navigate = useNavigate();
|
|
const { toast } = useToast();
|
|
const [searchParams] = useSearchParams();
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [rememberMe, setRememberMe] = useState(false);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [step, setStep] = useState<LoginStep>('credentials');
|
|
const [totpCode, setTotpCode] = useState("");
|
|
const [useBackupCode, setUseBackupCode] = useState(false);
|
|
const [passkeyEmail, setPasskeyEmail] = useState("");
|
|
const [mfaToken, setMfaToken] = useState<string | null>(null);
|
|
|
|
// OIDC bridge: if oidc_session_id is in the URL, we're acting as the
|
|
// login UI for an OIDC authorization flow (e.g. SecuIRD → Secuird).
|
|
// After successful login, call /oidc/complete and redirect to the client app.
|
|
const oidcSessionId = searchParams.get('oidc_session_id');
|
|
const oidcError = searchParams.get('error');
|
|
|
|
// CLI bridge: if cli_token or cli_redirect is present the login was triggered
|
|
// by the Secuird CLI tool. After successful auth the token is delivered
|
|
// directly to the CLI's local callback server.
|
|
const cliToken = searchParams.get('cli_token');
|
|
const cliRedirectParam = searchParams.get('cli_redirect');
|
|
const [cliRedirectUrl, setCliRedirectUrl] = useState<string | null>(cliRedirectParam);
|
|
const cliFetchedRef = useRef(false);
|
|
|
|
// Exchange cli_token for the real redirect URL (keeps the URL clean)
|
|
useEffect(() => {
|
|
if (!cliToken || cliFetchedRef.current) return;
|
|
cliFetchedRef.current = true;
|
|
fetch(`${config.api.baseUrl}/cli/redirect-url?token=${encodeURIComponent(cliToken)}`)
|
|
.then((r) => r.json())
|
|
.then((body) => {
|
|
if (body?.data?.redirect_url) {
|
|
setCliRedirectUrl(body.data.redirect_url);
|
|
}
|
|
})
|
|
.catch(() => {/* ignore — user will just land on normal login */});
|
|
}, [cliToken]);
|
|
|
|
const finishCliFlow = useCallback((token: string) => {
|
|
if (!cliRedirectUrl) return false;
|
|
// cliRedirectUrl already ends with "token=" — just append the value
|
|
window.location.href = cliRedirectUrl + encodeURIComponent(token);
|
|
return true;
|
|
}, [cliRedirectUrl]);
|
|
|
|
// If the user is already authenticated and we're in CLI mode, deliver the
|
|
// token immediately — no need to show the login form at all.
|
|
useEffect(() => {
|
|
if (authLoading) return; // wait until auth state is known
|
|
if (!cliRedirectUrl) return;
|
|
const existingToken = tokenManager.getToken();
|
|
if (user && existingToken) {
|
|
finishCliFlow(existingToken);
|
|
}
|
|
}, [authLoading, user, cliRedirectUrl, finishCliFlow]);
|
|
|
|
const finishOidcFlow = useCallback(async (token: string) => {
|
|
if (!oidcSessionId) return false;
|
|
try {
|
|
const redirectUrl = await completeOidcFlow(oidcSessionId, token);
|
|
window.location.href = redirectUrl;
|
|
return true;
|
|
} catch (err) {
|
|
toast({
|
|
variant: "destructive",
|
|
title: "Authorization failed",
|
|
description: err instanceof Error ? err.message : "Could not complete OIDC authorization",
|
|
});
|
|
return false;
|
|
}
|
|
}, [oidcSessionId, toast]);
|
|
|
|
// Check for MFA step from OAuth callback
|
|
useEffect(() => {
|
|
if (searchParams.get('step') === 'mfa') {
|
|
const storedMfaToken = sessionStorage.getItem('mfa_token');
|
|
const mfaFlow = sessionStorage.getItem('mfa_flow');
|
|
|
|
if (storedMfaToken && mfaFlow === 'external_auth') {
|
|
setMfaToken(storedMfaToken);
|
|
setStep('mfa');
|
|
} else {
|
|
// No valid MFA token, redirect to credentials
|
|
toast({
|
|
variant: "destructive",
|
|
title: "Error",
|
|
description: "MFA verification session expired. Please try signing in again.",
|
|
});
|
|
navigate('/login', { replace: true });
|
|
}
|
|
}
|
|
}, [searchParams, navigate, toast]);
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setIsLoading(true);
|
|
|
|
// In CLI or OIDC mode we need to handle post-auth navigation ourselves,
|
|
// so tell AuthContext not to navigate to /profile automatically.
|
|
const needsCustomNav = !!(cliRedirectUrl || oidcSessionId);
|
|
|
|
try {
|
|
const result = await login(email, password, rememberMe, needsCustomNav);
|
|
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 (MFA path always navigates)
|
|
} else if (oidcSessionId) {
|
|
// OIDC bridge: send token back to the Secuird backend to complete the flow
|
|
const token = tokenManager.getToken();
|
|
if (token) await finishOidcFlow(token);
|
|
} else if (cliRedirectUrl) {
|
|
// CLI bridge: deliver the token directly to the CLI's local server
|
|
const token = tokenManager.getToken();
|
|
if (token) finishCliFlow(token);
|
|
}
|
|
// Normal login: navigation already handled by AuthContext (skipNavigate=false)
|
|
} catch (error) {
|
|
if (import.meta.env.DEV) {
|
|
console.error("[Secuird] Login failed:", error);
|
|
}
|
|
|
|
const message = error instanceof ApiError
|
|
? error.message
|
|
: import.meta.env.DEV && error instanceof Error
|
|
? error.message
|
|
: "An unexpected error occurred";
|
|
|
|
toast({
|
|
variant: "destructive",
|
|
title: "Sign in failed",
|
|
description: message,
|
|
});
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleMfaSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (totpCode.length < 6 && !useBackupCode) {
|
|
toast({
|
|
variant: "destructive",
|
|
title: "Invalid code",
|
|
description: "Please enter your complete verification code.",
|
|
});
|
|
return;
|
|
}
|
|
|
|
setIsLoading(true);
|
|
|
|
try {
|
|
if (mfaToken) {
|
|
// Use MFA token verification for OAuth callback flow
|
|
const response = await api.totp.verifyWithMfaToken(totpCode, mfaToken, useBackupCode);
|
|
|
|
// Store token and update user
|
|
if (response.token) {
|
|
tokenManager.setToken(response.token, response.expires_at ?? null);
|
|
}
|
|
|
|
// Clear MFA session data
|
|
sessionStorage.removeItem('mfa_token');
|
|
sessionStorage.removeItem('mfa_flow');
|
|
|
|
// OIDC bridge: finish the flow if this is an OIDC login
|
|
if (oidcSessionId && response.token) {
|
|
await finishOidcFlow(response.token);
|
|
} else if (cliRedirectUrl && response.token) {
|
|
finishCliFlow(response.token);
|
|
} else {
|
|
await refreshUser();
|
|
const orgsData = await api.users.organizations();
|
|
const hasOrg = orgsData.organizations && orgsData.organizations.length > 0;
|
|
|
|
if (hasOrg) {
|
|
navigate('/profile');
|
|
} else {
|
|
navigate('/org-setup');
|
|
}
|
|
}
|
|
} else {
|
|
// Fallback to regular TOTP verification
|
|
const needsCustomNav = !!(cliRedirectUrl || oidcSessionId);
|
|
await verifyTotp(totpCode, useBackupCode, needsCustomNav);
|
|
if (oidcSessionId) {
|
|
const token = tokenManager.getToken();
|
|
if (token) await finishOidcFlow(token);
|
|
} else if (cliRedirectUrl) {
|
|
const token = tokenManager.getToken();
|
|
if (token) finishCliFlow(token);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
if (import.meta.env.DEV) {
|
|
console.error("[Secuird] MFA verification failed:", error);
|
|
}
|
|
|
|
const message = error instanceof ApiError
|
|
? error.message
|
|
: import.meta.env.DEV && error instanceof Error
|
|
? error.message
|
|
: "Invalid verification code";
|
|
|
|
toast({
|
|
variant: "destructive",
|
|
title: "Verification failed",
|
|
description: message,
|
|
});
|
|
setTotpCode("");
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleTotpSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (totpCode.length < 6) {
|
|
toast({
|
|
variant: "destructive",
|
|
title: "Invalid code",
|
|
description: "Please enter your complete verification code.",
|
|
});
|
|
return;
|
|
}
|
|
|
|
setIsLoading(true);
|
|
|
|
try {
|
|
const needsCustomNav = !!(cliRedirectUrl || oidcSessionId);
|
|
await verifyTotp(totpCode, useBackupCode, needsCustomNav);
|
|
// OIDC bridge: finish the flow if this is an OIDC login
|
|
if (oidcSessionId) {
|
|
const token = tokenManager.getToken();
|
|
if (token) await finishOidcFlow(token);
|
|
} else if (cliRedirectUrl) {
|
|
const token = tokenManager.getToken();
|
|
if (token) finishCliFlow(token);
|
|
}
|
|
// Normal login: navigation already handled by AuthContext (skipNavigate=false)
|
|
} catch (error) {
|
|
if (import.meta.env.DEV) {
|
|
console.error("[Secuird] TOTP verification failed:", error);
|
|
}
|
|
|
|
const message = error instanceof ApiError
|
|
? error.message
|
|
: import.meta.env.DEV && error instanceof Error
|
|
? error.message
|
|
: "Invalid verification code";
|
|
|
|
toast({
|
|
variant: "destructive",
|
|
title: "Verification failed",
|
|
description: message,
|
|
});
|
|
setTotpCode("");
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handlePasskeyLogin = async () => {
|
|
if (!isWebAuthnSupported()) {
|
|
toast({
|
|
variant: "destructive",
|
|
title: "Not supported",
|
|
description: "Passkeys are not supported in this browser.",
|
|
});
|
|
return;
|
|
}
|
|
|
|
// If we have an email from the credentials form or passkey-email step, use it
|
|
const emailToUse = email || passkeyEmail;
|
|
|
|
if (!emailToUse) {
|
|
setStep('passkey-email');
|
|
return;
|
|
}
|
|
|
|
setIsLoading(true);
|
|
|
|
try {
|
|
// Step 1: Get login options from server
|
|
const options = await api.webauthn.beginLogin(emailToUse) as unknown 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();
|
|
await checkOrgAdmin();
|
|
|
|
if (oidcSessionId) {
|
|
const token = tokenManager.getToken();
|
|
if (token) await finishOidcFlow(token);
|
|
} else if (cliRedirectUrl) {
|
|
const token = tokenManager.getToken();
|
|
if (token) finishCliFlow(token);
|
|
} else {
|
|
// Verify org membership before navigating to prevent showing org-setup briefly
|
|
const orgsData = await api.users.organizations();
|
|
const hasOrg = orgsData.organizations && orgsData.organizations.length > 0;
|
|
navigate(hasOrg ? '/profile' : '/org-setup');
|
|
}
|
|
|
|
toast({
|
|
title: "Welcome back",
|
|
description: `Signed in as ${result.user.email}`,
|
|
});
|
|
} catch (error) {
|
|
if (import.meta.env.DEV) {
|
|
console.error("[Secuird] Passkey login failed:", error);
|
|
}
|
|
|
|
let message = "Failed to sign in with 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.";
|
|
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: "Passkey sign in failed",
|
|
description: message,
|
|
});
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
// 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 unknown 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);
|
|
|
|
// OIDC bridge or normal navigation
|
|
if (oidcSessionId) {
|
|
const token = tokenManager.getToken();
|
|
if (token) await finishOidcFlow(token);
|
|
} else if (cliRedirectUrl) {
|
|
const token = tokenManager.getToken();
|
|
if (token) finishCliFlow(token);
|
|
} else {
|
|
await refreshUser();
|
|
await checkOrgAdmin();
|
|
// Verify org membership before navigating to prevent showing org-setup briefly
|
|
const orgsData = await api.users.organizations();
|
|
const hasOrg = orgsData.organizations && orgsData.organizations.length > 0;
|
|
navigate(hasOrg ? '/profile' : '/org-setup');
|
|
toast({
|
|
title: "Welcome back",
|
|
description: `Signed in as ${result.user.email}`,
|
|
});
|
|
}
|
|
} catch (error) {
|
|
if (import.meta.env.DEV) {
|
|
console.error("[Secuird] 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;
|
|
await handlePasskeyLogin();
|
|
};
|
|
|
|
const handleBackToCredentials = () => {
|
|
setStep('credentials');
|
|
setTotpCode("");
|
|
setUseBackupCode(false);
|
|
setPasskeyEmail("");
|
|
};
|
|
|
|
/**
|
|
* Initiate OAuth login flow for external provider.
|
|
*
|
|
* The backend /authorize endpoint builds the Google auth URL (with the
|
|
* backend callback as redirect_uri) and returns it. We then redirect the
|
|
* browser to Google. After the user authenticates, Google calls the backend
|
|
* callback, the backend exchanges the code for a session token, and
|
|
* redirects the browser to /oauth/callback?token=... on the frontend.
|
|
*/
|
|
const handleOAuthLogin = async (provider: OAuthProvider) => {
|
|
setIsLoading(true);
|
|
|
|
try {
|
|
// Ask backend for the Google authorization URL
|
|
// If we're in an OIDC bridge flow, pass oidc_session_id so it survives the round-trip
|
|
const response = await api.externalAuth.initiateLogin(provider, {
|
|
flow: 'login',
|
|
...(oidcSessionId ? { oidc_session_id: oidcSessionId } : {}),
|
|
});
|
|
|
|
// CLI bridge: stash the redirect URL so OAuthCallbackPage can deliver the token
|
|
if (cliRedirectUrl) {
|
|
sessionStorage.setItem('cli_redirect_url', cliRedirectUrl);
|
|
}
|
|
|
|
// Redirect browser to provider
|
|
window.location.href = response.authorization_url;
|
|
|
|
} catch (error) {
|
|
if (import.meta.env.DEV) {
|
|
console.error("[Secuird] OAuth login failed:", error);
|
|
}
|
|
|
|
let message = `Failed to initiate ${provider} sign in`;
|
|
if (error instanceof ApiError) {
|
|
message = error.message;
|
|
} else if (error instanceof Error) {
|
|
message = error.message;
|
|
}
|
|
|
|
toast({
|
|
variant: "destructive",
|
|
title: "Sign in failed",
|
|
description: message,
|
|
});
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
// Auto-submit when OTP is complete
|
|
const handleOtpChange = (value: string) => {
|
|
setTotpCode(value);
|
|
if (value.length === 6 && !useBackupCode) {
|
|
setTimeout(() => {
|
|
const form = document.getElementById('totp-form') as HTMLFormElement;
|
|
if (form) form.requestSubmit();
|
|
}, 100);
|
|
}
|
|
};
|
|
|
|
// MFA enrollment step - shows when user needs to configure MFA
|
|
if (step === 'mfa-enrollment') {
|
|
const [showTotpEnrollment, setShowTotpEnrollment] = useState(false);
|
|
const [showPasskeyEnrollment, setShowPasskeyEnrollment] = useState(false);
|
|
|
|
return (
|
|
<div className="auth-card">
|
|
<div className="text-center mb-8">
|
|
<div className="mx-auto w-12 h-12 rounded-full bg-warning/10 flex items-center justify-center mb-4">
|
|
<AlertTriangle className="w-6 h-6 text-warning" />
|
|
</div>
|
|
<h1 className="text-2xl font-semibold text-foreground tracking-tight">
|
|
MFA Enrollment Required
|
|
</h1>
|
|
<p className="text-muted-foreground mt-2">
|
|
Your account requires multi-factor authentication to access full features.
|
|
</p>
|
|
</div>
|
|
|
|
<Card className="mb-6">
|
|
<CardHeader>
|
|
<CardTitle className="text-base">Configure MFA</CardTitle>
|
|
<CardDescription>
|
|
Set up at least one authentication method to continue
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<Button
|
|
variant="outline"
|
|
className="w-full justify-start"
|
|
onClick={() => setShowTotpEnrollment(true)}
|
|
>
|
|
<Smartphone className="w-4 h-4 mr-2" />
|
|
Set up Authenticator App
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
className="w-full justify-start"
|
|
onClick={() => setShowPasskeyEnrollment(true)}
|
|
>
|
|
<Fingerprint className="w-4 h-4 mr-2" />
|
|
Add a Passkey
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<p className="text-center text-sm text-muted-foreground">
|
|
After configuring MFA, you'll be redirected to your profile.
|
|
</p>
|
|
|
|
<TotpEnrollmentWizard
|
|
open={showTotpEnrollment}
|
|
onOpenChange={setShowTotpEnrollment}
|
|
onSuccess={() => {
|
|
setShowTotpEnrollment(false);
|
|
navigate('/profile');
|
|
}}
|
|
/>
|
|
|
|
<AddPasskeyWizard
|
|
open={showPasskeyEnrollment}
|
|
onOpenChange={setShowPasskeyEnrollment}
|
|
onSuccess={() => {
|
|
setShowPasskeyEnrollment(false);
|
|
navigate('/profile');
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Passkey email entry step
|
|
if (step === 'passkey-email') {
|
|
return (
|
|
<div className="auth-card">
|
|
<div className="text-center mb-8">
|
|
<div className="mx-auto w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
|
|
<Fingerprint className="w-6 h-6 text-primary" />
|
|
</div>
|
|
<h1 className="text-2xl font-semibold text-foreground tracking-tight">
|
|
Sign in with passkey
|
|
</h1>
|
|
<p className="text-muted-foreground mt-2">
|
|
Enter your email to continue with passkey authentication
|
|
</p>
|
|
</div>
|
|
|
|
<form onSubmit={handlePasskeyEmailSubmit} className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="passkey-email">Email</Label>
|
|
<div className="relative">
|
|
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
|
<Input
|
|
id="passkey-email"
|
|
type="email"
|
|
placeholder="you@example.com"
|
|
value={passkeyEmail}
|
|
onChange={(e) => setPasskeyEmail(e.target.value)}
|
|
className="pl-10"
|
|
required
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<Button type="submit" className="w-full" disabled={isLoading || !passkeyEmail}>
|
|
{isLoading ? (
|
|
<>
|
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
|
Authenticating...
|
|
</>
|
|
) : (
|
|
<>
|
|
Continue
|
|
<ArrowRight className="w-4 h-4 ml-2" />
|
|
</>
|
|
)}
|
|
</Button>
|
|
</form>
|
|
|
|
<Button
|
|
variant="ghost"
|
|
className="w-full mt-4 text-muted-foreground"
|
|
onClick={handleBackToCredentials}
|
|
>
|
|
<ArrowLeft className="w-4 h-4 mr-2" />
|
|
Back to sign in
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// MFA verification step (after OAuth callback)
|
|
if (step === 'mfa') {
|
|
return (
|
|
<div className="auth-card">
|
|
<div className="text-center mb-8">
|
|
<div className="mx-auto w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
|
|
<ShieldCheck className="w-6 h-6 text-primary" />
|
|
</div>
|
|
<h1 className="text-2xl font-semibold text-foreground tracking-tight">
|
|
Two-factor authentication
|
|
</h1>
|
|
<p className="text-muted-foreground mt-2">
|
|
Enter the 6-digit code from your authenticator app to complete sign in
|
|
</p>
|
|
</div>
|
|
|
|
<form id="mfa-form" onSubmit={handleMfaSubmit} className="space-y-6">
|
|
{useBackupCode ? (
|
|
<div className="space-y-2">
|
|
<Label htmlFor="mfa-backup-code">Backup code</Label>
|
|
<Input
|
|
id="mfa-backup-code"
|
|
type="text"
|
|
placeholder="Enter 16-character backup code"
|
|
value={totpCode}
|
|
onChange={(e) => setTotpCode(e.target.value.toUpperCase())}
|
|
className="text-center font-mono tracking-widest"
|
|
maxLength={16}
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="flex justify-center">
|
|
<InputOTP
|
|
maxLength={6}
|
|
value={totpCode}
|
|
onChange={handleOtpChange}
|
|
autoFocus
|
|
>
|
|
<InputOTPGroup>
|
|
<InputOTPSlot index={0} />
|
|
<InputOTPSlot index={1} />
|
|
<InputOTPSlot index={2} />
|
|
<InputOTPSlot index={3} />
|
|
<InputOTPSlot index={4} />
|
|
<InputOTPSlot index={5} />
|
|
</InputOTPGroup>
|
|
</InputOTP>
|
|
</div>
|
|
)}
|
|
|
|
<Button type="submit" className="w-full" disabled={isLoading}>
|
|
{isLoading ? (
|
|
"Verifying..."
|
|
) : (
|
|
<>
|
|
Verify
|
|
<ArrowRight className="w-4 h-4 ml-2" />
|
|
</>
|
|
)}
|
|
</Button>
|
|
</form>
|
|
|
|
<div className="mt-6 space-y-3">
|
|
<Button
|
|
variant="ghost"
|
|
className="w-full text-muted-foreground"
|
|
onClick={() => setUseBackupCode(!useBackupCode)}
|
|
>
|
|
{useBackupCode ? "Use authenticator app" : "Use a backup code instead"}
|
|
</Button>
|
|
|
|
<Button
|
|
variant="ghost"
|
|
className="w-full text-muted-foreground"
|
|
onClick={() => {
|
|
sessionStorage.removeItem('mfa_token');
|
|
sessionStorage.removeItem('mfa_flow');
|
|
navigate('/login', { replace: true });
|
|
}}
|
|
>
|
|
<ArrowLeft className="w-4 h-4 mr-2" />
|
|
Cancel and return to sign in
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// TOTP verification step
|
|
if (step === 'totp') {
|
|
return (
|
|
<div className="auth-card">
|
|
<div className="text-center mb-8">
|
|
<div className="mx-auto w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
|
|
<ShieldCheck className="w-6 h-6 text-primary" />
|
|
</div>
|
|
<h1 className="text-2xl font-semibold text-foreground tracking-tight">
|
|
Two-factor authentication
|
|
</h1>
|
|
<p className="text-muted-foreground mt-2">
|
|
Enter the 6-digit code from your authenticator app
|
|
</p>
|
|
</div>
|
|
|
|
<form id="totp-form" onSubmit={handleTotpSubmit} className="space-y-6">
|
|
{useBackupCode ? (
|
|
<div className="space-y-2">
|
|
<Label htmlFor="backup-code">Backup code</Label>
|
|
<Input
|
|
id="backup-code"
|
|
type="text"
|
|
placeholder="Enter 16-character backup code"
|
|
value={totpCode}
|
|
onChange={(e) => setTotpCode(e.target.value.toUpperCase())}
|
|
className="text-center font-mono tracking-widest"
|
|
maxLength={16}
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="flex justify-center">
|
|
<InputOTP
|
|
maxLength={6}
|
|
value={totpCode}
|
|
onChange={handleOtpChange}
|
|
autoFocus
|
|
>
|
|
<InputOTPGroup>
|
|
<InputOTPSlot index={0} />
|
|
<InputOTPSlot index={1} />
|
|
<InputOTPSlot index={2} />
|
|
<InputOTPSlot index={3} />
|
|
<InputOTPSlot index={4} />
|
|
<InputOTPSlot index={5} />
|
|
</InputOTPGroup>
|
|
</InputOTP>
|
|
</div>
|
|
)}
|
|
|
|
<Button type="submit" className="w-full" disabled={isLoading}>
|
|
{isLoading ? (
|
|
"Verifying..."
|
|
) : (
|
|
<>
|
|
Verify
|
|
<ArrowRight className="w-4 h-4 ml-2" />
|
|
</>
|
|
)}
|
|
</Button>
|
|
</form>
|
|
|
|
<div className="mt-6 space-y-3">
|
|
<Button
|
|
variant="ghost"
|
|
className="w-full text-muted-foreground"
|
|
onClick={() => setUseBackupCode(!useBackupCode)}
|
|
>
|
|
{useBackupCode ? "Use authenticator app" : "Use a backup code instead"}
|
|
</Button>
|
|
|
|
<Button
|
|
variant="ghost"
|
|
className="w-full text-muted-foreground"
|
|
onClick={handleBackToCredentials}
|
|
>
|
|
<ArrowLeft className="w-4 h-4 mr-2" />
|
|
Back to sign in
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// WebAuthn verification step - shows when user has WebAuthn enrolled
|
|
if (step === 'webauthn') {
|
|
return (
|
|
<div className="auth-card">
|
|
<div className="text-center mb-8">
|
|
<div className="mx-auto w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
|
|
<Fingerprint className="w-6 h-6 text-primary" />
|
|
</div>
|
|
<h1 className="text-2xl font-semibold text-foreground tracking-tight">
|
|
Passkey verification
|
|
</h1>
|
|
<p className="text-muted-foreground mt-2">
|
|
Use your passkey to complete sign in
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<Button
|
|
onClick={handleWebAuthnVerify}
|
|
disabled={isLoading}
|
|
className="w-full"
|
|
size="lg"
|
|
>
|
|
{isLoading ? (
|
|
<>
|
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
|
Authenticating...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Fingerprint className="w-5 h-5 mr-2" />
|
|
Use Passkey
|
|
</>
|
|
)}
|
|
</Button>
|
|
|
|
<div className="relative my-6">
|
|
<Separator />
|
|
<span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-card px-3 text-xs text-muted-foreground">
|
|
or
|
|
</span>
|
|
</div>
|
|
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => {
|
|
setStep('totp');
|
|
setTotpCode("");
|
|
setUseBackupCode(false);
|
|
}}
|
|
disabled={isLoading}
|
|
className="w-full"
|
|
>
|
|
<Smartphone className="w-4 h-4 mr-2" />
|
|
Use Authenticator App
|
|
</Button>
|
|
|
|
<Button
|
|
variant="ghost"
|
|
className="w-full text-muted-foreground"
|
|
onClick={handleBackToCredentials}
|
|
>
|
|
<ArrowLeft className="w-4 h-4 mr-2" />
|
|
Back to sign in
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Credentials step (default)
|
|
return (
|
|
<div className="auth-card">
|
|
<div className="text-center mb-8">
|
|
{cliRedirectUrl && (
|
|
<div className="mx-auto w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
|
|
<Terminal className="w-6 h-6 text-primary" />
|
|
</div>
|
|
)}
|
|
<h1 className="text-2xl font-semibold text-foreground tracking-tight">
|
|
{cliRedirectUrl ? "Authorize CLI access" : oidcSessionId ? "Sign in to continue" : "Welcome back"}
|
|
</h1>
|
|
<p className="text-muted-foreground mt-2">
|
|
{cliRedirectUrl
|
|
? "Sign in to grant the Secuird CLI access to your account"
|
|
: oidcSessionId
|
|
? "An application is requesting access to your account"
|
|
: "Sign in to your account to continue"}
|
|
</p>
|
|
{oidcError && (
|
|
<p className="text-sm text-destructive mt-2">{oidcError}</p>
|
|
)}
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email">Email</Label>
|
|
<div className="relative">
|
|
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
placeholder="you@example.com"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
className="pl-10"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="password">Password</Label>
|
|
<div className="relative">
|
|
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
|
<Input
|
|
id="password"
|
|
type="password"
|
|
placeholder="••••••••"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
className="pl-10"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="remember"
|
|
checked={rememberMe}
|
|
onCheckedChange={(checked) => setRememberMe(checked === true)}
|
|
/>
|
|
<Label htmlFor="remember" className="text-sm font-normal cursor-pointer">
|
|
Remember me
|
|
</Label>
|
|
</div>
|
|
<Link
|
|
to="/forgot-password"
|
|
className="text-sm text-accent hover:underline"
|
|
>
|
|
Forgot password?
|
|
</Link>
|
|
</div>
|
|
|
|
<Button type="submit" className="w-full" disabled={isLoading}>
|
|
{isLoading ? (
|
|
<>
|
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
|
Signing in...
|
|
</>
|
|
) : (
|
|
<>
|
|
Sign in
|
|
<ArrowRight className="w-4 h-4 ml-2" />
|
|
</>
|
|
)}
|
|
</Button>
|
|
</form>
|
|
|
|
<SocialLoginButtons isLoading={isLoading} onProviderLogin={handleOAuthLogin} onPasskeyLogin={handlePasskeyLogin} oidcSessionId={oidcSessionId} />
|
|
|
|
<p className="text-center text-sm text-muted-foreground mt-6">
|
|
Don't have an account?{" "}
|
|
<Link to="/register" className="text-accent hover:underline font-medium">
|
|
Create one
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|