NestJS Auth Done Right: Passkeys, Sessions vs JWT, and Refresh Token Rotation

Set-Cookie: __Secure-rt=Vb9w...Q2k; Path=/api/auth; Expires=Sat, 07 Nov 2026 09:12:44 GMT; HttpOnly; Secure; SameSite=Strict
Cache-Control: no-store

import { Injectable } from "@nestjs/common";
import { Redis } from "ioredis";
import { createHash, randomBytes } from "node:crypto";

const IDLE_TTL_S = 30 * 60; // expires after 30 minutes of inactivity
const ABSOLUTE_TTL_MS = 12 * 60 * 60 * 1000; // 12 hours max, regardless of activity

interface SessionData {
  userId: string;
  createdAt: number;
}

const key = (sid: string) => `sess:${createHash("sha256").update(sid).digest("base64url")}`;

@Injectable()
export class SessionStore {
  constructor(private readonly redis: Redis) {}

  /** Always create a new ID after login — prevents session fixation. */
  async create(userId: string): Promise<string> {
    const sid = randomBytes(32).toString("base64url");
    const data: SessionData = { userId, createdAt: Date.now() };
    await this.redis.set(key(sid), JSON.stringify(data), "EX", IDLE_TTL_S);
    await this.redis.sadd(`user-sess:${userId}`, key(sid)); // for "sign out everywhere"
    return sid;
  }

  async touch(sid: string): Promise<SessionData | null> {
    const raw = await this.redis.get(key(sid));
    if (!raw) return null;
    const data = JSON.parse(raw) as SessionData;
    if (Date.now() - data.createdAt > ABSOLUTE_TTL_MS) {
      await this.redis.del(key(sid));
      return null;
    }
    await this.redis.expire(key(sid), IDLE_TTL_S); // extend the idle timeout
    return data;
  }

  async destroyAll(userId: string): Promise<void> {
    const keys = await this.redis.smembers(`user-sess:${userId}`);
    if (keys.length) await this.redis.del(...keys);
    await this.redis.del(`user-sess:${userId}`);
  }
}

import { Injectable, UnauthorizedException } from "@nestjs/common";
import * as argon2 from "argon2";
import { UserRepository } from "../users/user.repository";

const PARAMS = { type: argon2.argon2id, memoryCost: 19_456, timeCost: 2, parallelism: 1 } as const;

@Injectable()
export class PasswordService {
  // Dummy hash so a nonexistent user takes exactly as long as a real one
  private readonly dummyHash = argon2.hash("not-a-real-password", PARAMS);

  constructor(private readonly users: UserRepository) {}

  hash(plain: string): Promise<string> {
    return argon2.hash(plain, PARAMS); // yields a PHC string: $argon2id$v=19$m=19456,t=2,p=1$...
  }

  async verifyLogin(email: string, plain: string): Promise<string> {
    const user = await this.users.findByEmail(email.trim().toLowerCase());
    const ok = await argon2.verify(user?.passwordHash ?? (await this.dummyHash), plain);
    if (!user || !ok) throw new UnauthorizedException("Incorrect email or password");

    // Upgrade an old hash the moment we have the plaintext password in hand
    if (argon2.needsRehash(user.passwordHash, PARAMS)) {
      await this.users.updatePasswordHash(user.id, await this.hash(plain));
    }
    return user.id;
  }
}

import {
  CanActivate, ExecutionContext, Injectable, SetMetadata,
  UnauthorizedException, createParamDecorator,
} from "@nestjs/common";
import { Reflector } from "@nestjs/core";
import { JwtService } from "@nestjs/jwt";
import type { Request } from "express";

export interface AccessClaims {
  sub: string; // user id
  sid: string; // id of the token family (the login session)
  roles: string[];
}

declare module "express-serve-static-core" {
  interface Request {
    auth?: AccessClaims;
  }
}

export const IS_PUBLIC = "auth:isPublic";
export const Public = (value = true) => SetMetadata(IS_PUBLIC, value);
export const Auth = createParamDecorator(
  (_: unknown, ctx: ExecutionContext) => ctx.switchToHttp().getRequest<Request>().auth,
);


@Injectable()
export class AccessTokenGuard implements CanActivate {
  constructor(private readonly reflector: Reflector, private readonly jwt: JwtService) {}

