@protobase/ui 0.3.5 → 0.5.0

package/dist/auth/auth-messages.js

@@ -0,0 +1,48 @@
+//#region src/auth/auth-messages.ts
+const tooManyRequests = "Too many attempts. Wait a minute and try again.";
+const passkeyClosed = "The passkey prompt closed before it finished. Try again.";
+const messages = {
+	INVALID_EMAIL_OR_PASSWORD: "The email or password is not right.",
+	INVALID_PASSWORD: "The password is not right.",
+	INVALID_OTP: "The code is not right.",
+	OTP_EXPIRED: "The code has expired. Ask for a new one.",
+	TOO_MANY_ATTEMPTS: "Too many wrong codes. Ask for a new one.",
+	INVALID_CODE: "The code is not right.",
+	INVALID_BACKUP_CODE: "The backup code is not right, or was used before.",
+	TOO_MANY_ATTEMPTS_REQUEST_NEW_CODE: "Too many wrong codes. Sign in again.",
+	ACCOUNT_TEMPORARILY_LOCKED: "Too many wrong codes. Wait 15 minutes and try again.",
+	INVALID_TWO_FACTOR_COOKIE: "This sign-in took too long. Sign in again.",
+	AUTH_CANCELLED: passkeyClosed,
+	ERROR_CEREMONY_ABORTED: passkeyClosed,
+	REGISTRATION_CANCELLED: passkeyClosed,
+	PASSKEY_NOT_FOUND: "This passkey is not registered for an account here.",
+	AUTHENTICATION_FAILED: "The passkey could not be checked. Try again.",
+	PREVIOUSLY_REGISTERED: "This passkey is added already.",
+	ERROR_AUTHENTICATOR_PREVIOUSLY_REGISTERED: "This passkey is added already.",
+	SESSION_NOT_FRESH: "For this change, sign out and sign in again first."
+};
+const known = (error) => error.code ? messages[error.code] : void 0;
+/** Better Auth's error from a sign-in step or an account change, in words for the person at the keyboard. */
+const authMessage = (error) => known(error) ?? (error.status === 429 ? tooManyRequests : error.message);
+/** As `authMessage`, for the password form: any other 401 is a wrong email or password. */
+const signInMessage = (error) => known(error) ?? (error.status === 429 ? tooManyRequests : error.status === 401 ? messages.INVALID_EMAIL_OR_PASSWORD : error.message);
+const staffMessages = {
+	STAFF_PERMISSION_MISSING: "Your staff account has no permission to sign in as people here.",
+	STAFF_SIGN_IN_NOT_STRONG: "Sign in to your staff account with a passkey or a second step, then try again.",
+	STAFF_SIGN_IN_STALE: "Your staff sign-in is too old. Sign in to your staff account again.",
+	STAFF_SIGN_IN_EXPIRED: "This staff sign-in took too long or was used already. Start again.",
+	STAFF_SIGN_IN_FAILED: "The staff sign-in did not go through at the provider. Try again.",
+	STAFF_USER_UNAVAILABLE: "There is no account with this address, or it is disabled.",
+	STAFF_REASON_REQUIRED: "Say why you sign in as this person, in at least 10 characters.",
+	SIGN_IN_METHOD_FORBIDDEN: "Staff sign-in is turned off for this app.",
+	INVALID_CALLBACK_URL: "This page is not on an address the server trusts."
+};
+/** Why a staff sign-in did not go through, from the code it came back with or an `AuthError` of its start. */
+const staffSignInMessage = (failure) => {
+	const code = typeof failure === "string" ? failure : failure.code;
+	if (code && staffMessages[code]) return staffMessages[code];
+	if (typeof failure === "string") return "The staff sign-in did not go through. Try again.";
+	return failure.status === 429 ? tooManyRequests : failure.message;
+};
+//#endregion
+export { authMessage, signInMessage, staffSignInMessage };

package/dist/auth/auth-provider.js

@@ -1,6 +1,6 @@
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { jsx } from "react/jsx-runtime";
 import { createAuthSession } from "@protobase/client";
