@puzzle-ui/fullstack 0.0.0-stage → 0.5.1

package/dist/auth/client/react.cjs

@@ -0,0 +1,859 @@
+"use client";
+const require_auth_client_index = require("./index.cjs");
+const require_messages = require("./messages.cjs");
+;/* empty css           */
+let react = require("react");
+let _puzzle_ui_ui = require("@puzzle-ui/ui");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/auth/client/react.tsx
+const RequiredMfaEnrollment = ({ className }) => {
+	const { client, snapshot, messages, refresh } = useAuth();
+	const [enrollment, setEnrollment] = (0, react.useState)(null);
+	const [code, setCode] = (0, react.useState)("");
+	const [recoveryCodes, setRecoveryCodes] = (0, react.useState)([]);
+	const [loading, setLoading] = (0, react.useState)(false);
+	const [error, setError] = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: `puzzle-auth ${className ?? ""}`,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+				className: "puzzle-auth__header",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", { children: messages.mfaTitle }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: "Additional authentication setup is required before you can continue." })]
+			}),
+			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.Alert, {
+				severity: "error",
+				children: error
+			}),
+			recoveryCodes.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "puzzle-auth__recovery-codes",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.Alert, {
+					severity: "success",
+					children: messages.saveRecoveryCodes
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", { children: recoveryCodes.map((value) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: value }) }, value)) })]
+			}) : enrollment ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+				className: "puzzle-auth__form",
+				onSubmit: handleTotpFinish,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.FormField, {
+						label: messages.totpSecret,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.TextInput, {
+							value: enrollment.secret,
+							readOnly: true,
+							"aria-label": messages.totpSecret
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+						href: enrollment.otpauthUrl,
+						children: "Open authenticator application"
+					}) }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.FormField, {
+						label: messages.verificationCode,
+						required: true,
+						controlId: "puzzle-auth-required-totp",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.TextInput, {
+							value: code,
+							autoComplete: "one-time-code",
+							onChange: (event) => setCode(event.currentTarget.value),
+							required: true
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.Button, {
+						type: "submit",
+						loading,
+						disabled: !code.trim(),
+						children: messages.verifyTotp
+					})
+				]
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "puzzle-auth__actions",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.Button, {
+					disabled: loading,
+					loading,
+					onClick: () => void handleTotpStart(),
+					children: messages.addTotp
+				}), client.isPasskeySupported() && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.Button, {
+					variant: "outline",
+					disabled: loading,
+					onClick: () => void handlePasskey(),
+					children: messages.addPasskey
+				})]
+			})
+		]
+	});
+};
+const loadingSnapshot = {
+	status: "loading",
+	user: null
+};
+const AuthContext = (0, react.createContext)(null);
+const AuthProvider = ({ children, client: suppliedClient, options, initialSnapshot = loadingSnapshot, locale: localeInput, messages: messageOverrides, onAuthStateChange }) => {
+	const [createdClient] = (0, react.useState)(() => require_auth_client_index.createAuthClient(options));
+	const client = suppliedClient ?? createdClient;
+	const locale = require_messages.getAuthLocale(localeInput);
+	const resolvedMessages = (0, react.useMemo)(() => require_messages.resolveAuthMessages(locale, void 0, messageOverrides), [locale, messageOverrides]);
+	const [snapshot, setSnapshot] = (0, react.useState)(initialSnapshot);
+	const [error, setError] = (0, react.useState)(null);
+	const publish = (0, react.useCallback)((next) => {
+		setSnapshot(next);
+		setError(null);
+		onAuthStateChange?.(next);
+	}, [onAuthStateChange]);
+	const refresh = (0, react.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
+	]);
+	(0, react.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 = (0, react.useCallback)(async (input) => {
+		const next = await client.signIn(input);
+		publish(next);
+		return next;
+	}, [client, publish]);
+	const signUp = (0, react.useCallback)(async (input) => {
+		const next = await client.register(input);
+		publish(next);
+		return next;
+	}, [client, publish]);
+	const signOut = (0, react.useCallback)(async () => {
+		await client.signOut();
+		publish({
+			status: "unauthenticated",
+			user: null
+		});
+	}, [client, publish]);
+	const verifyMfaTotp = (0, react.useCallback)(async (code) => {
+		const next = await client.verifyMfaTotp(code);
+		publish(next);
+		return next;
+	}, [client, publish]);
+	const verifyMfaRecoveryCode = (0, react.useCallback)(async (code) => {
+		const next = await client.verifyMfaRecoveryCode(code);
+		publish(next);
+		return next;
+	}, [client, publish]);
+	const signInWithPasskey = (0, react.useCallback)(async () => {
+		const next = await client.signInWithPasskey();
+		publish(next);
+		return next;
+	}, [client, publish]);
+	const verifyMfaWithPasskey = (0, react.useCallback)(async () => {
+		const next = await client.verifyMfaWithPasskey();
+		publish(next);
+		return next;
+	}, [client, publish]);
+	const requestEmailVerification = (0, react.useCallback)(() => client.requestEmailVerification(), [client]);
+	const verifyEmail = (0, react.useCallback)(async (token) => {
+		const result = await client.verifyEmail(token);
+		publish(await client.getSnapshot());
+		return result;
+	}, [client, publish]);
+	const requestPasswordReset = (0, react.useCallback)((email) => client.requestPasswordReset(email), [client]);
+	const resetPassword = (0, react.useCallback)((token, newPassword) => client.resetPassword(token, newPassword), [client]);
+	const changePassword = (0, react.useCallback)(async (currentPassword, newPassword) => {
+		const result = await client.changePassword(currentPassword, newPassword);
+		publish(await client.getSnapshot());
+		return result;
+	}, [client, publish]);
+	const value = (0, react.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__ */ (0, react_jsx_runtime.jsx)(AuthContext.Provider, {
+		value,
+		children
+	});
+};
+const useAuth = () => {
+	const context = (0, react.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] = (0, react.useState)("");
+	const [password, setPassword] = (0, react.useState)("");
+	const [error, setError] = (0, react.useState)(null);
+	const [loading, setLoading] = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: `puzzle-auth ${className ?? ""}`,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+				className: "puzzle-auth__header",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", { children: messages.signIn })
+			}),
+			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.Alert, {
+				severity: "error",
+				children: error
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+				className: "puzzle-auth__form",
+				onSubmit: handleSubmit,
+				noValidate: true,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.FormField, {
+						label: messages.email,
+						required: true,
+						controlId: "puzzle-auth-email",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.TextInput, {
+							type: "email",
+							name: "email",
+							autoComplete: "email",
+							value: email,
+							onChange: (event) => setEmail(event.currentTarget.value),
+							required: true,
+							disabled: loading
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.FormField, {
+						label: messages.password,
+						required: true,
+						controlId: "puzzle-auth-password",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.TextInput, {
+							type: "password",
+							name: "password",
+							autoComplete: "current-password",
+							value: password,
+							onChange: (event) => setPassword(event.currentTarget.value),
+							required: true,
+							disabled: loading
+						})
+					}),
+					onForgotPassword && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						className: "puzzle-auth__text-button",
+						type: "button",
+						onClick: onForgotPassword,
+						children: messages.forgotPassword
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.Button, {
+						type: "submit",
+						fullWidth: true,
+						loading,
+						disabled: !email.trim() || !password,
+						children: loading ? messages.signingIn : messages.submit
+					})
+				]
+			}),
+			client.isPasskeySupported() && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.Button, {
+				variant: "outline",
+				fullWidth: true,
+				disabled: loading,
+				onClick: handlePasskey,
+				children: messages.usePasskey
+			}),
+			onSignUp && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("footer", {
+				className: "puzzle-auth__footer",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: messages.noAccount }), /* @__PURE__ */ (0, react_jsx_runtime.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] = (0, react.useState)("");
+	const [email, setEmail] = (0, react.useState)("");
+	const [password, setPassword] = (0, react.useState)("");
+	const [confirmation, setConfirmation] = (0, react.useState)("");
+	const [error, setError] = (0, react.useState)(null);
+	const [loading, setLoading] = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: `puzzle-auth ${className ?? ""}`,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+				className: "puzzle-auth__header",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", { children: messages.signUp })
+			}),
+			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.Alert, {
+				severity: "error",
+				children: error
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+				className: "puzzle-auth__form",
+				onSubmit: handleSubmit,
+				noValidate: true,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.FormField, {
+						label: messages.name,
+						controlId: "puzzle-auth-name",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.TextInput, {
+							name: "name",
+							autoComplete: "name",
+							value: name,
+							onChange: (event) => setName(event.currentTarget.value),
+							disabled: loading
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.FormField, {
+						label: messages.email,
+						required: true,
+						controlId: "puzzle-auth-signup-email",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.TextInput, {
+							type: "email",
+							name: "email",
+							autoComplete: "email",
+							value: email,
+							onChange: (event) => setEmail(event.currentTarget.value),
+							required: true,
+							disabled: loading
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.FormField, {
+						label: messages.password,
+						required: true,
+						controlId: "puzzle-auth-signup-password",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.TextInput, {
+							type: "password",
+							name: "new-password",
+							autoComplete: "new-password",
+							value: password,
+							onChange: (event) => setPassword(event.currentTarget.value),
+							required: true,
+							disabled: loading
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.FormField, {
+						label: messages.confirmPassword,
+						required: true,
+						controlId: "puzzle-auth-confirm-password",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.TextInput, {
+							type: "password",
+							name: "confirm-password",
+							autoComplete: "new-password",
+							value: confirmation,
+							onChange: (event) => setConfirmation(event.currentTarget.value),
+							required: true,
+							disabled: loading
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.Button, {
+						type: "submit",
+						fullWidth: true,
+						loading,
+						disabled: !email.trim() || !password || !confirmation,
+						children: loading ? messages.signingUp : messages.createAccount
+					})
+				]
+			}),
+			onSignIn && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("footer", {
+				className: "puzzle-auth__footer",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: messages.existingAccount }), /* @__PURE__ */ (0, react_jsx_runtime.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] = (0, react.useState)("");
+	const [recoveryMode, setRecoveryMode] = (0, react.useState)(false);
+	const [error, setError] = (0, react.useState)(null);
+	const [loading, setLoading] = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: `puzzle-auth ${className ?? ""}`,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+				className: "puzzle-auth__header",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", { children: messages.mfaTitle }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: messages.mfaDescription })]
+			}),
+			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.Alert, {
+				severity: "error",
+				children: error
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+				className: "puzzle-auth__form",
+				onSubmit: handleSubmit,
+				noValidate: true,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.FormField, {
+					label: recoveryMode ? messages.recoveryCode : messages.verificationCode,
+					required: true,
+					controlId: "puzzle-auth-mfa-code",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.TextInput, {
+						name: "code",
+						type: "text",
+						autoComplete: "one-time-code",
+						value: code,
+						onChange: (event) => setCode(event.currentTarget.value),
+						required: true,
+						disabled: loading
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.Button, {
+					type: "submit",
+					fullWidth: true,
+					loading,
+					disabled: !code.trim(),
+					children: loading ? messages.verifying : messages.verify
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "puzzle-auth__actions",
+				children: [availableFactors?.includes("recovery-code") && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(MfaChallengeForm, {
+		className,
+		redirectTo,
+		onSuccess
+	});
+	if (snapshot.status === "authenticated") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: `puzzle-auth ${className ?? ""}`,
+		children: [children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: messages.authenticated }), snapshot.user && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: snapshot.user.email })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.Button, {
+			variant: "outline",
+			onClick: () => void signOut(),
+			children: messages.signOut
+		})]
+	});
+	if (snapshot.status === "mfa-enrollment-required" || snapshot.status === "mfa-enrollment-pending") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RequiredMfaEnrollment, { className });
+	return mode === "sign-up" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SignUpForm, {
+		className,
+		redirectTo,
+		onSuccess
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SignInForm, {
+		className,
+		redirectTo,
+		onSuccess,
+		onForgotPassword
+	});
+};
+const MfaSettings = ({ className }) => {
+	const { client, messages } = useAuth();
+	const [factors, setFactors] = (0, react.useState)(null);
+	const [enrollment, setEnrollment] = (0, react.useState)(null);
+	const [recoveryCodes, setRecoveryCodes] = (0, react.useState)([]);
+	const [password, setPassword] = (0, react.useState)("");
+	const [code, setCode] = (0, react.useState)("");
+	const [error, setError] = (0, react.useState)(null);
+	const [loading, setLoading] = (0, react.useState)(false);
+	const loadFactors = (0, react.useCallback)(async () => {
+		setFactors(await client.listMfaFactors());
+	}, [client]);
+	(0, react.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__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: `puzzle-auth puzzle-auth--settings ${className ?? ""}`,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", { children: messages.mfaSettings }),
+			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.Alert, {
+				severity: "error",
+				children: error
+			}),
+			factors && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				className: "puzzle-auth__factor-list",
+				children: factors.factors.map((factor) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: factor.label }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: factor.type })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.Button, {
+					variant: "ghost",
+					size: "sm",
+					disabled: loading,
+					onClick: () => void removeFactor(factor.id),
+					children: messages.removeFactor
+				})] }, factor.id))
+			}),
+			!enrollment && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.FormField, {
+				label: messages.currentPassword,
+				controlId: "puzzle-auth-settings-password",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.TextInput, {
+					type: "password",
+					autoComplete: "current-password",
+					value: password,
+					onChange: (event) => setPassword(event.currentTarget.value),
+					disabled: loading
+				})
+			}),
+			enrollment ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+				className: "puzzle-auth__form",
+				onSubmit: finishTotp,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.FormField, {
+						label: messages.totpSecret,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.TextInput, {
+							readOnly: true,
+							value: enrollment.secret,
+							"aria-label": messages.totpSecret
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+						href: enrollment.otpauthUrl,
+						children: "Open authenticator application"
+					}) }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.FormField, {
+						label: messages.verificationCode,
+						controlId: "puzzle-auth-enrollment-code",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.TextInput, {
+							value: code,
+							autoComplete: "one-time-code",
+							onChange: (event) => setCode(event.currentTarget.value),
+							required: true
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.Button, {
+						type: "submit",
+						loading,
+						disabled: !code.trim(),
+						children: messages.verifyTotp
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.Button, {
+						variant: "ghost",
+						disabled: loading,
+						onClick: () => setEnrollment(null),
+						children: messages.cancel
+					})
+				]
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "puzzle-auth__actions",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.Button, {
+						variant: "outline",
+						disabled: loading || !password,
+						onClick: () => void beginTotp(),
+						children: messages.addTotp
+					}),
+					client.isPasskeySupported() && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.Button, {
+						variant: "outline",
+						disabled: loading || !password,
+						onClick: () => void addPasskey(),
+						children: messages.addPasskey
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.Button, {
+						variant: "ghost",
+						disabled: loading || !password,
+						onClick: () => void regenerateCodes(),
+						children: messages.recoveryCodes
+					})
+				]
+			}),
+			recoveryCodes.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "puzzle-auth__recovery-codes",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_ui.Alert, {
+					severity: "warning",
+					title: messages.recoveryCodes,
+					children: messages.saveRecoveryCodes
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", { children: recoveryCodes.map((recoveryCode) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: recoveryCode }) }, recoveryCode)) })]
+			})
+		]
+	});
+};
+exports.AuthProvider = AuthProvider;
+exports.AuthScreen = AuthScreen;
+exports.MfaChallengeForm = MfaChallengeForm;
+exports.MfaSettings = MfaSettings;
+exports.RequiredMfaEnrollment = RequiredMfaEnrollment;
+exports.SignInForm = SignInForm;
+exports.SignUpForm = SignUpForm;
+exports.useAuth = useAuth;
+exports.useSession = useSession;
+exports.useUser = useUser;
+
+//# sourceMappingURL=react.cjs.map