  async canActivate(ctx: ExecutionContext): Promise<boolean> {
    const isPublic = this.reflector.getAllAndOverride<boolean>(IS_PUBLIC, [
      ctx.getHandler(),
      ctx.getClass(),
    ]);
    if (isPublic) return true;

    const req = ctx.switchToHttp().getRequest<Request>();
    const [scheme, token] = req.headers.authorization?.split(" ") ?? [];
    if (scheme !== "Bearer" || !token) throw new UnauthorizedException();

    try {
      // Pin the algorithm, issuer and audience — don't trust the token's "alg" header
      req.auth = await this.jwt.verifyAsync<AccessClaims>(token, {
        algorithms: ["HS256"],
        issuer: "https://api.example.com",
        audience: "web",
      });
      return true;
    } catch {
      throw new UnauthorizedException();
    }
  }
}

import { CanActivate, ExecutionContext, Injectable } from "@nestjs/common";
import { Reflector } from "@nestjs/core";
import type { Request } from "express";

export type Role = "admin" | "editor" | "member";
export const Roles = Reflector.createDecorator<Role[]>();

@Injectable()
export class RolesGuard implements CanActivate {
  constructor(private readonly reflector: Reflector) {}

  canActivate(ctx: ExecutionContext): boolean {
    const required = this.reflector.getAllAndOverride(Roles, [ctx.getHandler(), ctx.getClass()]);
    if (!required?.length) return true;
    const { auth } = ctx.switchToHttp().getRequest<Request>();
    // false -> Nest throws ForbiddenException (403) on its own
    return !!auth && required.some((role) => auth.roles.includes(role));
  }
}

// Usage: @Roles(["admin"]) on a controller or method

import { AbilityBuilder, createMongoAbility, type InferSubjects, type MongoAbility } from "@casl/ability";
import type { AccessClaims } from "./access-token.guard";

interface Post { kind: "Post"; id: string; authorId: string; status: "draft" | "published" }
type Action = "manage" | "read" | "update" | "publish";
export type AppAbility = MongoAbility<[Action, InferSubjects<Post> | "all"]>;

export function defineAbilityFor(user: AccessClaims): AppAbility {
  const { can, cannot, build } = new AbilityBuilder<AppAbility>(createMongoAbility);
  can("read", "Post", { status: "published" });
  can(["read", "update"], "Post", { authorId: user.sub });
  cannot("update", "Post", { status: "published" }); // authors can only edit drafts
  if (user.roles.includes("editor")) can("publish", "Post");
  if (user.roles.includes("admin")) can("manage", "all"); // put last so it wins over the rules above
  return build({ detectSubjectType: (subject) => subject.kind });
}

// In a service, after loading the post:
// if (defineAbilityFor(auth).cannot("update", post)) throw new ForbiddenException();

import { Module } from "@nestjs/common";
import { APP_GUARD } from "@nestjs/core";
import { ThrottlerGuard, ThrottlerModule, minutes } from "@nestjs/throttler";
import { AccessTokenGuard } from "./auth/access-token.guard";
import { RolesGuard } from "./auth/roles.guard";

@Module({
  imports: [
    ThrottlerModule.forRoot({
      throttlers: [{ name: "default", ttl: minutes(1), limit: 120 }],
      // Running multiple instances? Add Redis storage, e.g. @nest-lab/throttler-storage-redis
    }),
  ],
  providers: [
    // APP_GUARDs run in registration order: block floods first, then authenticate, then authorize
    { provide: APP_GUARD, useClass: ThrottlerGuard },
    { provide: APP_GUARD, useClass: AccessTokenGuard },
    { provide: APP_GUARD, useClass: RolesGuard },
  ],
})
export class AppModule {}

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  async rewrites() {
    return [{ source: "/api/:path*", destination: `${process.env.API_INTERNAL_URL}/api/:path*` }];
  },
};

export default nextConfig;

CREATE TABLE token_families (
  id                  uuid PRIMARY KEY,
  user_id             uuid NOT NULL REFERENCES users(id) ON DELETE CASCADE,
  created_at          timestamptz NOT NULL DEFAULT now(),
  absolute_expires_at timestamptz NOT NULL,
  revoked_at          timestamptz,
  revoke_reason       text,
  user_agent          text
);
CREATE INDEX token_families_active ON token_families (user_id) WHERE revoked_at IS NULL;

