@puzzle-ui/fullstack 0.0.0-stage → 0.5.1

package/dist/auth/client/react.js

@@ -0,0 +1,850 @@
+"use client";
+import { createAuthClient } from "./index.js";
+import { getAuthLocale, resolveAuthMessages } from "./messages.js";
+import "./auth.css";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { Alert, Button, FormField, TextInput } from "@puzzle-ui/ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/auth/client/react.tsx
+const RequiredMfaEnrollment = ({ className }) => {
+	const { client, snapshot, messages, refresh } = useAuth();
+	const [enrollment, setEnrollment] = useState(null);
+	const [code, setCode] = useState("");
+	const [recoveryCodes, setRecoveryCodes] = useState([]);
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState(null);
+	if (snapshot.status !== "mfa-enrollment-required" && snapshot.status !== "mfa-enrollment-pending") return null;
+	const handleTotpStart = async () => {
+		setError(null);
+		setLoading(true);
+		try {
+			setEnrollment(await client.beginRequiredTotpEnrollment());
+		} catch (cause) {
+			setError(getErrorMessage(cause, messages));
+		} finally {
+			setLoading(false);
+		}
+	};
+	const handleTotpFinish = async (event) => {
+		event.preventDefault();
+		if (!enrollment) return;
+		setError(null);
+		setLoading(true);
+		try {
+			const result = await client.verifyRequiredTotpEnrollment(enrollment.factorId, code);
+			setRecoveryCodes(result.recoveryCodes);
+			setEnrollment(null);
+			await refresh();
+		} catch (cause) {
+			setError(getErrorMessage(cause, messages));
+		} finally {
+			setLoading(false);
+		}
+	};
+	const handlePasskey = async () => {
+		setError(null);
+		setLoading(true);
+		try {
+			const result = await client.registerRequiredPasskey();
+			setRecoveryCodes(result.recoveryCodes);
+			await refresh();
+		} catch (cause) {
+			setError(getErrorMessage(cause, messages));
+		} finally {
+			setLoading(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		className: `puzzle-auth ${className ?? ""}`,
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "puzzle-auth__header",
+				children: [/* @__PURE__ */ jsx("h1", { children: messages.mfaTitle }), /* @__PURE__ */ jsx("p", { children: "Additional authentication setup is required before you can continue." })]
+			}),
+			error && /* @__PURE__ */ jsx(Alert, {
+				severity: "error",
+				children: error
+			}),
+			recoveryCodes.length > 0 ? /* @__PURE__ */ jsxs("div", {
+				className: "puzzle-auth__recovery-codes",
+				children: [/* @__PURE__ */ jsx(Alert, {
+					severity: "success",
+					children: messages.saveRecoveryCodes
+				}), /* @__PURE__ */ jsx("ul", { children: recoveryCodes.map((value) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("code", { children: value }) }, value)) })]
+			}) : enrollment ? /* @__PURE__ */ jsxs("form", {
+				className: "puzzle-auth__form",
+				onSubmit: handleTotpFinish,
+				children: [
+					/* @__PURE__ */ jsx(FormField, {
+						label: messages.totpSecret,
+						children: /* @__PURE__ */ jsx(TextInput, {
+							value: enrollment.secret,
+							readOnly: true,
+							"aria-label": messages.totpSecret
+						})
+					}),
+					/* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("a", {
+						href: enrollment.otpauthUrl,
+						children: "Open authenticator application"
+					}) }),
+					/* @__PURE__ */ jsx(FormField, {
+						label: messages.verificationCode,
+						required: true,
+						controlId: "puzzle-auth-required-totp",
+						children: /* @__PURE__ */ jsx(TextInput, {
+							value: code,
+							autoComplete: "one-time-code",
+							onChange: (event) => setCode(event.currentTarget.value),
+							required: true
+						})
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						loading,
+						disabled: !code.trim(),
+						children: messages.verifyTotp
+					})
+				]
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "puzzle-auth__actions",
+				children: [/* @__PURE__ */ jsx(Button, {
+					disabled: loading,
+					loading,
+					onClick: () => void handleTotpStart(),
+					children: messages.addTotp
+				}), client.isPasskeySupported() && /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					disabled: loading,
+					onClick: () => void handlePasskey(),
+					children: messages.addPasskey
+				})]
+			})
+		]
+	});
+};
+const loadingSnapshot = {
+	status: "loading",
+	user: null
+};
+const AuthContext = createContext(null);
+const AuthProvider = ({ children, client: suppliedClient, options, initialSnapshot = loadingSnapshot, locale: localeInput, messages: messageOverrides, onAuthStateChange }) => {
+	const [createdClient] = useState(() => createAuthClient(options));
+	const client = suppliedClient ?? createdClient;
+	const locale = getAuthLocale(localeInput);
+	const resolvedMessages = useMemo(() => resolveAuthMessages(locale, void 0, messageOverrides), [locale, messageOverrides]);
+	const [snapshot, setSnapshot] = useState(initialSnapshot);
+	const [error, setError] = useState(null);
+	const publish = useCallback((next) => {
+		setSnapshot(next);
+		setError(null);
+		onAuthStateChange?.(next);
+	}, [onAuthStateChange]);
+	const refresh = useCallback(async () => {
+		try {
+			const next = await client.getSnapshot();
+			publish(next);
+			return next;
+		} catch (cause) {
+			const nextError = cause instanceof Error ? cause : new Error(resolvedMessages.unexpectedError);
+			setError(nextError);
+			throw nextError;
+		}
+	}, [
+		client,
+		publish,
+		resolvedMessages.unexpectedError
+	]);
+	useEffect(() => {
+		let active = true;
+		client.getSnapshot().then((next) => {
+			if (active) publish(next);
+		}, (cause) => {
+			if (active) setError(cause instanceof Error ? cause : new Error(resolvedMessages.unexpectedError));
+		});
+		return () => {
+			active = false;
+		};
+	}, [
+		client,
+		publish,
+		resolvedMessages.unexpectedError
+	]);
+	const signIn = useCallback(async (input) => {
+		const next = await client.signIn(input);
+		publish(next);
+		return next;
+	}, [client, publish]);
+	const signUp = useCallback(async (input) => {
+		const next = await client.register(input);
+		publish(next);
+		return next;
+	}, [client, publish]);
+	const signOut = useCallback(async () => {
+		await client.signOut();
+		publish({
+			status: "unauthenticated",
+			user: null
+		});
+	}, [client, publish]);
+	const verifyMfaTotp = useCallback(async (code) => {
+		const next = await client.verifyMfaTotp(code);
+		publish(next);
+		return next;
+	}, [client, publish]);
+	const verifyMfaRecoveryCode = useCallback(async (code) => {
+		const next = await client.verifyMfaRecoveryCode(code);
+		publish(next);
+		return next;
+	}, [client, publish]);
+	const signInWithPasskey = useCallback(async () => {
+		const next = await client.signInWithPasskey();
+		publish(next);
+		return next;
+	}, [client, publish]);
+	const verifyMfaWithPasskey = useCallback(async () => {
+		const next = await client.verifyMfaWithPasskey();
+		publish(next);
+		return next;
+	}, [client, publish]);
+	const requestEmailVerification = useCallback(() => client.requestEmailVerification(), [client]);
+	const verifyEmail = useCallback(async (token) => {
+		const result = await client.verifyEmail(token);
+		publish(await client.getSnapshot());
+		return result;
+	}, [client, publish]);
+	const requestPasswordReset = useCallback((email) => client.requestPasswordReset(email), [client]);
+	const resetPassword = useCallback((token, newPassword) => client.resetPassword(token, newPassword), [client]);
+	const changePassword = useCallback(async (currentPassword, newPassword) => {
+		const result = await client.changePassword(currentPassword, newPassword);
+		publish(await client.getSnapshot());
+		return result;
+	}, [client, publish]);
+	const value = useMemo(() => ({
+		client,
+		snapshot,
+		messages: resolvedMessages,
+		locale,
+		error,
+		isLoading: snapshot.status === "loading",
+		isAuthenticated: snapshot.status === "authenticated",
+		isPendingMfa: snapshot.status === "mfa-pending" || snapshot.status === "step-up-pending",
+		refresh,
+		signIn,
+		signUp,
+		signOut,
+		verifyMfaTotp,
+		verifyMfaRecoveryCode,
+		signInWithPasskey,
+		verifyMfaWithPasskey,
+		requestEmailVerification,
+		verifyEmail,
+		requestPasswordReset,
+		resetPassword,
+		changePassword
+	}), [
+		client,
+		snapshot,
+		resolvedMessages,
+		locale,
+		error,
+		refresh,
+		signIn,
+		signUp,
+		signOut,
+		verifyMfaTotp,
+		verifyMfaRecoveryCode,
+		signInWithPasskey,
+		verifyMfaWithPasskey
+	]);
+	return /* @__PURE__ */ jsx(AuthContext.Provider, {
+		value,
+		children
+	});
+};
+const useAuth = () => {
+	const context = useContext(AuthContext);
+	if (!context) throw new Error("useAuth must be used inside an AuthProvider.");
+	return context;
+};
+const useSession = () => {
+	const { snapshot, isLoading, isAuthenticated } = useAuth();
+	return {
+		status: snapshot.status,
+		mfa: snapshot.mfa,
+		isLoading,
+		isAuthenticated
+	};
+};
+const useUser = () => useAuth().snapshot.user;
+const getErrorMessage = (error, messages) => {
+	if (typeof error === "object" && error !== null && "code" in error) {
+		if (error.code === "INVALID_CREDENTIALS") return messages.invalidCredentials;
+	}
+	return error instanceof Error ? error.message : messages.unexpectedError;
+};
+const redirectAfterSuccess = (redirectTo) => {
+	if (!redirectTo || typeof window === "undefined" || !redirectTo.startsWith("/") || redirectTo.startsWith("//")) return;
+	window.location.assign(redirectTo);
+};
+const SignInForm = ({ className, redirectTo, onSuccess, onForgotPassword, onSignUp }) => {
+	const { signIn, signInWithPasskey, messages, client } = useAuth();
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [error, setError] = useState(null);
+	const [loading, setLoading] = useState(false);
+	const handleSubmit = async (event) => {
+		event.preventDefault();
+		setError(null);
+		setLoading(true);
+		try {
+			if ((await signIn({
+				email,
+				password
+			})).status === "authenticated") {
+				onSuccess?.();
+				redirectAfterSuccess(redirectTo);
+			}
+		} catch (cause) {
+			setError(getErrorMessage(cause, messages));
+		} finally {
+			setLoading(false);
+		}
+	};
+	const handlePasskey = async () => {
+		setError(null);
+		setLoading(true);
+		try {
+			if ((await signInWithPasskey()).status === "authenticated") {
+				onSuccess?.();
+				redirectAfterSuccess(redirectTo);
+			}
+		} catch (cause) {
+			setError(getErrorMessage(cause, messages));
+		} finally {
+			setLoading(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		className: `puzzle-auth ${className ?? ""}`,
+		children: [
+			/* @__PURE__ */ jsx("header", {
+				className: "puzzle-auth__header",
+				children: /* @__PURE__ */ jsx("h1", { children: messages.signIn })
+			}),
+			error && /* @__PURE__ */ jsx(Alert, {
+				severity: "error",
+				children: error
+			}),
+			/* @__PURE__ */ jsxs("form", {
+				className: "puzzle-auth__form",
+				onSubmit: handleSubmit,
+				noValidate: true,
+				children: [
+					/* @__PURE__ */ jsx(FormField, {
+						label: messages.email,
+						required: true,
+						controlId: "puzzle-auth-email",
+						children: /* @__PURE__ */ jsx(TextInput, {
+							type: "email",
+							name: "email",
+							autoComplete: "email",
+							value: email,
+							onChange: (event) => setEmail(event.currentTarget.value),
+							required: true,
+							disabled: loading
+						})
+					}),
+					/* @__PURE__ */ jsx(FormField, {
+						label: messages.password,
+						required: true,
+						controlId: "puzzle-auth-password",
+						children: /* @__PURE__ */ jsx(TextInput, {
+							type: "password",
+							name: "password",
+							autoComplete: "current-password",
+							value: password,
+							onChange: (event) => setPassword(event.currentTarget.value),
+							required: true,
+							disabled: loading
+						})
+					}),
+					onForgotPassword && /* @__PURE__ */ jsx("button", {
+						className: "puzzle-auth__text-button",
+						type: "button",
+						onClick: onForgotPassword,
+						children: messages.forgotPassword
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						fullWidth: true,
+						loading,
+						disabled: !email.trim() || !password,
+						children: loading ? messages.signingIn : messages.submit
+					})
+				]
+			}),
+			client.isPasskeySupported() && /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				fullWidth: true,
+				disabled: loading,
+				onClick: handlePasskey,
+				children: messages.usePasskey
+			}),
+			onSignUp && /* @__PURE__ */ jsxs("footer", {
+				className: "puzzle-auth__footer",
+				children: [/* @__PURE__ */ jsx("span", { children: messages.noAccount }), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "puzzle-auth__text-button",
+					onClick: onSignUp,
+					children: messages.createAccount
+				})]
+			})
+		]
+	});
+};
+const SignUpForm = ({ className, redirectTo, onSuccess, onSignIn }) => {
+	const { signUp, messages } = useAuth();
+	const [name, setName] = useState("");
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [confirmation, setConfirmation] = useState("");
+	const [error, setError] = useState(null);
+	const [loading, setLoading] = useState(false);
+	const handleSubmit = async (event) => {
+		event.preventDefault();
+		setError(null);
+		if (password !== confirmation) {
+			setError(messages.passwordMismatch);
+			return;
+		}
+		if (!password) {
+			setError(messages.passwordRequired);
+			return;
+		}
+		setLoading(true);
+		try {
+			if ((await signUp({
+				name: name.trim() || null,
+				email,
+				password
+			})).status === "authenticated") {
+				onSuccess?.();
+				redirectAfterSuccess(redirectTo);
+			}
+		} catch (cause) {
+			setError(getErrorMessage(cause, messages));
+		} finally {
+			setLoading(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		className: `puzzle-auth ${className ?? ""}`,
+		children: [
+			/* @__PURE__ */ jsx("header", {
+				className: "puzzle-auth__header",
+				children: /* @__PURE__ */ jsx("h1", { children: messages.signUp })
+			}),
+			error && /* @__PURE__ */ jsx(Alert, {
+				severity: "error",
+				children: error
+			}),
+			/* @__PURE__ */ jsxs("form", {
+				className: "puzzle-auth__form",
+				onSubmit: handleSubmit,
+				noValidate: true,
+				children: [
+					/* @__PURE__ */ jsx(FormField, {
+						label: messages.name,
+						controlId: "puzzle-auth-name",
+						children: /* @__PURE__ */ jsx(TextInput, {
+							name: "name",
+							autoComplete: "name",
+							value: name,
+							onChange: (event) => setName(event.currentTarget.value),
+							disabled: loading
+						})
+					}),
+					/* @__PURE__ */ jsx(FormField, {
+						label: messages.email,
+						required: true,
+						controlId: "puzzle-auth-signup-email",
+						children: /* @__PURE__ */ jsx(TextInput, {
+							type: "email",
+							name: "email",
+							autoComplete: "email",
+							value: email,
+							onChange: (event) => setEmail(event.currentTarget.value),
+							required: true,
+							disabled: loading
+						})
+					}),
+					/* @__PURE__ */ jsx(FormField, {
+						label: messages.password,
+						required: true,
+						controlId: "puzzle-auth-signup-password",
+						children: /* @__PURE__ */ jsx(TextInput, {
+							type: "password",
+							name: "new-password",
+							autoComplete: "new-password",
+							value: password,
+							onChange: (event) => setPassword(event.currentTarget.value),
+							required: true,
+							disabled: loading
+						})
+					}),
+					/* @__PURE__ */ jsx(FormField, {
+						label: messages.confirmPassword,
+						required: true,
+						controlId: "puzzle-auth-confirm-password",
+						children: /* @__PURE__ */ jsx(TextInput, {
+							type: "password",
+							name: "confirm-password",
+							autoComplete: "new-password",
+							value: confirmation,
+							onChange: (event) => setConfirmation(event.currentTarget.value),
+							required: true,
+							disabled: loading
+						})
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						fullWidth: true,
+						loading,
+						disabled: !email.trim() || !password || !confirmation,
+						children: loading ? messages.signingUp : messages.createAccount
+					})
+				]
+			}),
+			onSignIn && /* @__PURE__ */ jsxs("footer", {
+				className: "puzzle-auth__footer",
+				children: [/* @__PURE__ */ jsx("span", { children: messages.existingAccount }), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "puzzle-auth__text-button",
+					onClick: onSignIn,
+					children: messages.signIn
+				})]
+			})
+		]
+	});
+};
+const MfaChallengeForm = ({ className, redirectTo, onSuccess }) => {
+	const { snapshot, verifyMfaTotp, verifyMfaRecoveryCode, verifyMfaWithPasskey, client, messages } = useAuth();
+	const [code, setCode] = useState("");
+	const [recoveryMode, setRecoveryMode] = useState(false);
+	const [error, setError] = useState(null);
+	const [loading, setLoading] = useState(false);
+	const finish = (result) => {
+		if (result.status === "authenticated") {
+			onSuccess?.();
+			redirectAfterSuccess(redirectTo);
+		}
+	};
+	const handleSubmit = async (event) => {
+		event.preventDefault();
+		setError(null);
+		setLoading(true);
+		try {
+			const result = recoveryMode ? await verifyMfaRecoveryCode(code) : await verifyMfaTotp(code);
+			finish(result);
+		} catch (cause) {
+			setError(getErrorMessage(cause, messages));
+		} finally {
+			setLoading(false);
+		}
+	};
+	const handlePasskey = async () => {
+		setError(null);
+		setLoading(true);
+		try {
+			finish(await verifyMfaWithPasskey());
+		} catch (cause) {
+			setError(getErrorMessage(cause, messages));
+		} finally {
+			setLoading(false);
+		}
+	};
+	if (snapshot.status !== "mfa-pending" && snapshot.status !== "step-up-pending") return null;
+	const availableFactors = snapshot.mfa?.availableFactors;
+	return /* @__PURE__ */ jsxs("section", {
+		className: `puzzle-auth ${className ?? ""}`,
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "puzzle-auth__header",
+				children: [/* @__PURE__ */ jsx("h1", { children: messages.mfaTitle }), /* @__PURE__ */ jsx("p", { children: messages.mfaDescription })]
+			}),
+			error && /* @__PURE__ */ jsx(Alert, {
+				severity: "error",
+				children: error
+			}),
+			/* @__PURE__ */ jsxs("form", {
+				className: "puzzle-auth__form",
+				onSubmit: handleSubmit,
+				noValidate: true,
+				children: [/* @__PURE__ */ jsx(FormField, {
+					label: recoveryMode ? messages.recoveryCode : messages.verificationCode,
+					required: true,
+					controlId: "puzzle-auth-mfa-code",
+					children: /* @__PURE__ */ jsx(TextInput, {
+						name: "code",
+						type: "text",
+						autoComplete: "one-time-code",
+						value: code,
+						onChange: (event) => setCode(event.currentTarget.value),
+						required: true,
+						disabled: loading
+					})
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					fullWidth: true,
+					loading,
+					disabled: !code.trim(),
+					children: loading ? messages.verifying : messages.verify
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "puzzle-auth__actions",
+				children: [availableFactors?.includes("recovery-code") && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "puzzle-auth__text-button",
+					onClick: () => {
+						setRecoveryMode((current) => !current);
+						setCode("");
+						setError(null);
+					},
+					children: recoveryMode ? messages.useAuthenticator : messages.useRecoveryCode
+				}), availableFactors?.includes("passkey") && client.isPasskeySupported() && /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					fullWidth: true,
+					disabled: loading,
+					onClick: handlePasskey,
+					children: messages.usePasskey
+				})]
+			})
+		]
+	});
+};
+const AuthScreen = ({ mode = "sign-in", className, redirectTo, onSuccess, onForgotPassword, children }) => {
+	const { snapshot, messages, signOut } = useAuth();
+	if (snapshot.status === "loading") return /* @__PURE__ */ jsx("div", {
+		className: `puzzle-auth ${className ?? ""}`,
+		role: "status",
+		"aria-live": "polite",
+		children: messages.loading
+	});
+	if (snapshot.status === "mfa-pending" || snapshot.status === "step-up-pending") return /* @__PURE__ */ jsx(MfaChallengeForm, {
+		className,
+		redirectTo,
+		onSuccess
+	});
+	if (snapshot.status === "authenticated") return /* @__PURE__ */ jsxs("section", {
+		className: `puzzle-auth ${className ?? ""}`,
+		children: [children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", { children: messages.authenticated }), snapshot.user && /* @__PURE__ */ jsx("p", { children: snapshot.user.email })] }), /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			onClick: () => void signOut(),
+			children: messages.signOut
+		})]
+	});
+	if (snapshot.status === "mfa-enrollment-required" || snapshot.status === "mfa-enrollment-pending") return /* @__PURE__ */ jsx(RequiredMfaEnrollment, { className });
+	return mode === "sign-up" ? /* @__PURE__ */ jsx(SignUpForm, {
+		className,
+		redirectTo,
+		onSuccess
+	}) : /* @__PURE__ */ jsx(SignInForm, {
+		className,
+		redirectTo,
+		onSuccess,
+		onForgotPassword
+	});
+};
+const MfaSettings = ({ className }) => {
+	const { client, messages } = useAuth();
+	const [factors, setFactors] = useState(null);
+	const [enrollment, setEnrollment] = useState(null);
+	const [recoveryCodes, setRecoveryCodes] = useState([]);
+	const [password, setPassword] = useState("");
+	const [code, setCode] = useState("");
+	const [error, setError] = useState(null);
+	const [loading, setLoading] = useState(false);
+	const loadFactors = useCallback(async () => {
+		setFactors(await client.listMfaFactors());
+	}, [client]);
+	useEffect(() => {
+		loadFactors().catch((cause) => {
+			setError(cause instanceof Error ? cause.message : messages.unexpectedError);
+		});
+	}, [loadFactors, messages.unexpectedError]);
+	const beginTotp = async () => {
+		setError(null);
+		setLoading(true);
+		try {
+			setEnrollment(await client.beginTotpEnrollment(password));
+			setPassword("");
+		} catch (cause) {
+			setError(getErrorMessage(cause, messages));
+		} finally {
+			setLoading(false);
+		}
+	};
+	const finishTotp = async (event) => {
+		event.preventDefault();
+		if (!enrollment) return;
+		setError(null);
+		setLoading(true);
+		try {
+			const result = await client.verifyTotpEnrollment(enrollment.factorId, code);
+			setRecoveryCodes(result.recoveryCodes);
+			setEnrollment(null);
+			setCode("");
+			await loadFactors();
+		} catch (cause) {
+			setError(getErrorMessage(cause, messages));
+		} finally {
+			setLoading(false);
+		}
+	};
+	const addPasskey = async () => {
+		setError(null);
+		setLoading(true);
+		try {
+			const result = await client.registerPasskey(password);
+			setRecoveryCodes(result.recoveryCodes);
+			setPassword("");
+			await loadFactors();
+		} catch (cause) {
+			setError(getErrorMessage(cause, messages));
+		} finally {
+			setLoading(false);
+		}
+	};
+	const removeFactor = async (factorId) => {
+		setError(null);
+		setLoading(true);
+		try {
+			await client.removeMfaFactor(factorId, password);
+			setPassword("");
+			await loadFactors();
+		} catch (cause) {
+			setError(getErrorMessage(cause, messages));
+		} finally {
+			setLoading(false);
+		}
+	};
+	const regenerateCodes = async () => {
+		setError(null);
+		setLoading(true);
+		try {
+			const result = await client.regenerateRecoveryCodes(password);
+			setRecoveryCodes(result.recoveryCodes);
+			setPassword("");
+			await loadFactors();
+		} catch (cause) {
+			setError(getErrorMessage(cause, messages));
+		} finally {
+			setLoading(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		className: `puzzle-auth puzzle-auth--settings ${className ?? ""}`,
+		children: [
+			/* @__PURE__ */ jsx("h2", { children: messages.mfaSettings }),
+			error && /* @__PURE__ */ jsx(Alert, {
+				severity: "error",
+				children: error
+			}),
+			factors && /* @__PURE__ */ jsx("ul", {
+				className: "puzzle-auth__factor-list",
+				children: factors.factors.map((factor) => /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: factor.label }), /* @__PURE__ */ jsx("span", { children: factor.type })] }), /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "sm",
+					disabled: loading,
+					onClick: () => void removeFactor(factor.id),
+					children: messages.removeFactor
+				})] }, factor.id))
+			}),
+			!enrollment && /* @__PURE__ */ jsx(FormField, {
+				label: messages.currentPassword,
+				controlId: "puzzle-auth-settings-password",
+				children: /* @__PURE__ */ jsx(TextInput, {
+					type: "password",
+					autoComplete: "current-password",
+					value: password,
+					onChange: (event) => setPassword(event.currentTarget.value),
+					disabled: loading
+				})
+			}),
+			enrollment ? /* @__PURE__ */ jsxs("form", {
+				className: "puzzle-auth__form",
+				onSubmit: finishTotp,
+				children: [
+					/* @__PURE__ */ jsx(FormField, {
+						label: messages.totpSecret,
+						children: /* @__PURE__ */ jsx(TextInput, {
+							readOnly: true,
+							value: enrollment.secret,
+							"aria-label": messages.totpSecret
+						})
+					}),
+					/* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("a", {
+						href: enrollment.otpauthUrl,
+						children: "Open authenticator application"
+					}) }),
+					/* @__PURE__ */ jsx(FormField, {
+						label: messages.verificationCode,
+						controlId: "puzzle-auth-enrollment-code",
+						children: /* @__PURE__ */ jsx(TextInput, {
+							value: code,
+							autoComplete: "one-time-code",
+							onChange: (event) => setCode(event.currentTarget.value),
+							required: true
+						})
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						loading,
+						disabled: !code.trim(),
+						children: messages.verifyTotp
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						disabled: loading,
+						onClick: () => setEnrollment(null),
+						children: messages.cancel
+					})
+				]
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "puzzle-auth__actions",
+				children: [
+					/* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						disabled: loading || !password,
+						onClick: () => void beginTotp(),
+						children: messages.addTotp
+					}),
+					client.isPasskeySupported() && /* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						disabled: loading || !password,
+						onClick: () => void addPasskey(),
+						children: messages.addPasskey
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						disabled: loading || !password,
+						onClick: () => void regenerateCodes(),
+						children: messages.recoveryCodes
+					})
+				]
+			}),
+			recoveryCodes.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "puzzle-auth__recovery-codes",
+				children: [/* @__PURE__ */ jsx(Alert, {
+					severity: "warning",
+					title: messages.recoveryCodes,
+					children: messages.saveRecoveryCodes
+				}), /* @__PURE__ */ jsx("ul", { children: recoveryCodes.map((recoveryCode) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("code", { children: recoveryCode }) }, recoveryCode)) })]
+			})
+		]
+	});
+};
+export { AuthProvider, AuthScreen, MfaChallengeForm, MfaSettings, RequiredMfaEnrollment, SignInForm, SignUpForm, useAuth, useSession, useUser };
+
+//# sourceMappingURL=react.js.map