+import { jsx } from "react/jsx-runtime";
 //#region src/auth/auth-provider.tsx
 const AuthContext = createContext(null);
 const useAuth = () => {
@@ -11,45 +11,67 @@ const useAuth = () => {
 /** Finds out whether the server has a login and who is signed in, and keeps that state for the app. */
 const AuthProvider = ({ session: given, children }) => {
 	const [state, setState] = useState({ kind: "loading" });
+	const [signInMethods, setSignInMethods] = useState(["password"]);
 	const [passwordReset, setPasswordReset] = useState(false);
 	const [socialProviders, setSocialProviders] = useState([]);
+	const [staffSignIn, setStaffSignIn] = useState();
 	const markSignedOut = useCallback(() => setState((current) => current.kind === "signed-in" ? { kind: "signed-out" } : current), []);
 	const signedOut = useRef(markSignedOut);
 	signedOut.current = markSignedOut;
 	const session = useMemo(() => given ?? createAuthSession({ onSignedOut: () => signedOut.current() }), [given]);
+	const enter = useCallback(async (user) => {
+		const [{ missing }, staff] = await Promise.all([session.account.signInMethods(), session.staff.current()]);
+		setState(missing.length > 0 ? {
+			kind: "setup-required",
+			user,
+			missing
+		} : {
+			kind: "signed-in",
+			user,
+			...staff && { staff }
+		});
+	}, [session]);
+	const finish = useCallback(async (result) => result.kind === "two-factor" ? setState({
+		kind: "two-factor",
+		methods: result.methods
+	}) : enter(result.user), [enter]);
 	const recheck = useCallback(() => {
 		setState({ kind: "loading" });
 		session.status().then(async (status) => {
+			setSignInMethods(status.signInMethods);
 			setPasswordReset(status.passwordReset);
 			setSocialProviders(status.socialProviders);
+			setStaffSignIn(status.staffSignIn);
 			if (status.needsAdmin) return setState({ kind: "needs-admin" });
 			const user = await session.session();
-			setState(user ? {
-				kind: "signed-in",
-				user
-			} : { kind: "signed-out" });
-		}, (error) => setState({
+			return user ? enter(user) : setState({ kind: "signed-out" });
+		}).catch((error) => setState({
 			kind: "error",
 			message: error instanceof Error ? error.message : "The server did not answer"
 		}));
-	}, [session]);
+	}, [session, enter]);
 	useEffect(recheck, [recheck]);
 	const api = useMemo(() => ({
 		state,
 		session,
+		signInMethods,
 		passwordReset,
 		socialProviders,
+		staffSignIn,
 		markSignedOut,
 		recheck,
-		signIn: async (email, password) => {
-			setState({
-				kind: "signed-in",
-				user: await session.signIn(email, password)
-			});
-		},
+		signIn: async (email, password) => finish(await session.signIn(email, password)),
+		sendSignInCode: (email) => session.sendSignInCode(email),
+		signInWithCode: async (email, code) => finish(await session.signInWithCode(email, code)),
+		signInWithPasskey: async () => enter(await session.signInWithPasskey()),
+		verifyTwoFactor: async (input) => enter(await session.verifyTwoFactor(input)),
 		signInSocial: async (provider) => {
 			window.location.assign(await session.signInSocial(provider, window.location.href));
 		},
+		stopStaffSession: async () => {
+			await session.staff.stop();
+			setState({ kind: "signed-out" });
+		},
 		signOut: async () => {
 			await session.signOut();
 			setState({ kind: "signed-out" });
@@ -57,10 +79,14 @@ const AuthProvider = ({ session: given, children }) => {
 	}), [
 		state,
 		session,
+		signInMethods,
 		passwordReset,
 		socialProviders,
+		staffSignIn,
 		markSignedOut,
-		recheck
+		recheck,
+		finish,
+		enter
 	]);
 	return /* @__PURE__ */ jsx(AuthContext.Provider, {
 		value: api,

package/dist/auth/code-input.js

@@ -0,0 +1,17 @@
+import { cn } from "../lib/cn.js";
+import { Input } from "../primitives/input.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/auth/code-input.tsx
+/** A 6-digit one-time code field: digits on phone keyboards, filled from the mail app where the system offers it. */
+const CodeInput = ({ className, ...rest }) => /* @__PURE__ */ jsx(Input, {
+	type: "text",
+	inputMode: "numeric",
+	autoComplete: "one-time-code",
+	pattern: "[0-9]{6}",
+	maxLength: 6,
+	spellCheck: false,
+	className: cn("min-h-6 font-mono tracking-[0.3em]", className),
+	...rest
+});
+//#endregion
+export { CodeInput };

package/dist/auth/email-code-form.js

@@ -0,0 +1,81 @@
+import { Button } from "../primitives/button.js";
+import { CodeInput } from "./code-input.js";
+import { AuthLayout } from "./auth-layout.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/auth/email-code-form.tsx
+/** The second half of signing in with an emailed code: the code from the email. */
+const EmailCodeForm = ({ email, onSubmit, onResend, onBack, busy, error, notice }) => {
+	const [code, setCode] = useState("");
+	return /* @__PURE__ */ jsxs(AuthLayout, {
+		title: "Check your email",
+		description: "Enter the code we sent to sign in.",
+		children: [
+			/* @__PURE__ */ jsxs("p", {
+				className: "mb-4 text-[13px] text-muted-foreground",
+				children: [
+					"If ",
+					/* @__PURE__ */ jsx("span", {
+						className: "font-medium text-foreground",
+						children: email
+					}),
+					" has an account, a 6-digit code is on its way. It works for 5 minutes, once."
+				]
+			}),
+			notice && /* @__PURE__ */ jsx("p", {
+				role: "status",
+				className: "mb-4 rounded-md bg-success-soft px-3 py-2 text-xs font-medium text-success-text",
+				children: notice
+			}),
+			/* @__PURE__ */ jsxs("form", {
+				className: "flex flex-col gap-4",
+				onSubmit: (event) => {
+					event.preventDefault();
+					onSubmit(code.trim());
+				},
+				children: [
+					/* @__PURE__ */ jsxs("label", {
+						className: "flex flex-col gap-1.5 text-[13px] font-medium",
+						children: ["Code", /* @__PURE__ */ jsx(CodeInput, {
+							name: "code",
+							required: true,
+							autoFocus: true,
+							value: code,
+							invalid: Boolean(error),
+							onChange: (event) => setCode(event.target.value)
+						})]
+					}),
+					error && /* @__PURE__ */ jsx("p", {
+						role: "alert",
+						className: "text-xs font-medium text-danger-text",
+						children: error
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "primary",
+						type: "submit",
+						loading: busy,
+						className: "min-h-10",
+						children: "Sign in"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex justify-between gap-2",
+						children: [/* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							onClick: onBack,
+							className: "min-h-10",
+							children: "Back to sign in"
+						}), /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							onClick: onResend,
+							disabled: busy,
+							className: "min-h-10",
+							children: "Send a new code"
+						})]
+					})
+				]
+			})
+		]
+	});
+};
+//#endregion
+export { EmailCodeForm };

package/dist/auth/email-code-page.js

@@ -0,0 +1,40 @@
+import { authMessage } from "./auth-messages.js";
+import { useAuth } from "./auth-provider.js";
+import { EmailCodeForm } from "./email-code-form.js";
+import { useState } from "react";
+import { AuthError } from "@protobase/client";
+import { jsx } from "react/jsx-runtime";
+//#region src/auth/email-code-page.tsx
+/** Signs in with the code emailed to `email`; the account's second step follows when it has one. */
+const EmailCodePage = ({ email, onBack }) => {
+	const { signInWithCode, sendSignInCode } = useAuth();
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState();
+	const [notice, setNotice] = useState();
+	const attempt = async (step) => {
+		setBusy(true);
+		setError(void 0);
+		setNotice(void 0);
+		try {
+			await step();
+		} catch (failure) {
+			if (!(failure instanceof AuthError)) throw failure;
+			setError(authMessage(failure));
+		}
+		setBusy(false);
+	};
+	return /* @__PURE__ */ jsx(EmailCodeForm, {
+		email,
+		busy,
+		error,
+		notice,
+		onBack,
+		onSubmit: (code) => void attempt(() => signInWithCode(email, code)),
+		onResend: () => void attempt(async () => {
+			await sendSignInCode(email);
+			setNotice("A new code is on its way. Only the newest one works.");
+		})
+	});
+};
+//#endregion
+export { EmailCodePage };

package/dist/auth/first-run-page.js

@@ -1,8 +1,8 @@
 import { Button } from "../primitives/button.js";
 import { AuthLayout } from "./auth-layout.js";
 import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, Copy } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth/first-run-page.tsx
 const createAdminCommand = "protobase users create you@example.com";
 /**

package/dist/auth/forgot-password-page.js

@@ -2,8 +2,8 @@ import { useAuth } from "./auth-provider.js";
 import { ForgotPasswordForm } from "./forgot-password-form.js";
 import { resetLinkTarget } from "./reset-link.js";
 import { useState } from "react";
-import { jsx } from "react/jsx-runtime";
 import { AuthError } from "@protobase/client";
+import { jsx } from "react/jsx-runtime";
 //#region src/auth/forgot-password-page.tsx
 /** Asks the server to email a reset link that leads back to this page. */
 const ForgotPasswordPage = ({ onBack }) => {

package/dist/auth/reset-password-page.js

@@ -1,8 +1,8 @@
 import { useAuth } from "./auth-provider.js";
 import { ResetPasswordForm } from "./reset-password-form.js";
 import { useState } from "react";
-import { jsx } from "react/jsx-runtime";
 import { AuthError } from "@protobase/client";
+import { jsx } from "react/jsx-runtime";
 //#region src/auth/reset-password-page.tsx
 /** Better Auth's answers to a new password, in words for the person at the keyboard. */
 const resetPasswordMessage = (error) => {

package/dist/auth/setup-required-form.js

@@ -0,0 +1,43 @@
+import { Button } from "../primitives/button.js";
+import { TwoFactorSetup } from "../account/two-factor-setup.js";
+import { AuthLayout } from "./auth-layout.js";
+import { KeyRound } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/auth/setup-required-form.tsx
+const titles = {
+	twoFactor: "Turn on two-factor authentication",
+	passkey: "Add a passkey"
+};
+/** Shown after signing in while the account lacks something the sign-in policy requires; the app opens once it is set up. */
+const SetupRequiredForm = ({ step, twoFactor, onAddPasskey, busy, error, onSignOut }) => /* @__PURE__ */ jsxs(AuthLayout, {
+	title: titles[step],
+	description: "This app requires it for every account.",
+	children: [step === "twoFactor" ? /* @__PURE__ */ jsx(TwoFactorSetup, { ...twoFactor }) : /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-4",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "text-[13px] text-muted-foreground",
+				children: "A passkey signs you in with Face ID, Touch ID, Windows Hello, your phone or a security key. Your browser asks which one to use."
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "text-xs font-medium text-danger-text",
+				children: error
+			}),
+			/* @__PURE__ */ jsxs(Button, {
+				variant: "primary",
+				loading: busy,
+				onClick: onAddPasskey,
+				className: "min-h-10",
+				children: [/* @__PURE__ */ jsx(KeyRound, { className: "size-4" }), "Add a passkey"]
+			})
+		]
+	}), /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: onSignOut,
+		className: "mt-4 w-full text-center text-[13px] font-medium text-muted-foreground hover:underline",
+		children: "Sign out"
+	})]
+});
+//#endregion
+export { SetupRequiredForm };

package/dist/auth/setup-required-page.js

@@ -0,0 +1,51 @@
+import { Spinner } from "../primitives/spinner.js";
+import { authMessage } from "./auth-messages.js";
+import { useAuth } from "./auth-provider.js";
+import { SetupRequiredForm } from "./setup-required-form.js";
+import { useEffect, useState } from "react";
+import { AuthError } from "@protobase/client";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/auth/setup-required-page.tsx
+/** Sets up what the sign-in policy requires, one thing at a time, then reads the account again to open the app. */
+const SetupRequiredPage = ({ missing }) => {
+	const { session, recheck, signOut } = useAuth();
+	const [methods, setMethods] = useState();
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState();
+	useEffect(() => {
+		session.account.signInMethods().then(setMethods, (failure) => setError(failure instanceof AuthError ? authMessage(failure) : "Could not read your account"));
+	}, [session]);
+	const addPasskey = async () => {
+		setBusy(true);
+		setError(void 0);
+		try {
+			await session.account.addPasskey();
+			recheck();
+		} catch (failure) {
+			if (!(failure instanceof AuthError)) throw failure;
+			setError(authMessage(failure));
+			setBusy(false);
+		}
+	};
+	if (!methods && !error) return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full min-h-48 items-center justify-center gap-2 text-[13px] text-muted-foreground",
+		children: [/* @__PURE__ */ jsx(Spinner, {}), " Loading"]
+	});
+	return /* @__PURE__ */ jsx(SetupRequiredForm, {
+		step: missing[0],
+		busy,
+		error,
+		onAddPasskey: () => void addPasskey(),
+		onSignOut: () => void signOut(),
+		twoFactor: {
+			offerEmailedCodes: methods?.mail ?? false,
+			needsPassword: methods?.account.password ?? true,
+			onStartApp: (password) => session.account.startAuthenticatorApp(password),
+			onConfirmApp: (code) => session.account.confirmAuthenticatorApp(code),
+			onEmailedCodes: (password) => session.account.turnOnEmailedCodes(password),
+			onDone: recheck
+		}
+	});
+};
+//#endregion
+export { SetupRequiredPage };

package/dist/auth/sign-in-form.js

@@ -1,12 +1,29 @@
 import { Input } from "../primitives/input.js";
 import { Button } from "../primitives/button.js";
 import { AuthLayout } from "./auth-layout.js";
-import { useState } from "react";
+import { useRef, useState } from "react";
+import { KeyRound, Mail } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth/sign-in-form.tsx
-const SignInForm = ({ onSubmit, busy, error, workspace, notice, onForgotPassword, onContinueWithGitHub }) => {
+const Divider = () => /* @__PURE__ */ jsxs("div", {
+	className: "my-4 flex items-center gap-3 text-xs text-muted-foreground",
+	children: [
+		/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" }),
+		"or",
+		/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" })
+	]
+});
+const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["password"], onSendCode, onPasskey, onForgotPassword, onContinueWithGitHub }) => {
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
+	const emailInput = useRef(null);
+	const withPassword = methods.includes("password");
+	const withCode = methods.includes("emailCode") && onSendCode !== void 0;
+	const withPasskey = methods.includes("passkey") && onPasskey !== void 0;
+	const sendCode = () => {
+		if (!emailInput.current?.reportValidity()) return;
+		onSendCode?.(email.trim());
+	};
 	return /* @__PURE__ */ jsxs(AuthLayout, {
 		title: "Sign in to Protobase",
 		description: workspace,
@@ -16,32 +33,39 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, onForgotPassword
 				className: "mb-4 rounded-md bg-success-soft px-3 py-2 text-xs font-medium text-success-text",
 				children: notice
 			}),
-			onContinueWithGitHub && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
-				onClick: onContinueWithGitHub,
-				disabled: busy,
-				className: "min-h-10 w-full",
-				children: "Continue with GitHub"
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "my-4 flex items-center gap-3 text-xs text-muted-foreground",
-				children: [
-					/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" }),
-					"or",
-					/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" })
-				]
+			(onContinueWithGitHub || withPasskey) && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2",
+				children: [onContinueWithGitHub && /* @__PURE__ */ jsx(Button, {
+					onClick: onContinueWithGitHub,
+					disabled: busy,
+					className: "min-h-10 w-full",
+					children: "Continue with GitHub"
+				}), withPasskey && /* @__PURE__ */ jsxs(Button, {
+					onClick: onPasskey,
+					disabled: busy,
+					className: "min-h-10 w-full",
+					children: [/* @__PURE__ */ jsx(KeyRound, { className: "size-4" }), "Sign in with a passkey"]
+				})]
+			}), withPassword || withCode ? /* @__PURE__ */ jsx(Divider, {}) : error && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "mt-4 text-xs font-medium text-danger-text",
+				children: error
 			})] }),
-			/* @__PURE__ */ jsxs("form", {
+			(withPassword || withCode) && /* @__PURE__ */ jsxs("form", {
 				className: "flex flex-col gap-4",
 				onSubmit: (event) => {
 					event.preventDefault();
-					onSubmit(email.trim(), password);
+					if (withPassword) onSubmit(email.trim(), password);
+					else sendCode();
 				},
 				children: [
 					/* @__PURE__ */ jsxs("label", {
 						className: "flex flex-col gap-1.5 text-[13px] font-medium",
 						children: ["Email", /* @__PURE__ */ jsx(Input, {
+							ref: emailInput,
 							type: "email",
 							name: "email",
-							autoComplete: "username",
+							autoComplete: "username webauthn",
 							required: true,
 							autoFocus: true,
 							value: email,
@@ -50,7 +74,7 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, onForgotPassword
 							className: "min-h-6"
 						})]
 					}),
-					/* @__PURE__ */ jsxs("label", {
+					withPassword && /* @__PURE__ */ jsxs("label", {
 						className: "flex flex-col gap-1.5 text-[13px] font-medium",
 						children: ["Password", /* @__PURE__ */ jsx(Input, {
 							type: "password",
@@ -68,14 +92,23 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, onForgotPassword
 						className: "text-xs font-medium text-danger-text",
 						children: error
 					}),
-					/* @__PURE__ */ jsx(Button, {
+					withPassword && /* @__PURE__ */ jsx(Button, {
 						variant: "primary",
 						type: "submit",
 						loading: busy,
 						className: "min-h-10",
 						children: "Sign in"
 					}),
-					onForgotPassword && /* @__PURE__ */ jsx("button", {
+					withCode && /* @__PURE__ */ jsxs(Button, {
+						variant: withPassword ? "secondary" : "primary",
+						type: withPassword ? "button" : "submit",
+						onClick: withPassword ? sendCode : void 0,
+						loading: busy && !withPassword,
+						disabled: busy,
+						className: "min-h-10",
+						children: [/* @__PURE__ */ jsx(Mail, { className: "size-4" }), "Email me a sign-in code"]
+					}),
+					withPassword && onForgotPassword && /* @__PURE__ */ jsx("button", {
 						type: "button",
 						onClick: onForgotPassword,
 						className: "self-center text-[13px] font-medium text-primary-text hover:underline",

package/dist/auth/sign-in-page.js

@@ -1,27 +1,22 @@
+import { authMessage, signInMessage } from "./auth-messages.js";
 import { useAuth } from "./auth-provider.js";
 import { SignInForm } from "./sign-in-form.js";
 import { useState } from "react";
-import { jsx } from "react/jsx-runtime";
 import { AuthError } from "@protobase/client";
+import { jsx } from "react/jsx-runtime";
 //#region src/auth/sign-in-page.tsx
-/** Better Auth's messages, in words for the person at the keyboard. */
-const signInMessage = (error) => {
-	if (error.status === 429) return "Too many attempts. Wait a minute and try again.";
-	if (error.status === 401 || error.code === "INVALID_EMAIL_OR_PASSWORD") return "The email or password is not right.";
-	return error.message;
-};
-const SignInPage = ({ workspace, notice, onForgotPassword }) => {
-	const { signIn, signInSocial, socialProviders } = useAuth();
+const SignInPage = ({ workspace, notice, onForgotPassword, onCodeSent }) => {
+	const { signIn, signInSocial, socialProviders, signInMethods, sendSignInCode, signInWithPasskey } = useAuth();
 	const [busy, setBusy] = useState(false);
 	const [error, setError] = useState();
-	const attempt = async (start) => {
+	const attempt = async (start, message) => {
 		setBusy(true);
 		setError(void 0);
 		try {
 			await start();
 		} catch (failure) {
 			if (!(failure instanceof AuthError)) throw failure;
-			setError(signInMessage(failure));
+			setError(message(failure));
 			setBusy(false);
 		}
 	};
@@ -30,9 +25,15 @@ const SignInPage = ({ workspace, notice, onForgotPassword }) => {
 		error,
 		workspace,
 		notice,
+		methods: signInMethods,
 		onForgotPassword,
-		onContinueWithGitHub: socialProviders.includes("github") ? () => void attempt(() => signInSocial("github")) : void 0,
-		onSubmit: (email, password) => void attempt(() => signIn(email, password))
+		onContinueWithGitHub: socialProviders.includes("github") ? () => void attempt(() => signInSocial("github"), signInMessage) : void 0,
+		onPasskey: () => void attempt(signInWithPasskey, authMessage),
+		onSendCode: (email) => void attempt(async () => {
+			await sendSignInCode(email);
+			onCodeSent(email);
+		}, authMessage),
+		onSubmit: (email, password) => void attempt(() => signIn(email, password), signInMessage)
 	});
 };
 //#endregion

package/dist/auth/staff-link.js

@@ -0,0 +1,30 @@
+//#region src/auth/staff-link.ts
+/** Marks a link to the staff sign-in page, for example `/?staff-sign-in&email=sanne@example.com&reason=Ticket+4211`. */
+const staffMarker = "staff-sign-in";
+/** Where the server's staff callback says why a staff sign-in did not go through. */
+const errorParam = "staff-error";
+/** The staff sign-in this page was opened for, or `undefined`. */
+const readStaffLink = (href) => {
+	const params = new URL(href).searchParams;
+	const error = params.get(errorParam);
+	if (!params.has("staff-sign-in") && !error) return void 0;
+	const marked = params.has(staffMarker);
+	return {
+		email: marked && params.get("email") || "",
+		reason: marked && params.get("reason") || "",
+		...error && { error }
+	};
+};
+/** The address without the staff link's parameters: for the address bar, and the page staff come back to. */
+const withoutStaffLink = (href) => {
+	const url = new URL(href);
+	if (url.searchParams.has("staff-sign-in")) for (const name of [
+		staffMarker,
+		"email",
+		"reason"
+	]) url.searchParams.delete(name);
+	url.searchParams.delete(errorParam);
+	return `${url.pathname}${url.search}${url.hash}`;
+};
+//#endregion
+export { readStaffLink, staffMarker, withoutStaffLink };