CREATE TABLE refresh_tokens (
  id          uuid PRIMARY KEY,
  family_id   uuid NOT NULL REFERENCES token_families(id) ON DELETE CASCADE,
  user_id     uuid NOT NULL,
  token_hash  text NOT NULL UNIQUE,  -- SHA-256 base64url, never store the raw token
  expires_at  timestamptz NOT NULL,
  used_at     timestamptz            -- kept after use so replays can be detected
);

-- The core of consumeAndReplace(): compare-and-set inside one transaction
UPDATE refresh_tokens SET used_at = now() WHERE id = $1 AND used_at IS NULL;
-- rowCount = 1: this request won, INSERT the new token in the same transaction
-- rowCount = 0: the token was already used -> reuse

export type RevokeReason = "logout" | "logout_all" | "reuse_detected" | "password_changed";

export interface TokenFamily {
  id: string;
  userId: string;
  absoluteExpiresAt: Date;
  revokedAt: Date | null;
  userAgent: string | null;
}

export interface RefreshTokenRow {
  id: string;
  familyId: string;
  userId: string;
  tokenHash: string;
  expiresAt: Date;
  usedAt: Date | null;
}

export type NewRefreshToken = Omit<RefreshTokenRow, "usedAt">;

export abstract class RefreshTokenRepository {
  abstract createFamily(input: Omit<TokenFamily, "id" | "revokedAt">): Promise<TokenFamily>;
  abstract findFamily(id: string): Promise<TokenFamily | null>;
  abstract findByHash(tokenHash: string): Promise<RefreshTokenRow | null>;
  abstract insert(token: NewRefreshToken): Promise<void>;
  /** One transaction: mark the old token as used (if it isn't yet) and insert the new one. */
  abstract consumeAndReplace(oldId: string, next: NewRefreshToken): Promise<boolean>;
  abstract revokeFamily(familyId: string, reason: RevokeReason): Promise<void>;
  abstract revokeAllForUser(userId: string, reason: RevokeReason): Promise<void>;
}

import { Injectable, Logger, UnauthorizedException } from "@nestjs/common";
import { JwtService } from "@nestjs/jwt";
import { createHash, randomBytes, randomUUID } from "node:crypto";
import { RefreshTokenRepository, type NewRefreshToken, type RevokeReason } from "./refresh-token.repository";
import { UserRepository } from "../users/user.repository";

const IDLE_MS = 14 * 24 * 3600 * 1000; // a refresh token unused for 14 days dies
const ABSOLUTE_MS = 60 * 24 * 3600 * 1000; // the whole family lives 60 days at most
export const ACCESS_TTL_S = 600; // matches JwtModule's signOptions.expiresIn

export interface IssuedTokens {
  accessToken: string;
  refreshToken: string;
  refreshExpiresAt: Date;
}

const sha256 = (v: string) => createHash("sha256").update(v).digest("base64url");

@Injectable()
export class RefreshTokenService {
  private readonly logger = new Logger(RefreshTokenService.name);

  constructor(
    private readonly repo: RefreshTokenRepository,
    private readonly users: UserRepository,
    private readonly jwt: JwtService,
  ) {}

  /** After a successful sign-in (password or passkey): open a new family. */
  async startSession(userId: string, userAgent: string | null): Promise<IssuedTokens> {
    const family = await this.repo.createFamily({
      userId,
      userAgent,
      absoluteExpiresAt: new Date(Date.now() + ABSOLUTE_MS),
    });
    const next = this.mint(userId, family.id, family.absoluteExpiresAt);
    await this.repo.insert(next.row);
    return this.issue(userId, family.id, next);
  }

  async rotate(presented: string): Promise<IssuedTokens> {
    const now = new Date();
    const token = await this.repo.findByHash(sha256(presented));
    if (!token) throw new UnauthorizedException();

    const family = await this.repo.findFamily(token.familyId);
    if (!family || family.revokedAt || family.absoluteExpiresAt <= now) {
      throw new UnauthorizedException();
    }
    if (token.usedAt) return this.reuseDetected(token.userId, family.id);
    if (token.expiresAt <= now) throw new UnauthorizedException();

    const next = this.mint(token.userId, family.id, family.absoluteExpiresAt);
    const won = await this.repo.consumeAndReplace(token.id, next.row);
    if (!won) return this.reuseDetected(token.userId, family.id); // lost the CAS race

    return this.issue(token.userId, family.id, next);
  }

