@sdxc/passkey

npm add @sdxc/passkey

import { RelyingParty } from "@sdxc/passkey/server";

let rp = new RelyingParty({ id: "example.com", name: "Example" });

let { challenge, options } = rp.register({
	user: { id: "usr_8fk2p", name: "ana@example.com" },
});

let { challenge, options } = rp.register({
	user: { id: account.id, name: account.email },
	exclude: account.passkeys.map((passkey) => passkey.id),
});

import { Passkey } from "@sdxc/passkey/client";
import { isFailure } from "@sdxc/result";

let result = await Passkey.register(options);
if (isFailure(result)) return showMessage(result.error.message);

await fetch("/passkeys", { method: "POST", body: JSON.stringify(result.data) });

import { isFailure } from "@sdxc/result";

let result = await rp.verifyRegistration(request, { challenge });
if (isFailure(result)) return unauthorized(result.error.message);

await db.passkeys.insert({ accountId: account.id, ...result.data });

let { challenge, options } = rp.authenticate();

let result = await Passkey.authenticate(options);

let passkey = await db.passkeys.find(response.id);

let result = await rp.verifyAuthentication(response, { challenge, passkey });
if (isFailure(result)) return unauthorized(result.error.message);

await db.passkeys.update(passkey.id, { counter: result.data.counter });

if (await Passkey.isAutofillSupported()) {
	let result = await Passkey.autofill(options);
	if (isSuccess(result)) form.submit();
}

interface RegisteredPasskey {
	id: string;
	publicKey: string;
	algorithm: number;
	counter: number;
	transports: string[];
	aaguid: string;
	attestation: string;
	userVerified: boolean;
	syncable: boolean;
	backedUp: boolean;
}

interface AuthenticatedPasskey {
	id: string;
	counter: number;
	userHandle: string | null;
	userVerified: boolean;
	backedUp: boolean;
}

import { form, get, post, route } from "remix/routes";

export default route({
	signIn: form("/sign-in"),
	dashboard: get("/dashboard"),

	passkey: {
		/** Issues a challenge and the options the browser prompts with. */
		challenge: post("/passkey/challenge"),
		/** Verifies the assertion and opens the session. */
		verify: post("/passkey/verify"),
	},
});

import { RelyingParty } from "@sdxc/passkey/server";
import { env } from "cloudflare:workers";
import { getContext } from "remix/middleware/async-context";
import { Session } from "remix/session";

export const RELYING_PARTY = new RelyingParty({
	id: env.RP_ID,
	name: "Example",
	origin: env.APP_ORIGIN,
});

/** Session key the in-flight challenge is parked under. */
const CHALLENGE_KEY = "passkey:challenge";

/**
 * The current request's session.
 *
 * @throws When the session middleware did not run for this request.
 */
function session(): Session {
	let value = getContext().get(Session);
	if (!value) throw new Error("No session in context: the session middleware did not run.");
	return value;
}

/** Parks a challenge until the browser answers it. */
export function keepChallenge(challenge: string): void {
	session().set(CHALLENGE_KEY, challenge);
}

/**
 * Reads the in-flight challenge and drops it in the same call, so one challenge
 * buys exactly one ceremony and a replay of the same assertion finds nothing.
 */
export function spendChallenge(): string | null {
	let value = session();
	let challenge = value.get(CHALLENGE_KEY);
	value.unset(CHALLENGE_KEY);
	return typeof challenge === "string" ? challenge : null;
}

import { createAction } from "remix/router";

import { keepChallenge, RELYING_PARTY } from "~/app/services/passkey";
import routes from "~/routes/web";

/** POST /passkey/challenge — starts a usernameless ceremony. */
export default createAction(routes.passkey.challenge, () => {
	let { challenge, options } = RELYING_PARTY.authenticate();
	keepChallenge(challenge);
	return Response.json(options);
});

import { isFailure } from "@sdxc/result";
import { createAction } from "remix/router";

import Passkey from "~/app/data/passkey";
import { RELYING_PARTY, spendChallenge } from "~/app/services/passkey";
import { openSession } from "~/app/services/session";
import routes from "~/routes/web";

/** POST /passkey/verify — accepts an assertion and signs the account in. */
export default createAction(routes.passkey.verify, async (ctx) => {
	let challenge = spendChallenge();
	if (!challenge) return Response.json({ error: "rejected" }, { status: 400 });

	let response = (await ctx.request.json()) as AuthenticationResponseJSON;

	let passkey = await Passkey.findByCredentialId(ctx.db, response.id);
	if (!passkey) return Response.json({ error: "rejected" }, { status: 400 });

	let result = await RELYING_PARTY.verifyAuthentication(response, { challenge, passkey });
	if (isFailure(result)) {
		ctx.log.warn("passkey.rejected", { reason: result.error.name });
		return Response.json({ error: "rejected" }, { status: 400 });
	}

	await Passkey.recordUse(ctx.db, passkey.id, result.data.counter);
	await openSession(passkey.accountId);

	return Response.json({ redirect: routes.dashboard.href() });
});

