@yackey-labs/yauth-ui-solidjs 0.1.0

package/src/components/mfa-challenge.tsx

@@ -0,0 +1,83 @@
+import type { AuthUser } from "@yackey-labs/yauth-shared";
+import { type Component, createSignal } from "solid-js";
+import { Show } from "solid-js/web";
+import { useYAuth } from "../provider";
+
+export interface MfaChallengeProps {
+	pendingSessionId: string;
+	onSuccess?: (user: AuthUser) => void;
+	onError?: (error: Error) => void;
+}
+
+export const MfaChallenge: Component<MfaChallengeProps> = (props) => {
+	const { client } = useYAuth();
+	const [code, setCode] = createSignal("");
+	const [error, setError] = createSignal<string | null>(null);
+	const [loading, setLoading] = createSignal(false);
+
+	const handleSubmit = async (e: SubmitEvent) => {
+		e.preventDefault();
+		setError(null);
+		setLoading(true);
+
+		try {
+			const form = e.currentTarget as HTMLFormElement;
+			const formData = new FormData(form);
+			await client.mfa.verify(
+				props.pendingSessionId,
+				(formData.get("code") as string) || code(),
+			);
+			const session = await client.getSession();
+			props.onSuccess?.(session.user);
+		} catch (err) {
+			const error = err instanceof Error ? err : new Error(String(err));
+			setError(error.message);
+			props.onError?.(error);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	return (
+		<form class="space-y-4" onSubmit={handleSubmit}>
+			<Show when={error()}>
+				<div class="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive">
+					{error()}
+				</div>
+			</Show>
+
+			<p class="text-sm text-muted-foreground">
+				Enter the code from your authenticator app, or use a backup code.
+			</p>
+
+			<div class="space-y-2">
+				<label
+					class="text-sm font-medium leading-none"
+					for="yauth-mfa-challenge-code"
+				>
+					Verification code
+				</label>
+				<input
+					class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
+					id="yauth-mfa-challenge-code"
+					name="code"
+					type="text"
+					inputmode="numeric"
+					autocomplete="one-time-code"
+					value={code()}
+					onInput={(e) => setCode(e.currentTarget.value)}
+					required
+					disabled={loading()}
+				/>
+			</div>
+
+			<button
+				class="inline-flex h-9 w-full cursor-pointer items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+				type="submit"
+				disabled={loading()}
+			>
+				{loading() ? "Verifying..." : "Verify"}
+			</button>
+		</form>
+	);
+};

package/src/components/mfa-setup.tsx

@@ -0,0 +1,158 @@
+import { type Component, createSignal, For } from "solid-js";
+import { Show } from "solid-js/web";
+import { useYAuth } from "../provider";
+
+export interface MfaSetupProps {
+	onComplete?: (backupCodes: string[]) => void;
+}
+
+type SetupStep = "begin" | "confirm" | "done";
+
+export const MfaSetup: Component<MfaSetupProps> = (props) => {
+	const { client } = useYAuth();
+	const [step, setStep] = createSignal<SetupStep>("begin");
+	const [uri, setUri] = createSignal("");
+	const [secret, setSecret] = createSignal("");
+	const [code, setCode] = createSignal("");
+	const [backupCodes, setBackupCodes] = createSignal<string[]>([]);
+	const [error, setError] = createSignal<string | null>(null);
+	const [loading, setLoading] = createSignal(false);
+
+	const handleBegin = async () => {
+		setError(null);
+		setLoading(true);
+
+		try {
+			const result = await client.mfa.setup();
+			setUri(result.otpauth_url);
+			setSecret(result.secret);
+			setBackupCodes(result.backup_codes);
+			setStep("confirm");
+		} catch (err) {
+			const error = err instanceof Error ? err : new Error(String(err));
+			setError(error.message);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	const handleConfirm = async (e: SubmitEvent) => {
+		e.preventDefault();
+		setError(null);
+		setLoading(true);
+
+		try {
+			const form = e.currentTarget as HTMLFormElement;
+			const formData = new FormData(form);
+			await client.mfa.confirm((formData.get("code") as string) || code());
+			setStep("done");
+			props.onComplete?.(backupCodes());
+		} catch (err) {
+			const error = err instanceof Error ? err : new Error(String(err));
+			setError(error.message);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	return (
+		<div class="space-y-4">
+			<Show when={error()}>
+				<div class="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive">
+					{error()}
+				</div>
+			</Show>
+
+			<Show when={step() === "begin"}>
+				<div class="space-y-4">
+					<p class="text-sm text-muted-foreground">
+						Set up two-factor authentication to secure your account.
+					</p>
+					<button
+						class="inline-flex h-9 w-full cursor-pointer items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+						type="button"
+						onClick={handleBegin}
+						disabled={loading()}
+					>
+						{loading() ? "Setting up..." : "Set up 2FA"}
+					</button>
+				</div>
+			</Show>
+
+			<Show when={step() === "confirm"}>
+				<div class="space-y-4">
+					<p class="text-sm text-muted-foreground">
+						Add this account to your authenticator app using the URI below, then
+						enter the verification code.
+					</p>
+
+					<div class="space-y-1">
+						<span class="text-sm font-medium leading-none">OTP Auth URI</span>
+						<code class="block w-full break-all rounded-md border border-input bg-muted px-3 py-2 text-xs">
+							{uri()}
+						</code>
+					</div>
+
+					<div class="space-y-1">
+						<span class="text-sm font-medium leading-none">
+							Manual entry key
+						</span>
+						<code class="block w-full break-all rounded-md border border-input bg-muted px-3 py-2 text-xs font-mono tracking-wider">
+							{secret()}
+						</code>
+					</div>
+
+					<form class="space-y-4" onSubmit={handleConfirm}>
+						<div class="space-y-2">
+							<label
+								class="text-sm font-medium leading-none"
+								for="yauth-mfa-setup-code"
+							>
+								Verification code
+							</label>
+							<input
+								class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
+								id="yauth-mfa-setup-code"
+								name="code"
+								type="text"
+								inputmode="numeric"
+								autocomplete="one-time-code"
+								value={code()}
+								onInput={(e) => setCode(e.currentTarget.value)}
+								required
+								disabled={loading()}
+							/>
+						</div>
+
+						<button
+							class="inline-flex h-9 w-full cursor-pointer items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+							type="submit"
+							disabled={loading()}
+						>
+							{loading() ? "Verifying..." : "Verify and enable"}
+						</button>
+					</form>
+				</div>
+			</Show>
+
+			<Show when={step() === "done"}>
+				<div class="space-y-4">
+					<div class="rounded-md bg-emerald-500/10 px-3 py-2 text-sm text-emerald-600 dark:text-emerald-400">
+						Two-factor authentication has been enabled. Save these backup codes
+						in a safe place. Each code can only be used once.
+					</div>
+
+					<ul class="space-y-1">
+						<For each={backupCodes()}>
+							{(code) => (
+								<li class="rounded-md border border-input bg-muted px-3 py-1.5 text-center font-mono text-sm tracking-wider">
+									{code}
+								</li>
+							)}
+						</For>
+					</ul>
+				</div>
+			</Show>
+		</div>
+	);
+};

package/src/components/oauth-buttons.tsx

@@ -0,0 +1,30 @@
+import { type Component, For } from "solid-js";
+import { useYAuth } from "../provider";
+
+export interface OAuthButtonsProps {
+	providers: string[];
+}
+
+export const OAuthButtons: Component<OAuthButtonsProps> = (props) => {
+	const { client } = useYAuth();
+
+	const handleClick = (provider: string) => {
+		client.oauth.authorize(provider);
+	};
+
+	return (
+		<div class="space-y-2">
+			<For each={props.providers}>
+				{(provider) => (
+					<button
+						class="inline-flex h-9 w-full cursor-pointer items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+						type="button"
+						onClick={() => handleClick(provider)}
+					>
+						Sign in with {provider.charAt(0).toUpperCase() + provider.slice(1)}
+					</button>
+				)}
+			</For>
+		</div>
+	);
+};

package/src/components/passkey-button.tsx

@@ -0,0 +1,98 @@
+import {
+	startAuthentication,
+	startRegistration,
+} from "@simplewebauthn/browser";
+import type { AuthUser } from "@yackey-labs/yauth-shared";
+import { type Component, createSignal } from "solid-js";
+import { Show } from "solid-js/web";
+import { useYAuth } from "../provider";
+
+export interface PasskeyButtonProps {
+	mode: "login" | "register";
+	email?: string;
+	onSuccess?: (user: AuthUser) => void;
+	onError?: (error: Error) => void;
+}
+
+export const PasskeyButton: Component<PasskeyButtonProps> = (props) => {
+	const { client } = useYAuth();
+	const [error, setError] = createSignal<string | null>(null);
+	const [loading, setLoading] = createSignal(false);
+
+	const handleLogin = async () => {
+		const beginResult = await client.passkey.loginBegin(
+			props.email || undefined,
+		);
+		const rcr = beginResult.options as { publicKey: unknown };
+		const credential = await startAuthentication({
+			optionsJSON: rcr.publicKey as Parameters<
+				typeof startAuthentication
+			>[0]["optionsJSON"],
+		});
+		await client.passkey.loginFinish(beginResult.challenge_id, credential);
+		const session = await client.getSession();
+		props.onSuccess?.(session.user);
+	};
+
+	const handleRegister = async () => {
+		const ccr = (await client.passkey.registerBegin()) as {
+			publicKey: unknown;
+		};
+		const credential = await startRegistration({
+			optionsJSON: ccr.publicKey as Parameters<
+				typeof startRegistration
+			>[0]["optionsJSON"],
+		});
+		await client.passkey.registerFinish(credential, "Passkey");
+		props.onSuccess?.(undefined as unknown as AuthUser);
+	};
+
+	const handleClick = async () => {
+		setError(null);
+		setLoading(true);
+
+		try {
+			if (props.mode === "login") {
+				await handleLogin();
+			} else {
+				await handleRegister();
+			}
+		} catch (err) {
+			const error = err instanceof Error ? err : new Error(String(err));
+			console.error("[yauth] Passkey error:", error);
+			const message =
+				error.name === "NotAllowedError"
+					? "Passkey authentication was cancelled or not available on this device."
+					: error.message;
+			setError(message);
+			props.onError?.(error);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	return (
+		<div class="space-y-2">
+			<Show when={error()}>
+				<div class="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive">
+					{error()}
+				</div>
+			</Show>
+
+			<button
+				class="inline-flex h-9 w-full cursor-pointer items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+				type="button"
+				onClick={handleClick}
+				disabled={loading()}
+			>
+				{loading()
+					? props.mode === "login"
+						? "Authenticating..."
+						: "Registering..."
+					: props.mode === "login"
+						? "Sign in with passkey"
+						: "Register passkey"}
+			</button>
+		</div>
+	);
+};