  async revokeByToken(presented: string, reason: RevokeReason): Promise<void> {
    const token = await this.repo.findByHash(sha256(presented));
    if (token) await this.repo.revokeFamily(token.familyId, reason);
  }

  revokeAll(userId: string, reason: RevokeReason): Promise<void> {
    return this.repo.revokeAllForUser(userId, reason);
  }

  private async reuseDetected(userId: string, familyId: string): Promise<never> {
    await this.repo.revokeFamily(familyId, "reuse_detected");
    // A genuine security event: structured log, feed it to alerting, consider notifying the user
    this.logger.warn({ event: "refresh_token_reuse", userId, familyId });
    throw new UnauthorizedException();
  }

  private mint(userId: string, familyId: string, familyExpiresAt: Date) {
    const value = randomBytes(32).toString("base64url");
    const expiresAt = new Date(Math.min(Date.now() + IDLE_MS, familyExpiresAt.getTime()));
    const row: NewRefreshToken = { id: randomUUID(), familyId, userId, tokenHash: sha256(value), expiresAt };
    return { value, row };
  }

  private async issue(userId: string, familyId: string, next: { value: string; row: NewRefreshToken }) {
    // Read the latest roles on every refresh: a role change takes effect after ACCESS_TTL_S at most
    const roles = await this.users.getRoles(userId);
    const accessToken = await this.jwt.signAsync({ sub: userId, sid: familyId, roles });
    return { accessToken, refreshToken: next.value, refreshExpiresAt: next.row.expiresAt };
  }
}

import {
  Body, Controller, ForbiddenException, HttpCode, Post, Req, Res, UnauthorizedException,
} from "@nestjs/common";
import { Throttle, minutes } from "@nestjs/throttler";
import type { CookieOptions, Request, Response } from "express";
import { Auth, Public, type AccessClaims } from "./access-token.guard";
import { PasswordService } from "./password.service";
import { ACCESS_TTL_S, RefreshTokenService, type IssuedTokens } from "./refresh-token.service";
import { LoginDto } from "./login.dto";

const RT_COOKIE = "__Secure-rt";
const rtCookie = (expires?: Date): CookieOptions => ({
  httpOnly: true,
  secure: true,
  sameSite: "strict",
  path: "/api/auth", // the path the browser sees, not the path after the rewrite
  ...(expires && { expires }),
});

/** A request that uses the cookie must come from our own app. */
export function assertSameOrigin(req: Request): void {
  const site = req.get("sec-fetch-site");
  const origin = req.get("origin");
  if (site ? site !== "same-origin" : origin !== process.env.APP_ORIGIN) {
    throw new ForbiddenException();
  }
}

@Public()
@Controller("auth")
export class AuthController {
  constructor(private readonly passwords: PasswordService, private readonly tokens: RefreshTokenService) {}

  @Post("login")
  @HttpCode(200)
  @Throttle({ default: { limit: 5, ttl: minutes(1), blockDuration: minutes(5) } })
  async login(@Body() dto: LoginDto, @Req() req: Request, @Res({ passthrough: true }) res: Response) {
    assertSameOrigin(req);
    const userId = await this.passwords.verifyLogin(dto.email, dto.password);
    return this.respond(res, await this.tokens.startSession(userId, req.get("user-agent") ?? null));
  }

  @Post("refresh")
  @HttpCode(200)
  @Throttle({ default: { limit: 20, ttl: minutes(1) } })
  async refresh(@Req() req: Request, @Res({ passthrough: true }) res: Response) {
    assertSameOrigin(req);
    const presented: string | undefined = req.cookies?.[RT_COOKIE];
    if (!presented) throw new UnauthorizedException();
    try {
      return this.respond(res, await this.tokens.rotate(presented));
    } catch (err) {
      res.clearCookie(RT_COOKIE, rtCookie()); // a dead token means clearing the cookie too
      throw err;
    }
  }

