@synqauth/react 0.0.0 → 0.2.0

package/dist/index.js

@@ -39,7 +39,80 @@ const DEFAULT_MESSAGES = {
 	renameWallet: (name) => `Rename ${name}`,
 	makePrimary: "Make primary",
 	makeWalletPrimary: (name) => `Make ${name} primary`,
-	walletName: (address) => `Name for ${address}`
+	walletName: (address) => `Name for ${address}`,
+	apiKeys: "API keys",
+	noApiKeys: "No API keys yet.",
+	newApiKey: "New API key",
+	api: "API",
+	keyScopes: "What it may do",
+	expires: "Expires",
+	never: "Never",
+	inDays: (days) => `In ${days} days`,
+	makeKey: "Make key",
+	makingKey: "Making…",
+	revoke: "Revoke",
+	revokeKey: (name) => `Revoke ${name}`,
+	revoked: "Revoked",
+	expired: "Expired",
+	lastUsed: (when) => `Last used ${when}`,
+	neverUsed: "Never used",
+	expiresOn: (when) => `Expires ${when}`,
+	copyKeyNow: "Copy this key now: you won’t see it again.",
+	copy: "Copy",
+	copied: "Copied",
+	done: "Done",
+	keyNeedsFreshSignIn: "Making a key needs a recent sign-in.",
+	signInAgain: "Sign in again",
+	email: "Email",
+	password: "Password",
+	signInWithPasskey: "Sign in with a passkey",
+	passkeyFor: (domain) => `Use a passkey for ${domain}`,
+	emailMeACode: "Email me a code",
+	or: "or",
+	code: "Code",
+	codeSentTo: (email) => `We sent a code to ${email}.`,
+	verifyYourEmail: (email) => `Enter the code we sent to ${email} to verify your email address.`,
+	verify: "Verify",
+	sendAnotherCode: "Send another code",
+	useAnotherWay: "Use another way",
+	skipForNow: "Skip for now",
+	forgotPassword: "Forgot your password?",
+	createAccount: "Create account",
+	newHere: "New here?",
+	haveAnAccount: "Have an account?",
+	continuingToSignIn: "Taking you to sign in…",
+	tryAgainIn: (seconds) => seconds < 60 ? `Try again in ${seconds} seconds.` : `Try again in ${Math.ceil(seconds / 60)} minutes.`,
+	signInProblems: {
+		missing: "Fill in every field.",
+		invalid_email: "Enter a valid email address.",
+		wrong_credentials: "That email and password don’t match.",
+		email_taken: "An account already uses that email address. Sign in instead.",
+		password_too_short: "That password is too short.",
+		password_too_long: "That password is too long.",
+		password_guessable: "That password is too easy to guess.",
+		password_breached: "That password has appeared in a data breach. Choose another.",
+		wrong_code: "That code isn’t right.",
+		code_expired: "That code has expired. Send another.",
+		code_used_up: "Too many tries with that code. Send another.",
+		address_suppressed: "Email to that address doesn’t arrive. Use another address.",
+		team_only: "Only the team can sign in here.",
+		send_failed: "The email couldn’t be sent. Try again.",
+		passkey_failed: "That passkey didn’t work. Try again.",
+		passkey_unknown: "That passkey isn’t for an account here.",
+		passkey_expired: "That took too long. Try your passkey again.",
+		passkey_cancelled: "No passkey was used.",
+		slow_down: "Wait a moment, then try again.",
+		locked: "Too many tries.",
+		limited: "Too many tries.",
+		expired: "That sign-in timed out. Start again.",
+		unavailable: "Sign-in isn’t working right now. Try again."
+	},
+	signInRefusals: {
+		disabled: "This account is disabled.",
+		deleting: "This account is being deleted.",
+		sign_up_closed: "New accounts can’t be made here.",
+		already_exists: "An account already uses that email address."
+	}
 };
 //#endregion
 //#region src/mount.ts
@@ -101,7 +174,9 @@ const ROUTES = {
 	},
 	wallets: list("account/v1/wallets"),
 	accounts: list("account/v1/identities"),
