WebAuthn 策略 - Remix Auth

import { createCookieSessionStorage } from "react-router";
import { User } from "~/utils/db.server";

type SessionData = {
  user: User;
  challenge?: string;
};

type SessionFlashData = {
  error: string;
};

export const userSession = createCookieSessionStorage<
  SessionData,
  SessionFlashData
>({
  cookie: {
    name: "__session",
    httpOnly: true,
    maxAge: 60 * 60 * 24 * 30, // One month
    path: "/",
    sameSite: "lax",
    secrets: ["s3cret1"],
    secure: process.env.NODE_ENV === "production",
  },
});

interface Authenticator {
  // SQL: Encode to base64url then store as `TEXT` or a large `VARCHAR(511)`. Index this column
  credentialID: string;
  // Some reference to the user object. Consider indexing this column too
  userId: string;
  // SQL: Encode to base64url and store as `TEXT`
  credentialPublicKey: string;
  // SQL: Consider `BIGINT` since some authenticators return atomic timestamps as counters
  counter: number;
  // SQL: `VARCHAR(32)` or similar, longest possible value is currently 12 characters
  // Ex: 'singleDevice' | 'multiDevice'
  credentialDeviceType: string;
  // SQL: `BOOL` or whatever similar type is supported
  credentialBackedUp: boolean;
  // SQL: `VARCHAR(255)` and store string array or a CSV string
  // Ex: ['usb' | 'ble' | 'nfc' | 'internal']
  transports: string;
  // SQL: `VARCHAR(36)` or similar, since AAGUIDs are 36 characters in length
  aaguid: string;
}

// /app/authenticator.server.ts
import { Authenticator } from "remix-auth";
import {
  WebAuthnStrategy,
  Authenticator as WebAuthnAuthenticator,
} from "remix-auth-webauthn";
import {
  createAuthenticator,
  createUser,
  getAuthenticatorById,
  getAuthenticators,
  getUserById,
  getUserByUsername,
  User,
} from "~/utils/db.server";

export let authenticator = new Authenticator<User>();

export const webAuthnStrategy = new WebAuthnStrategy<User>(
  {
    // The React Router session storage where the "challenge" key is stored
    sessionStorage: userSession,
    // The human-readable name of your app
    // Type: string | (response:Response) => Promise<string> | string
    rpName: "Remix Auth WebAuthn",
    // The hostname of the website, determines where passkeys can be used
    // See https://www.w3.org/TR/webauthn-2/#relying-party-identifier
    // Type: string | (response:Response) => Promise<string> | string
    rpID: (request) => new URL(request.url).hostname,
    // Website URL (or array of URLs) where the registration can occur
    origin: (request) => new URL(request.url).origin,
    // Return the list of authenticators associated with this user. You might
    // need to transform a CSV string into a list of strings at this step.
    getUserAuthenticators: async (user) => {
      const authenticators = await getAuthenticators(user);

      return authenticators.map((authenticator) => ({
        ...authenticator,
        transports: authenticator.transports.split(","),
      }));
    },
    // Transform the user object into the shape expected by the strategy.
    // You can use a regular username, the users email address, or something else.
    getUserDetails: (user) =>
      user ? { id: user.id, username: user.username } : null,
    // Find a user in the database with their username/email.
    getUserByUsername: (username) => getUserByUsername(username),
    getAuthenticatorById: (id) => getAuthenticatorById(id),
  },
  async function verify({ authenticator, type, username }) {
    // ...Implement later
  }
);

authenticator.use(webAuthnStrategy);

const webAuthnStrategy = new WebAuthnStrategy(
  {
    // Options here...
  },
  async function verify({ authenticator, type, username }) {
    let user: User | null = null;
    const savedAuthenticator = await getAuthenticatorById(authenticator.id);
    if (type === "registration") {
      // Check if the authenticator exists in the database
      if (savedAuthenticator) {
        throw new Error("Authenticator has already been registered.");
      } else {
        // Username is null for authentication verification,
        // but required for registration verification.
        // It is unlikely this error will ever be thrown,
        // but it helps with the TypeScript checking
        if (!username) throw new Error("Username is required.");
        user = await getUserByUsername(username);

        // Don't allow someone to register a passkey for
        // someone elses account.
        if (user) throw new Error("User already exists.");

        // Create a new user and authenticator
        user = await createUser(username);
        await createAuthenticator(authenticator, user.id);
      }
    } else if (type === "authentication") {
      if (!savedAuthenticator) throw new Error("Authenticator not found");
      user = await getUserById(savedAuthenticator.userId);
    }

    if (!user) throw new Error("User not found");
    return user;
  }
);

// /app/routes/_auth.login.ts
import type { Route } from "./+types/home";

export async function loader({ request }: Route.LoaderArgs) {
  const session = await userSession.getSession(request.headers.get("cookie"));
  const user = session.get("user");
  const options = await webAuthnStrategy.generateOptions(request, user);

  // Set the challenge in a session cookie so it can be accessed later.
  session.set("challenge", options.challenge);

  // Update the cookie
  return data(
    { options, user },
    {
      headers: {
        "Set-Cookie": await userSession.commitSession(session),
        "Cache-Control": "no-store",
      },
    }
  );
}

export async function action({ request }: Route.ActionArgs) {
  const session = await userSession.getSession(request.headers.get("cookie"));

  try {
    const user = await authenticator.authenticate("webauthn", request);
    session.set("user", user);

    // Redirect to the logged-in page.
    throw redirect("/", {
      headers: {
        "Set-Cookie": await userSession.commitSession(session),
      },
    });
  } catch (error) {
    // This allows us to return errors to the page without triggering the error boundary.
    if (error instanceof Error) {
      return { error, user: null };
    }
    // Throw other errors, such as responses that need to redirect the browser.
    throw error;
  }
}

// /app/routes/_auth.login.ts
import { handleFormSubmit } from "remix-auth-webauthn/browser";

export default function Home({ loaderData, actionData }: Route.ComponentProps) {
  return (
    <Form
      onSubmit={handleFormSubmit(loaderData.options)}
      method="POST"
      className="flex flex-col gap-2 m-8 w-64"
    >
      <label>Username</label>
      <input
        type="text"
        name="username"
        placeholder="alexanderson1993"
        className="p-2 rounded"
      />
      <button formMethod="GET" className="px-2 py-1 bg-blue-500 rounded">
        Check Username
      </button>
      <button
        name="intent"
        value="registration"
        disabled={loaderData.options.usernameAvailable !== true}
        className="px-2 py-1 bg-orange-500 rounded disabled:opacity-50"
      >
        Register
      </button>
      <button
        name="intent"
        value="authentication"
        className="px-2 py-1 bg-green-500 rounded"
      >
        Authenticate
      </button>
      {actionData?.error ? <div>{actionData.error.message}</div> : null}
    </Form>
  )
}

onSubmit={handleFormSubmit(options, { attestationType: "direct" })}

// /app/routes/settings.tsx
export async function loader({ request }: LoaderFunctionArgs) {
  const user = await authenticator.isAuthenticated(request);
  if (!user) {
    return redirect("/login");
  }

  const authenticators = await webAuthnStrategy.getUserAuthenticators(user);

  return json({ authenticators });
};

export default function Settings() {
  const data = useLoaderData();

  return (
    <ul>
      {data.authenticators.map((authenticator) => (
        ...
      ))}
    </ul>
  );
}