  @Post("logout")
  @HttpCode(204)
  async logout(@Req() req: Request, @Res({ passthrough: true }) res: Response) {
    assertSameOrigin(req);
    const presented: string | undefined = req.cookies?.[RT_COOKIE];
    if (presented) await this.tokens.revokeByToken(presented, "logout");
    res.clearCookie(RT_COOKIE, rtCookie());
  }

  @Public(false) // override: this route needs an access token
  @Post("logout-all")
  @HttpCode(204)
  async logoutAll(@Auth() auth: AccessClaims, @Res({ passthrough: true }) res: Response) {
    await this.tokens.revokeAll(auth.sub, "logout_all");
    res.clearCookie(RT_COOKIE, rtCookie());
  }

  private respond(res: Response, t: IssuedTokens) {
    res.cookie(RT_COOKIE, t.refreshToken, rtCookie(t.refreshExpiresAt));
    res.setHeader("Cache-Control", "no-store");
    return { accessToken: t.accessToken, expiresIn: ACCESS_TTL_S };
  }
}

import { BadRequestException, Injectable, UnauthorizedException } from "@nestjs/common";
import {
  generateAuthenticationOptions, generateRegistrationOptions,
  verifyAuthenticationResponse, verifyRegistrationResponse,
  type AuthenticationResponseJSON, type RegistrationResponseJSON,
} from "@simplewebauthn/server";
import { Redis } from "ioredis";
import { randomBytes } from "node:crypto";
import { PasskeyRepository } from "./passkey.repository";
import { UserRepository } from "../users/user.repository";

const RP_ID = "example.com"; // the domain, with no scheme or port
const ORIGIN = "https://app.example.com"; // the full origin the browser writes into clientDataJSON
const CHALLENGE_TTL_S = 300;

type Ceremony = { challenge: string; userId?: string };

@Injectable()
export class PasskeyService {
  constructor(
    private readonly redis: Redis,
    private readonly passkeys: PasskeyRepository,
    private readonly users: UserRepository,
  ) {}

  async registrationOptions(userId: string) {
    const user = await this.users.findById(userId);
    const existing = await this.passkeys.listByUser(userId);
    const options = await generateRegistrationOptions({
      rpName: "Example",
      rpID: RP_ID,
      userName: user.email,
      userDisplayName: user.email,
      // A random user handle, stable per user — not the email or an internal id
      userID: new Uint8Array(Buffer.from(user.webauthnUserId, "base64url")),
      excludeCredentials: existing.map((p) => ({ id: p.id, transports: p.transports })),
      authenticatorSelection: { residentKey: "required", userVerification: "required" },
    });
    return { options, ceremonyId: await this.save("reg", { challenge: options.challenge, userId }) };
  }

  async verifyRegistration(userId: string, ceremonyId: string | undefined, response: RegistrationResponseJSON) {
    const ceremony = await this.take("reg", ceremonyId);
    if (ceremony.userId !== userId) throw new BadRequestException();
    const result = await verifyRegistrationResponse({
      response,
      expectedChallenge: ceremony.challenge,
      expectedOrigin: ORIGIN,
      expectedRPID: RP_ID,
    }).catch(() => null);
    if (!result?.verified) throw new BadRequestException("Could not verify the passkey");

    const { credential, credentialDeviceType, credentialBackedUp } = result.registrationInfo;
    await this.passkeys.create({
      id: credential.id,
      userId,
      publicKey: credential.publicKey, // Uint8Array -> bytea column
      counter: credential.counter,
      transports: credential.transports ?? [],
      deviceType: credentialDeviceType,
      backedUp: credentialBackedUp,
    });
  }

  async authenticationOptions() {
    // Empty allowCredentials: discoverable credential, no username needed, no account leaked
    const options = await generateAuthenticationOptions({ rpID: RP_ID, userVerification: "required" });
    return { options, ceremonyId: await this.save("auth", { challenge: options.challenge }) };
  }