-	sessions: list("account/v1/sessions")
+	sessions: list("account/v1/sessions"),
+	apiKeys: list("account/v1/api-keys"),
+	keyableApis: list("account/v1/apis")
 };
 const EMPTY = {
 	data: null,
@@ -113,7 +188,9 @@ const NO_RESOURCES = {
 	metadata: EMPTY,
 	wallets: EMPTY,
 	accounts: EMPTY,
-	sessions: EMPTY
+	sessions: EMPTY,
+	apiKeys: EMPTY,
+	keyableApis: EMPTY
 };
 function createStore(request, initial) {
 	let state = {
@@ -400,6 +477,14 @@ function useLinkedAccounts() {
 function useAccountSessions() {
 	return useAccountData("sessions");
 }
+/** The person's API keys for the brand's APIs (AERO-1693), revoked and expired ones too. */
+function useApiKeys() {
+	return useAccountData("apiKeys");
+}
+/** The brand's APIs that let the person make keys, with the scopes each defines. */
+function useKeyableApis() {
+	return useAccountData("keyableApis");
+}
 /** The signed-in person: their ID token's claims at once, then their profile and metadata. */
 function useUser() {
 	const session = useSession();
@@ -439,7 +524,7 @@ function useAuth() {
 	const signingOut = useRef(null);
 	return useMemo(() => {
 		const signInUrl = (options = {}) => {
-			const params = new URLSearchParams({ returnTo: options.returnTo ?? currentPath() });
+			const params = new URLSearchParams({ returnTo: options.returnTo ?? currentPath$1() });
 			if (options.method) params.set("method", options.method);
 			if (options.loginHint) params.set("login_hint", options.loginHint);
 			if (options.prompt) params.set("prompt", options.prompt);
@@ -474,7 +559,7 @@ function useAuth() {
 					headers: { "content-type": "application/json" },
 					body: JSON.stringify({
 						method,
-						returnTo: options.returnTo ?? currentPath()
+						returnTo: options.returnTo ?? currentPath$1()
 					})
 				});
 				if (result.error) return result;
@@ -518,6 +603,29 @@ function useAuth() {
 					return result;
 				}
 			},
+			apiKeys: {
+				list: read("apiKeys"),
+				async create(input) {
+					const result = await change("POST", "v1/api-keys", input);
+					const { data } = result;
+					if (data) {
+						const made = withoutKey(data);
+						store.put("apiKeys", (list) => list && [...list, made]);
+					}
+					return result;
+				},
+				async revoke(revoked) {
+					const result = await change("DELETE", `v1/api-keys/${id(revoked)}`);
+					if (!result.error) {
+						const at = (/* @__PURE__ */ new Date()).toISOString();
+						store.put("apiKeys", (list) => list && list.map((k) => k.id === revoked ? {
+							...k,
+							revoked_at: at
+						} : k));
+					}
+					return result;
+				}
+			},
 			plugins
 		};
 	}, [
@@ -530,6 +638,12 @@ function useAuth() {
 		change
 	]);
 }
+/** A new key as the list keeps it: its description, never the key itself. */
+function withoutKey(made) {
+	const copy = { ...made };
+	delete copy.key;
+	return copy;
+}
 /**
 * Sends changes to the account API for one mounted component. Each change
 * carries an idempotency key minted here; the key is used again only when
@@ -569,6 +683,278 @@ function useChanges() {
 		return sent;
 	}, [store, request]);
 }
+function currentPath$1() {
+	if (typeof window === "undefined") return "/";
+	return `${window.location.pathname}${window.location.search}`;
+}
+//#endregion
+//#region src/sign-in.ts
+function webAuthn() {
+	return globalThis.PublicKeyCredential;
+}
+/** Whether this browser takes the issuer's passkeys from this page, and offers them as people type. */
+async function passkeyCapabilities() {
+	const statics = webAuthn();
+	if (!statics?.getClientCapabilities || !statics.parseRequestOptionsFromJSON) return {
+		supported: false,
+		autofill: false
+	};
+	try {
+		const capabilities = await statics.getClientCapabilities();
+		const supported = capabilities.relatedOrigins === true;
+		return {
+			supported,
+			autofill: supported && capabilities.conditionalGet === true
+		};
+	} catch {
+		return {
+			supported: false,
+			autofill: false
+		};
+	}
+}
+/** One sign-in on the app's own screens, through the route mount's `sign-in/flow`. */
+function useSignIn(options = {}) {
+	const { request, navigate, store } = useSynqContext();
+	const auth = useAuth();
+	const [step, setStep] = useState("start");
+	const [pending, setPending] = useState(0);
+	const [problem, setProblem] = useState(null);
+	const [email, setEmail] = useState(void 0);
+	const [canSkip, setCanSkip] = useState(false);
+	const [handover, setHandover] = useState(null);
+	const [relatedDomain, setRelatedDomain] = useState(null);
+	const [capabilities, setCapabilities] = useState({
+		supported: false,
+		autofill: false
+	});
+	const autofilling = useRef(null);
+	const latest = useRef(options);
+	useEffect(() => {
+		latest.current = options;
+	});
+	const { returnTo } = options;
+	useEffect(() => {
+		let live = true;
+		passkeyCapabilities().then((found) => {
+			if (live) setCapabilities(found);
+		});
+		return () => {
+			live = false;
+			autofilling.current?.abort();
+		};
+	}, []);
+	const actions = useMemo(() => {
+		async function post(body) {
+			setPending((n) => n + 1);
+			try {
+				const result = await call(request, "sign-in/flow", {
+					method: "POST",
+					headers: { "content-type": "application/json" },
+					body: JSON.stringify({
+						...body,
+						returnTo: latest.current.returnTo ?? currentPath()
+					})
+				});
+				if (result.error) {
+					setProblem({
+						code: "unavailable",
+						message: result.error.message
+					});
+					return null;
+				}
+				return result.data;
+			} finally {
+				setPending((n) => n - 1);
+			}
+		}
+		/** Shows what the mount answered. */
+		async function show(answer) {
+			if (!answer) return;
+			switch (answer.status) {
+				case "signed-in":
+					autofilling.current?.abort();
+					setStep("done");
+					setProblem(null);
+					await store.refreshSession();
+					if (latest.current.onSignedIn) latest.current.onSignedIn(answer.returnTo);
+					else navigate(answer.returnTo);
+					return;
+				case "code-sent":
+					setStep("code");
+					setEmail(answer.email);
+					setProblem(null);
+					return;
+				case "verify-email":
+					setStep("verify-email");
+					setEmail(answer.email);
+					setCanSkip(answer.canSkip);
+					setProblem(null);
+					return;
+				case "passkey":
+					setRelatedDomain(answer.passkey.related?.rpId ?? null);
+					if (answer.problem) setProblem({
+						code: answer.problem,
+						message: answer.message ?? ""
+					});
+					return;
+				case "retry":
+					setProblem({
+						code: answer.problem,
+						message: answer.message,
+						...answer.retryAfter === void 0 ? {} : { retryAfter: answer.retryAfter }
+					});
+					return;
+				case "hosted":
+					autofilling.current?.abort();
+					setHandover(answer.hosted);
+					return;
+				case "refused":
+					setStep("start");
+					setProblem({
+						code: "refused",
+						reason: answer.reason,
+						message: answer.message
+					});
+					return;
+				case "expired":
+					setStep("start");
+					setProblem({
+						code: "expired",
+						message: answer.message
+					});
+					return;
+				case "restarted": return;
+			}
+		}
+		const run = async (body) => show(await post(body));
+		/** Asks Synq for a passkey's options, the browser for the passkey, and Synq to take it. */
+		async function passkey(related, mediation) {
+			const statics = webAuthn();
+			if (!statics?.parseRequestOptionsFromJSON) return;
+			autofilling.current?.abort();
+			const answer = await post({ step: "passkey-options" });
+			if (answer?.status !== "passkey") {
+				if (answer?.status === "hosted" && answer.hosted.reason === "passkey_unavailable") setCapabilities({
+					supported: false,
+					autofill: false
+				});
+				if (mediation) return;
+				return show(answer);
+			}
+			setRelatedDomain(answer.passkey.related?.rpId ?? null);
+			const chosen = related ? answer.passkey.related : void 0;
+			const controller = new AbortController();
+			if (mediation) autofilling.current = controller;
+			let credential;
+			try {
+				credential = await navigator.credentials.get({
+					publicKey: statics.parseRequestOptionsFromJSON(chosen?.options ?? answer.passkey.options),
+					signal: controller.signal,
+					...mediation ? { mediation } : {}
+				});
+			} catch (error) {
+				if (!mediation && !controller.signal.aborted) setProblem({
+					code: "passkey_cancelled",
+					message: String(error)
+				});
+				return;
+			} finally {
+				if (autofilling.current === controller) autofilling.current = null;
+			}
+			if (!credential) return;
+			await run({
+				step: "passkey",
+				credential: credential.toJSON(),
+				related: Boolean(chosen)
+			});
+		}
+		return {
+			password: {
+				signIn: ({ email: address, password }) => run({
+					step: "password",
+					email: address,
+					password
+				}),
+				signUp: ({ email: address, password }) => run({
+					step: "password",
+					screen: "sign-up",
+					email: address,
+					password
+				})
+			},
+			emailCode: {
+				send: (address) => run({
+					step: "email",
+					email: address
+				}),
+				verify: (code) => run({
+					step: "code",
+					code
+				}),
+				resend: () => run({ step: "resend" })
+			},
+			verifyEmail: {
+				verify: (code) => run({
+					step: "code",
+					code
+				}),
+				resend: () => run({ step: "resend" }),
+				skip: () => run({ step: "skip" })
+			},
+			passkeySignIn: ({ related = false } = {}) => passkey(related),
+			passkeyAutofill: () => passkey(false, "conditional"),
+			startOver: async () => {
+				autofilling.current?.abort();
+				await post({ step: "restart" });
+				setStep("start");
+				setProblem(null);
+				setEmail(void 0);
+				setCanSkip(false);
+				setHandover(null);
+			}
+		};
+	}, [
+		request,
+		navigate,
+		store
+	]);
+	const startAutofill = useCallback(() => capabilities.autofill ? actions.passkeyAutofill() : Promise.resolve(), [capabilities.autofill, actions]);
+	const continueOnHostedPage = useCallback((overrides = {}) => {
+		const method = overrides.method ?? handover?.method;
+		const loginHint = overrides.loginHint ?? handover?.loginHint ?? email;
+		auth.signIn({
+			...returnTo ? { returnTo } : {},
+			...method ? { method } : {},
+			...loginHint ? { loginHint } : {}
+		});
+	}, [
+		auth,
+		handover,
+		email,
+		returnTo
+	]);
+	return {
+		step,
+		pending: pending > 0,
+		problem,
+		email,
+		canSkip,
+		handover,
+		password: actions.password,
+		emailCode: actions.emailCode,
+		verifyEmail: actions.verifyEmail,
+		passkey: {
+			supported: capabilities.supported,
+			autofill: capabilities.autofill,
+			relatedDomain,
+			signIn: actions.passkeySignIn,
+			startAutofill
+		},
+		continueOnHostedPage,
+		startOver: actions.startOver
+	};
+}
 function currentPath() {
 	if (typeof window === "undefined") return "/";
 	return `${window.location.pathname}${window.location.search}`;
@@ -620,6 +1006,422 @@ function SignInButton({ unstyled, className, children, ...options }) {
 	});
 }
 //#endregion
+//#region src/components/SignInForm.tsx
+const ALL_METHODS = [
+	"passkey",
+	"email",
+	"password"
+];
+/**
+* Sign-in on the app's own page: a passkey where the browser takes the
+* issuer's, then an emailed code or a password, and the code or the new
+* address's proof after. Whatever only the hosted page can do, it goes
+* there for.
+*/
+function SignInForm({ methods = ALL_METHODS, screen: initialScreen = "sign-in", returnTo, onSignedIn, unstyled, className }) {
+	const signIn = useSignIn({
+		...returnTo === void 0 ? {} : { returnTo },
+		...onSignedIn === void 0 ? {} : { onSignedIn }
+	});
+	const m = useSynqMessages();
+	const c = styler(unstyled);
+	const [screen, setScreen] = useState(initialScreen);
+	const passwords = methods.includes("password");
+	const codes = methods.includes("email");
+	const passkeys = methods.includes("passkey") && signIn.passkey.supported;
+	const signingUp = screen === "sign-up" && passwords;
+	const { step, handover, continueOnHostedPage } = signIn;
+	useEffect(() => {
+		if (handover) continueOnHostedPage();
+	}, [handover, continueOnHostedPage]);
+	const root = rootClass(unstyled, "sign-in-form", className);
+	if (handover || step === "done") return /* @__PURE__ */ jsx("div", {
+		className: root,
+		children: /* @__PURE__ */ jsx("p", {
+			className: c("muted"),
+			role: "status",
+			children: handover ? m.continuingToSignIn : m.signedIn
+		})
+	});
+	if (step === "code") return /* @__PURE__ */ jsx("div", {
+		className: root,
+		children: /* @__PURE__ */ jsx(EmailCodeForm, {
+			signIn,
+			unstyled
+		})
+	});
+	if (step === "verify-email") return /* @__PURE__ */ jsx("div", {
+		className: root,
+		children: /* @__PURE__ */ jsx(VerifyEmailForm, {
+			signIn,
+			unstyled
+		})
+	});
+	const others = codes || passwords;
+	return /* @__PURE__ */ jsx("div", {
+		className: root,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: c("form"),
+			children: [
+				passkeys && !signingUp ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(PasskeyButton, {
+						signIn,
+						unstyled
+					}),
+					signIn.passkey.relatedDomain ? /* @__PURE__ */ jsx(PasskeyButton, {
+						signIn,
+						related: true,
+						unstyled
+					}) : null,
+					others ? /* @__PURE__ */ jsx("p", {
+						className: c("muted"),
+						children: m.or
+					}) : null
+				] }) : null,
+				passwords ? /* @__PURE__ */ jsx(PasswordForm, {
+					signIn,
+					screen: signingUp ? "sign-up" : "sign-in",
+					emailCode: codes,
+					autofill: passkeys,
+					unstyled
+				}) : codes ? /* @__PURE__ */ jsx(EmailCodeForm, {
+					signIn,
+					autofill: passkeys,
+					unstyled
+				}) : signIn.problem ? /* @__PURE__ */ jsx(ProblemText, {
+					problem: signIn.problem,
+					m,
+					c
+				}) : null,
+				passwords ? /* @__PURE__ */ jsxs("p", {
+					className: c("muted"),
+					children: [
+						signingUp ? m.haveAnAccount : m.newHere,
+						" ",
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: c("link"),
+							onClick: () => setScreen(signingUp ? "sign-in" : "sign-up"),
+							children: signingUp ? m.signIn : m.createAccount
+						})
+					]
+				}) : null
+			]
+		})
+	});
+}
+/** The button for a passkey: the brand's, or with `related` its own host's on its custom domain. */
+function PasskeyButton({ signIn, related = false, children, unstyled, className }) {
+	const m = useSynqMessages();
+	const domain = signIn.passkey.relatedDomain;
+	if (!signIn.passkey.supported || related && !domain) return null;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: rootClass(unstyled, "button", className),
+		disabled: signIn.pending,
+		onClick: () => void signIn.passkey.signIn({ related }),
+		children: children ?? (related && domain ? m.passkeyFor(domain) : m.signInWithPasskey)
+	});
+}
+/**
+* An email address and a password: signs in, or with `screen="sign-up"`
+* makes an account. With `emailCode`, it offers a code by email for the
+* same address too.
+*/
+function PasswordForm({ signIn, screen = "sign-in", emailCode = false, autofill = false, unstyled, className }) {
+	const m = useSynqMessages();
+	const c = styler(unstyled);
+	const signingUp = screen === "sign-up";
+	const onSubmit = (event) => {
+		event.preventDefault();
+		const data = new FormData(event.currentTarget);
+		const input = {
+			email: field(data, "email").trim(),
+			password: field(data, "password")
+		};
+		signingUp ? signIn.password.signUp(input) : signIn.password.signIn(input);
+	};
+	return /* @__PURE__ */ jsx("form", {
+		className: rootClass(unstyled, "password-form", className),
+		onSubmit,
+		"aria-busy": signIn.pending,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: c("form"),
+			children: [
+				/* @__PURE__ */ jsx(EmailField, {
+					signIn,
+					autofill: autofill && !signingUp,
+					signingUp,
+					c
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: c("field"),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: c("label"),
+						children: m.password
+					}), /* @__PURE__ */ jsx("input", {
+						className: c("input"),
+						name: "password",
+						type: "password",
+						required: true,
+						autoComplete: signingUp ? "new-password" : "current-password"
+					})]
+				}),
+				signIn.problem ? /* @__PURE__ */ jsx(ProblemText, {
+					problem: signIn.problem,
+					m,
+					c
+				}) : null,
+				/* @__PURE__ */ jsxs("div", {
+					className: c("actions"),
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "submit",
+						className: c("button", "button-primary"),
+						disabled: signIn.pending,
+						children: signingUp ? m.createAccount : m.signIn
+					}), emailCode && !signingUp ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: c("button"),
+						disabled: signIn.pending,
+						onClick: (event) => {
+							const email = event.currentTarget.form?.elements.namedItem("email");
+							if (!(email instanceof HTMLInputElement) || !email.reportValidity()) return;
+							signIn.emailCode.send(email.value.trim());
+						},
+						children: m.emailMeACode
+					}) : null]
+				}),
+				signingUp ? null : /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: c("link"),
+					onClick: (event) => {
+						const email = event.currentTarget.form?.elements.namedItem("email");
+						const typed = email instanceof HTMLInputElement ? email.value.trim() : "";
+						signIn.continueOnHostedPage({
+							method: "password",
+							...typed ? { loginHint: typed } : {}
+						});
+					},
+					children: m.forgotPassword
+				})
+			]
+		})
+	});
+}
+/** An emailed code: the address to send it to, then the code it held. */
+function EmailCodeForm({ signIn, autofill = false, unstyled, className }) {
+	const m = useSynqMessages();
+	const c = styler(unstyled);
+	const id = useId();
+	const root = rootClass(unstyled, "email-code-form", className);
+	const problem = signIn.problem ? /* @__PURE__ */ jsx(ProblemText, {
+		problem: signIn.problem,
+		m,
+		c
+	}) : null;
+	if (signIn.step === "code") {
+		const onSubmit = (event) => {
+			event.preventDefault();
+			signIn.emailCode.verify(field(new FormData(event.currentTarget), "code").trim());
+		};
+		return /* @__PURE__ */ jsx("form", {
+			className: root,
+			onSubmit,
+			"aria-busy": signIn.pending,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: c("form"),
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: c("muted"),
+						id: `${id}-sent`,
+						children: m.codeSentTo(signIn.email ?? "")
+					}),
+					/* @__PURE__ */ jsx(OneTimeCodeInput, {
+						label: m.code,
+						"aria-describedby": `${id}-sent`,
+						unstyled
+					}),
+					problem,
+					/* @__PURE__ */ jsxs("div", {
+						className: c("actions"),
+						children: [
+							/* @__PURE__ */ jsx("button", {
+								type: "submit",
+								className: c("button", "button-primary"),
+								disabled: signIn.pending,
+								children: m.verify
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: c("button"),
+								disabled: signIn.pending,
+								onClick: () => void signIn.emailCode.resend(),
+								children: m.sendAnotherCode
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: c("button"),
+								disabled: signIn.pending,
+								onClick: () => void signIn.startOver(),
+								children: m.useAnotherWay
+							})
+						]
+					})
+				]
+			})
+		});
+	}
+	const onSubmit = (event) => {
+		event.preventDefault();
+		signIn.emailCode.send(field(new FormData(event.currentTarget), "email").trim());
+	};
+	return /* @__PURE__ */ jsx("form", {
+		className: root,
+		onSubmit,
+		"aria-busy": signIn.pending,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: c("form"),
+			children: [
+				/* @__PURE__ */ jsx(EmailField, {
+					signIn,
+					autofill,
+					signingUp: false,
+					c
+				}),
+				problem,
+				/* @__PURE__ */ jsx("div", {
+					className: c("actions"),
+					children: /* @__PURE__ */ jsx("button", {
+						type: "submit",
+						className: c("button", "button-primary"),
+						disabled: signIn.pending,
+						children: m.emailMeACode
+					})
+				})
+			]
+		})
+	});
+}
+/** The code that proves a new account's address, or "Skip for now" where the brand allows. */
+function VerifyEmailForm({ signIn, unstyled, className }) {
+	const m = useSynqMessages();
+	const c = styler(unstyled);
+	const id = useId();
+	const onSubmit = (event) => {
+		event.preventDefault();
+		signIn.verifyEmail.verify(field(new FormData(event.currentTarget), "code").trim());
+	};
+	return /* @__PURE__ */ jsx("form", {
+		className: rootClass(unstyled, "verify-email-form", className),
+		onSubmit,
+		"aria-busy": signIn.pending,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: c("form"),
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: c("muted"),
+					id: `${id}-sent`,
+					children: m.verifyYourEmail(signIn.email ?? "")
+				}),
+				/* @__PURE__ */ jsx(OneTimeCodeInput, {
+					label: m.code,
+					"aria-describedby": `${id}-sent`,
+					unstyled
+				}),
+				signIn.problem ? /* @__PURE__ */ jsx(ProblemText, {
+					problem: signIn.problem,
+					m,
+					c
+				}) : null,
+				/* @__PURE__ */ jsxs("div", {
+					className: c("actions"),
+					children: [
+						/* @__PURE__ */ jsx("button", {
+							type: "submit",
+							className: c("button", "button-primary"),
+							disabled: signIn.pending,
+							children: m.verify
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: c("button"),
+							disabled: signIn.pending,
+							onClick: () => void signIn.verifyEmail.resend(),
+							children: m.sendAnotherCode
+						}),
+						signIn.canSkip ? /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: c("button"),
+							disabled: signIn.pending,
+							onClick: () => void signIn.verifyEmail.skip(),
+							children: m.skipForNow
+						}) : null
+					]
+				})
+			]
+		})
+	});
+}
+/** The field for an emailed code, named `code`: digits, filled from the message where the device can. */
+function OneTimeCodeInput({ label, unstyled, className, ...input }) {
+	const c = styler(unstyled);
+	return /* @__PURE__ */ jsxs("label", {
+		className: c("field"),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: c("label"),
+			children: label
+		}), /* @__PURE__ */ jsx("input", {
+			className: [c("input", "code-input"), className].filter(Boolean).join(" ") || void 0,
+			name: "code",
+			required: true,
+			inputMode: "numeric",
+			pattern: "[0-9]*",
+			maxLength: 10,
+			autoComplete: "one-time-code",
+			autoFocus: true,
+			...input
+		})]
+	});
+}
+/** The address field, which offers passkeys as the person types where it may, and starts that. */
+function EmailField({ signIn, autofill, signingUp, c }) {
+	const m = useSynqMessages();
+	const offer = autofill && signIn.passkey.autofill && signIn.step === "start";
+	const startAutofill = signIn.passkey.startAutofill;
+	useEffect(() => {
+		if (offer) startAutofill();
+	}, [offer, startAutofill]);
+	return /* @__PURE__ */ jsxs("label", {
+		className: c("field"),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: c("label"),
+			children: m.email
+		}), /* @__PURE__ */ jsx("input", {
+			className: c("input"),
+			name: "email",
+			type: "email",
+			required: true,
+			autoComplete: signingUp ? "email" : offer ? "username webauthn" : "username",
+			defaultValue: signIn.email ?? ""
+		})]
+	});
+}
+/** What the person typed in a form's field. */
+function field(data, name) {
+	const value = data.get(name);
+	return typeof value === "string" ? value : "";
+}
+/** What went wrong, in the app's words where it gave them, and how long to wait. */
+function ProblemText({ problem, m, c }) {
+	const said = (problem.code === "refused" && problem.reason ? m.signInRefusals[problem.reason] : void 0) ?? m.signInProblems[problem.code] ?? problem.message;
+	const wait = problem.retryAfter === void 0 ? "" : ` ${m.tryAgainIn(problem.retryAfter)}`;
+	return /* @__PURE__ */ jsxs("p", {
+		className: c("error"),
+		role: "alert",
+		children: [said, wait]
+	});
+}
+//#endregion
 //#region src/components/UserButton.tsx
 /**
 * The signed-in person's picture and name, showing a panel to manage their
@@ -717,7 +1519,8 @@ function initials(name) {
 const ALL = [
 	"profile",
 	"accounts",
-	"sessions"
+	"sessions",
+	"apiKeys"
 ];
 /** Manage the signed-in person's account. Nothing while nobody is signed in. */
 function AccountManager({ unstyled, className, sections = ALL }) {
@@ -725,7 +1528,7 @@ function AccountManager({ unstyled, className, sections = ALL }) {
 	if (!isSignedIn) return null;
 	return /* @__PURE__ */ jsx("div", {
 		className: rootClass(unstyled, "account-manager", className),
-		children: sections.map((section) => section === "profile" ? /* @__PURE__ */ jsx(ProfileSection, { unstyled }, section) : section === "accounts" ? /* @__PURE__ */ jsx(AccountsSection, { unstyled }, section) : /* @__PURE__ */ jsx(SessionsSection, { unstyled }, section))
+		children: sections.map((section) => section === "profile" ? /* @__PURE__ */ jsx(ProfileSection, { unstyled }, section) : section === "accounts" ? /* @__PURE__ */ jsx(AccountsSection, { unstyled }, section) : section === "sessions" ? /* @__PURE__ */ jsx(SessionsSection, { unstyled }, section) : /* @__PURE__ */ jsx(ApiKeysSection, { unstyled }, section))
 	});
 }
 function Section({ title, unstyled, children }) {
@@ -874,7 +1677,7 @@ function AccountRow({ account, removable, unstyled }) {
 	const [failure, setFailure] = useState(null);
 	const c = styler(unstyled);
 	const provider = m.providers[account.provider] ?? capitalized(account.provider);
-	const subject = account.provider === "solana" ? shortAddress(account.subject) : account.subject;
+	const subject = account.handle ? `@${account.handle}` : account.provider === "solana" ? shortAddress(account.subject) : account.subject;
 	async function remove() {
 		setBusy(true);
 		const result = await accounts.unlink(account.id);
@@ -962,6 +1765,276 @@ function SessionsSection({ unstyled }) {
 		})]
 	});
 }