router.map(routes.passkey.challenge, challenge);
router.map(routes.passkey.verify, verify);

import type { Handle } from "remix/ui";

import { CancelledError, Passkey } from "@sdxc/passkey/client";
import { isFailure } from "@sdxc/result";
import { clientEntry, on } from "remix/ui";

/**
 * Declared as a `type` to satisfy the serializable-props constraint a client
 * entry's props are checked against.
 */
type PasskeySignInProps = {
	challengeUrl: string;
	verifyUrl: string;
	label: string;
};

/**
 * Signs in with a passkey, offering one through autofill as the page loads and
 * through an explicit button for anyone whose browser skips the autofill menu.
 */
export const PasskeySignIn = clientEntry(
	"/resources/components/passkey-sign-in.tsx#PasskeySignIn",
	function PasskeySignIn(handle: Handle<PasskeySignInProps>) {
		let message: string | null = null;

		/** Fetches options, runs one ceremony, and posts the assertion back. */
		async function signIn(autofill: boolean) {
			let { challengeUrl, verifyUrl } = handle.props;
			let options = await fetch(challengeUrl, { method: "POST" }).then((body) => body.json());

			let result = autofill
				? await Passkey.autofill(options, { signal: handle.signal })
				: await Passkey.authenticate(options);

			if (isFailure(result)) {
				if (result.error instanceof CancelledError) return;
				message = result.error.message;
				return void handle.update();
			}

			let verified = await fetch(verifyUrl, {
				method: "POST",
				headers: { "content-type": "application/json" },
				body: JSON.stringify(result.data),
			});

			if (!verified.ok) {
				message = "That passkey was not accepted.";
				return void handle.update();
			}

			let { redirect } = (await verified.json()) as { redirect: string };
			location.assign(redirect);
		}

		void signIn(true);

		return () => (
			<>
				<button type="button" mix={[on("click", () => void signIn(false))]}>
					{handle.props.label}
				</button>
				{message && <p role="alert">{message}</p>}
			</>
		);
	},
);

export default PasskeySignIn;

<form method="post" action={routes.signIn.action.href()}>
	<input type="text" name="email" autocomplete="username webauthn" />
	<PasskeySignIn
		challengeUrl={routes.passkey.challenge.href()}
		verifyUrl={routes.passkey.verify.href()}
		label="Sign in with a passkey"
	/>
</form>

/** POST /passkey/register/challenge — enrolls a passkey for the signed-in account. */
export default createAction(routes.passkey.register.challenge, async (ctx) => {
	let account = await currentAccount(ctx);

	let { challenge, options } = RELYING_PARTY.register({
		user: { id: account.id, name: account.email },
		exclude: await Passkey.listIds(ctx.db, account.id),
	});

	keepChallenge(challenge);
	return Response.json(options);
});

/** POST /passkey/register/verify — stores the new credential. */
export default createAction(routes.passkey.register.verify, async (ctx) => {
	let challenge = spendChallenge();
	if (!challenge) return Response.json({ error: "rejected" }, { status: 400 });

	let result = await RELYING_PARTY.verifyRegistration(ctx.request, { challenge });
	if (isFailure(result)) {
		ctx.log.warn("passkey.registration_rejected", { reason: result.error.name });
		return Response.json({ error: "rejected" }, { status: 400 });
	}

	let account = await currentAccount(ctx);
	await Passkey.create(ctx.db, { accountId: account.id, ...result.data });

	return Response.json({ redirect: routes.dashboard.href() });
});

let { challenge, options } = rp.authenticate();
session.set("passkeyChallenge", challenge);
return Response.json(options);

let challenge = session.get("passkeyChallenge");
session.unset("passkeyChallenge");

let result = await rp.verifyAuthentication(request, { challenge, passkey });

let account = await db.accounts.find(session.get("accountId"));

let { challenge, options } = rp.authenticate({
	allow: account.passkeys.map((passkey) => ({ id: passkey.id, transports: passkey.transports })),
	userVerification: "required",
});

let result = await rp.verifyAuthentication(request, {
	challenge,
	passkey,
	userVerification: "required",
});

import { AlreadyRegisteredError, CancelledError, UnsupportedError } from "@sdxc/passkey/client";
import { isFailure } from "@sdxc/result";

let result = await Passkey.register(options);

if (isFailure(result)) {
	if (result.error instanceof CancelledError) return;
	if (result.error instanceof AlreadyRegisteredError) return goToSignIn();
	if (result.error instanceof UnsupportedError) return offerAnotherMethod();
	return showMessage(result.error.message);
}