  /** Returns the userId if valid. */
  async verifyAuthentication(ceremonyId: string | undefined, response: AuthenticationResponseJSON) {
    const { challenge } = await this.take("auth", ceremonyId);
    const passkey = await this.passkeys.findById(response.id);
    if (!passkey) throw new UnauthorizedException();

    const result = await verifyAuthenticationResponse({
      response,
      expectedChallenge: challenge,
      expectedOrigin: ORIGIN,
      expectedRPID: RP_ID,
      credential: {
        id: passkey.id,
        publicKey: new Uint8Array(passkey.publicKey),
        counter: passkey.counter,
        transports: passkey.transports,
      },
    }).catch(() => null); // bad signature, wrong origin, counter going backwards... all throw
    if (!result?.verified) throw new UnauthorizedException();

    await this.passkeys.updateUsage(passkey.id, {
      counter: result.authenticationInfo.newCounter,
      backedUp: result.authenticationInfo.credentialBackedUp,
      lastUsedAt: new Date(),
    });
    return passkey.userId;
  }

  private async save(kind: "reg" | "auth", data: Ceremony): Promise<string> {
    const id = randomBytes(16).toString("base64url");
    await this.redis.set(`webauthn:${kind}:${id}`, JSON.stringify(data), "EX", CHALLENGE_TTL_S);
    return id;
  }

  private async take(kind: "reg" | "auth", id: string | undefined): Promise<Ceremony> {
    // GETDEL: read and delete in one command — a challenge can be used only once
    const raw = id ? await this.redis.getdel(`webauthn:${kind}:${id}`) : null;
    if (!raw) throw new BadRequestException("Challenge does not exist or has expired");
    return JSON.parse(raw) as Ceremony;
  }
}

let accessToken: string | null = null;
let inflight: Promise<string | null> | null = null;

export const setAccessToken = (token: string | null) => {
  accessToken = token;
};

function refresh(): Promise<string | null> {
  // Single-flight within a tab + Web Locks across tabs
  inflight ??= navigator.locks
    .request("auth-refresh", async () => {
      const res = await fetch("/api/auth/refresh", { method: "POST" });
      if (!res.ok) return null;
      const body = (await res.json()) as { accessToken: string };
      return body.accessToken;
    })
    .then((token) => (accessToken = token))
    .finally(() => (inflight = null));
  return inflight;
}

export async function apiFetch(input: string, init: RequestInit = {}): Promise<Response> {
  const send = (token: string | null) => {
    const headers = new Headers(init.headers);
    if (token) headers.set("Authorization", `Bearer ${token}`);
    return fetch(input, { ...init, headers });
  };

  const res = await send(accessToken ?? (await refresh()));
  if (res.status !== 401) return res;

  const token = await refresh();
  if (!token) {
    window.location.assign("/login");
    return res;
  }
  return send(token);
}

"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { WebAuthnError, browserSupportsWebAuthnAutofill, startAuthentication } from "@simplewebauthn/browser";
import { setAccessToken } from "@/lib/auth-client";

async function signInWithPasskey(useBrowserAutofill: boolean): Promise<void> {
  const optionsJSON = await (await fetch("/api/auth/passkey/options", { method: "POST" })).json();
  const assertion = await startAuthentication({ optionsJSON, useBrowserAutofill });
  const res = await fetch("/api/auth/passkey/verify", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(assertion),
  });
  if (!res.ok) throw new Error("passkey_failed");
  setAccessToken((await res.json()).accessToken);
}

export function LoginForm() {
  const router = useRouter();
  const [error, setError] = useState<string | null>(null);

  const run = (autofill: boolean) =>
    signInWithPasskey(autofill)
      .then(() => router.replace("/dashboard"))
      .catch((err: unknown) => {
        // A new call aborts the pending conditional call (and Strict Mode runs effects twice)
        if (err instanceof WebAuthnError && err.code === "ERROR_CEREMONY_ABORTED") return;
        setError("Couldn't sign in with a passkey. Try again or use your password.");
      });

  useEffect(() => {
    browserSupportsWebAuthnAutofill().then((ok) => ok && run(true));
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  async function onSubmit(form: FormData) {
    const res = await fetch("/api/auth/login", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ email: form.get("email"), password: form.get("password") }),
    });
    if (!res.ok) return setError("Incorrect email or password.");
    setAccessToken((await res.json()).accessToken);
    router.replace("/dashboard");
  }

  return (
    <form action={onSubmit}>
      <input name="email" type="email" autoComplete="username webauthn" required />
      <input name="password" type="password" autoComplete="current-password" />
      <button type="submit">Sign in</button>
      <button type="button" onClick={() => run(false)}>Use a passkey</button>
      {error && <p role="alert">{error}</p>}
    </form>
  );
}