+/** How long a new key may last, in days: the account API takes up to 366. */
+const KEY_LIFETIMES = [
+	30,
+	90,
+	365
+];
+function ApiKeysSection({ unstyled }) {
+	const keys = useApiKeys();
+	const apis = useKeyableApis();
+	const m = useSynqMessages();
+	const [made, setMade] = useState(null);
+	const c = styler(unstyled);
+	if ((apis.data?.length ?? 0) === 0 && (keys.data?.length ?? 0) === 0) return null;
+	return /* @__PURE__ */ jsxs(Section, {
+		title: m.apiKeys,
+		unstyled,
+		children: [
+			made && /* @__PURE__ */ jsx(NewKey, {
+				made,
+				onDone: () => setMade(null),
+				unstyled
+			}),
+			keys.data ? keys.data.length > 0 ? /* @__PURE__ */ jsx("ul", {
+				className: c("list"),
+				children: keys.data.map((key) => /* @__PURE__ */ jsx(ApiKeyRow, {
+					apiKey: key,
+					unstyled
+				}, key.id))
+			}) : /* @__PURE__ */ jsx("p", {
+				className: c("muted"),
+				children: m.noApiKeys
+			}) : /* @__PURE__ */ jsx(Pending, {
+				isLoading: keys.isLoading,
+				error: keys.error,
+				unstyled
+			}),
+			apis.data && apis.data.length > 0 && /* @__PURE__ */ jsx(NewKeyForm, {
+				apis: apis.data,
+				onMade: setMade,
+				unstyled
+			})
+		]
+	});
+}
+/** The key just made, shown this once, with a way to copy it. */
+function NewKey({ made, onDone, unstyled }) {
+	const m = useSynqMessages();
+	const [copied, setCopied] = useState(false);
+	const c = styler(unstyled);
+	async function copy() {
+		try {
+			await navigator.clipboard.writeText(made.key);
+			setCopied(true);
+		} catch {
+			setCopied(false);
+		}
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		className: c("form"),
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: c("row-title"),
+				children: m.copyKeyNow
+			}),
+			/* @__PURE__ */ jsx("code", {
+				className: c("input"),
+				"aria-label": made.name,
+				children: made.key
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: c("actions"),
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: c("button", "button-primary"),
+					onClick: () => void copy(),
+					children: copied ? m.copied : m.copy
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: c("button"),
+					onClick: onDone,
+					children: m.done
+				})]
+			})
+		]
+	});
+}
+function ApiKeyRow({ apiKey, unstyled }) {
+	const { apiKeys } = useAuth();
+	const m = useSynqMessages();
+	const [busy, setBusy] = useState(false);
+	const [failure, setFailure] = useState(null);
+	const [shownAt] = useState(() => Date.now());
+	const c = styler(unstyled);
+	const expired = apiKey.expires_at !== null && Date.parse(apiKey.expires_at) <= shownAt;
+	const live = apiKey.revoked_at === null && !expired;
+	async function revoke() {
+		setBusy(true);
+		const result = await apiKeys.revoke(apiKey.id);
+		setBusy(false);
+		setFailure(result.error ? failureText(result.error) : null);
+	}
+	return /* @__PURE__ */ jsxs("li", {
+		className: c("row"),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: c("row-title"),
+				children: apiKey.name
+			}),
+			apiKey.revoked_at !== null ? /* @__PURE__ */ jsx("span", {
+				className: c("badge"),
+				children: m.revoked
+			}) : expired && /* @__PURE__ */ jsx("span", {
+				className: c("badge"),
+				children: m.expired
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: c("muted"),
+				children: `${apiKey.prefix}… · ${apiKey.api.name} · ${apiKey.scopes.join(", ")}`
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: c("muted"),
+				children: [apiKey.last_used_at ? m.lastUsed(formatDate(apiKey.last_used_at)) : m.neverUsed, apiKey.expires_at && live ? ` · ${m.expiresOn(formatDate(apiKey.expires_at))}` : ""]
+			}),
+			live && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: c("button"),
+				disabled: busy,
+				"aria-label": m.revokeKey(apiKey.name),
+				onClick: () => void revoke(),
+				children: m.revoke
+			}),
+			failure && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: c("error"),
+				children: failure
+			})
+		]
+	});
+}
+function NewKeyForm({ apis, onMade, unstyled }) {
+	const { apiKeys, signIn } = useAuth();
+	const m = useSynqMessages();
+	const [api, setApi] = useState(apis[0].identifier);
+	const [name, setName] = useState("");
+	const [scopes, setScopes] = useState([]);
+	const [lifetime, setLifetime] = useState(null);
+	const [busy, setBusy] = useState(false);
+	const [failure, setFailure] = useState(null);
+	const scopeLegend = useId();
+	const c = styler(unstyled);
+	const chosen = apis.find((a) => a.identifier === api) ?? apis[0];
+	async function make(event) {
+		event.preventDefault();
+		setBusy(true);
+		setFailure(null);
+		const result = await apiKeys.create({
+			api: chosen.identifier,
+			name: name.trim(),
+			scopes: [...scopes],
+			...lifetime === null ? {} : { expires_at: new Date(Date.now() + lifetime * 864e5).toISOString() }
+		});
+		setBusy(false);
+		if (result.error) {
+			setFailure({
+				text: failureText(result.error),
+				fresh: result.error.code === "fresh_sign_in_required"
+			});
+			return;
+		}
+		setName("");
+		setScopes([]);
+		onMade(result.data);
+	}
+	return /* @__PURE__ */ jsxs("form", {
+		className: c("form"),
+		onSubmit: (event) => void make(event),
+		children: [
+			/* @__PURE__ */ jsx("h3", {
+				className: c("row-title"),
+				children: m.newApiKey
+			}),
+			apis.length > 1 && /* @__PURE__ */ jsxs("label", {
+				className: c("field"),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: c("label"),
+					children: m.api
+				}), /* @__PURE__ */ jsx("select", {
+					className: c("input"),
+					value: chosen.identifier,
+					onChange: (event) => {
+						setApi(event.target.value);
+						setScopes([]);
+					},
+					children: apis.map((a) => /* @__PURE__ */ jsx("option", {
+						value: a.identifier,
+						children: a.name
+					}, a.identifier))
+				})]
+			}),
+			/* @__PURE__ */ jsxs("label", {
+				className: c("field"),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: c("label"),
+					children: m.name
+				}), /* @__PURE__ */ jsx("input", {
+					className: c("input"),
+					name: "key-name",
+					required: true,
+					maxLength: 100,
+					value: name,
+					onChange: (event) => setName(event.target.value)
+				})]
+			}),
+			/* @__PURE__ */ jsxs("fieldset", {
+				className: c("field"),
+				"aria-labelledby": scopeLegend,
+				children: [/* @__PURE__ */ jsx("legend", {
+					id: scopeLegend,
+					className: c("label"),
+					children: m.keyScopes
+				}), chosen.scopes.map((scope) => /* @__PURE__ */ jsxs("label", {
+					className: c("row"),
+					children: [/* @__PURE__ */ jsx("input", {
+						type: "checkbox",
+						checked: scopes.includes(scope.name),
+						onChange: (event) => setScopes((now) => event.target.checked ? [...now, scope.name] : now.filter((one) => one !== scope.name))
+					}), /* @__PURE__ */ jsx("span", { children: scope.description || scope.name })]
+				}, scope.name))]
+			}),
+			/* @__PURE__ */ jsxs("label", {
+				className: c("field"),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: c("label"),
+					children: m.expires
+				}), /* @__PURE__ */ jsxs("select", {
+					className: c("input"),
+					value: lifetime === null ? "" : String(lifetime),
+					onChange: (event) => setLifetime(event.target.value === "" ? null : Number(event.target.value)),
+					children: [/* @__PURE__ */ jsx("option", {
+						value: "",
+						children: m.never
+					}), KEY_LIFETIMES.map((days) => /* @__PURE__ */ jsx("option", {
+						value: days,
+						children: m.inDays(days)
+					}, days))]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: c("actions"),
+				children: /* @__PURE__ */ jsx("button", {
+					type: "submit",
+					className: c("button", "button-primary"),
+					disabled: busy || name.trim() === "" || scopes.length === 0,
+					children: busy ? m.makingKey : m.makeKey
+				})
+			}),
+			failure && /* @__PURE__ */ jsxs("div", {
+				role: "alert",
+				className: c("error"),
+				children: [/* @__PURE__ */ jsx("p", { children: failure.fresh ? m.keyNeedsFreshSignIn : failure.text }), failure.fresh && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: c("button"),
+					onClick: () => signIn({ maxAge: 300 }),
+					children: m.signInAgain
+				})]
+			})
+		]
+	});
+}
 function capitalized(provider) {
 	return provider.charAt(0).toUpperCase() + provider.slice(1);
 }
@@ -1104,4 +2177,4 @@ function WalletRow({ wallet, unstyled }) {
 	});
 }
 //#endregion
-export { AccountManager, DEFAULT_MESSAGES, SignInButton, SignedIn, SignedOut, SynqProvider, UserButton, WalletManager, useAccountSessions, useAuth, useLinkedAccounts, usePlugin, useSession, useUser, useWallets };
+export { AccountManager, DEFAULT_MESSAGES, EmailCodeForm, OneTimeCodeInput, PasskeyButton, PasswordForm, SignInButton, SignInForm, SignedIn, SignedOut, SynqProvider, UserButton, VerifyEmailForm, WalletManager, useAccountSessions, useApiKeys, useAuth, useKeyableApis, useLinkedAccounts, usePlugin, useSession, useSignIn, useUser, useWallets };