4 files changed, 571 insertions, 0 deletions
diff --git a/app/routes/api.passkey.tsx b/app/routes/api.passkey.tsx
new file mode 100644
index 0000000..1ab0537
--- /dev/null
+++ b/app/routes/api.passkey.tsx
@@ -0,0 +1,163 @@
+import {
+  generateRegistrationOptions,
+  verifyRegistrationResponse,
+  generateAuthenticationOptions,
+  verifyAuthenticationResponse,
+  type RegistrationResponseJSON,
+  type AuthenticationResponseJSON,
+  type AuthenticatorTransportFuture,
+} from "@simplewebauthn/server";
+import type { Route } from "./+types/api.passkey";
+import { getSession, commitSession } from "~/lib/session.server";
+import {
+  upsertUser,
+  getUserById,
+  getCredentialById,
+  listCredentials,
+  saveCredential,
+  updateCredentialCounter,
+} from "~/lib/db.server";
+import { rpID, rpName, origin } from "~/lib/passkey.server";
+
+function uuidToBytes(uuid: string): Uint8Array {
+  const hex = uuid.replace(/-/g, "");
+  const bytes = new Uint8Array(16);
+  for (let i = 0; i < 16; i++) bytes[i] = parseInt(hex.slice(i * 2, i * 2 + 2), 16);
+  return bytes;
+}
+
+export async function action({ request }: Route.ActionArgs) {
+  const url = new URL(request.url);
+  const intent = url.searchParams.get("intent");
+  const session = await getSession(request.headers.get("Cookie"));
+
+  if (intent === "reg-options") {
+    const body = (await request.json()) as { username?: string; token?: string };
+    const registerToken = process.env.REGISTER_TOKEN;
+    if (!registerToken || body.token !== registerToken) {
+      return Response.json({ error: "トークンが違います" }, { status: 403 });
+    }
+    const username = (body.username ?? "").trim();
+    if (!username) return Response.json({ error: "ユーザー名を入力してください" }, { status: 400 });
+
+    const userId = crypto.randomUUID();
+    const user = upsertUser(userId, username);
+
+    const options = await generateRegistrationOptions({
+      rpName,
+      rpID,
+      userID: uuidToBytes(user.id) as Uint8Array<ArrayBuffer>,
+      userName: user.username,
+      userDisplayName: user.username,
+      attestationType: "none",
+      authenticatorSelection: { residentKey: "required", userVerification: "required" },
+      excludeCredentials: listCredentials()
+        .filter((c) => c.user_id === user.id)
+        .map((c) => ({ id: c.id })),
+    });
+
+    session.set("challenge", options.challenge);
+    session.set("pendingUserId", user.id);
+    return Response.json(options, {
+      headers: { "Set-Cookie": await commitSession(session) },
+    });
+  }
+
+  if (intent === "reg-verify") {
+    const challenge = session.get("challenge") as string | undefined;
+    const pendingUserId = session.get("pendingUserId") as string | undefined;
+    if (!challenge || !pendingUserId) {
+      return Response.json({ error: "セッション切れです" }, { status: 400 });
+    }
+    const body = (await request.json()) as RegistrationResponseJSON;
+    let verification;
+    try {
+      verification = await verifyRegistrationResponse({
+        response: body,
+        expectedChallenge: challenge,
+        expectedOrigin: origin,
+        expectedRPID: rpID,
+      });
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      return Response.json({ error: msg }, { status: 400 });
+    }
+    if (!verification.verified || !verification.registrationInfo) {
+      return Response.json({ error: "登録に失敗しました" }, { status: 400 });
+    }
+
+    const { credential } = verification.registrationInfo;
+    saveCredential({
+      id: credential.id,
+      userId: pendingUserId,
+      publicKey: credential.publicKey,
+      counter: credential.counter,
+      transports: (body.response as { transports?: AuthenticatorTransportFuture[] }).transports,
+    });
+
+    const user = getUserById(pendingUserId)!;
+    session.unset("challenge");
+    session.unset("pendingUserId");
+    session.set("userId", user.id);
+    session.set("username", user.username);
+    return Response.json({ ok: true }, {
+      headers: { "Set-Cookie": await commitSession(session) },
+    });
+  }
+
+  if (intent === "login-options") {
+    const credentials = listCredentials();
+    const options = await generateAuthenticationOptions({
+      rpID,
+      allowCredentials: credentials.map((c) => ({
+        id: c.id,
+        transports: c.transports
+          ? (JSON.parse(c.transports) as AuthenticatorTransportFuture[])
+          : undefined,
+      })),
+      userVerification: "required",
+    });
+    session.set("challenge", options.challenge);
+    return Response.json(options, {
+      headers: { "Set-Cookie": await commitSession(session) },
+    });
+  }
+
+  if (intent === "login-verify") {
+    const challenge = session.get("challenge") as string | undefined;
+    if (!challenge) return Response.json({ error: "セッション切れです" }, { status: 400 });
+
+    const body = (await request.json()) as AuthenticationResponseJSON;
+    const cred = getCredentialById(body.id);
+    if (!cred) return Response.json({ error: "パスキーが見つかりません" }, { status: 400 });
+
+    const verification = await verifyAuthenticationResponse({
+      response: body,
+      expectedChallenge: challenge,
+      expectedOrigin: origin,
+      expectedRPID: rpID,
+      credential: {
+        id: cred.id,
+        publicKey: new Uint8Array(Buffer.from(cred.public_key, "base64url")),
+        counter: cred.counter,
+        transports: cred.transports
+          ? (JSON.parse(cred.transports) as AuthenticatorTransportFuture[])
+          : undefined,
+      },
+    });
+    if (!verification.verified) {
+      return Response.json({ error: "認証に失敗しました" }, { status: 400 });
+    }
+    updateCredentialCounter(cred.id, verification.authenticationInfo.newCounter);
+
+    const user = getUserById(cred.user_id)!;
+    session.unset("challenge");
+    session.set("userId", user.id);
+    session.set("username", user.username);
+    return Response.json({ ok: true }, {
+      headers: { "Set-Cookie": await commitSession(session) },
+    });
+  }
+
+  return Response.json({ error: "不正なリクエスト" }, { status: 400 });
+}
diff --git a/app/routes/auth.logout.tsx b/app/routes/auth.logout.tsx
new file mode 100644
index 0000000..3b60231
--- /dev/null
+++ b/app/routes/auth.logout.tsx
@@ -0,0 +1,18 @@
+import { redirect } from "react-router";
+import type { Route } from "./+types/auth.logout";
+import { getSession, destroySession } from "~/lib/session.server";
+
+export async function loader() {
+  return redirect("/");
+}
+
+export async function action({ request }: Route.ActionArgs) {
+  const session = await getSession(request.headers.get("Cookie"));
+  return redirect("/", {
+    headers: { "Set-Cookie": await destroySession(session) },
+  });
+}
+
+export default function Logout() {
+  return null;
+}
diff --git a/app/routes/auth.register.tsx b/app/routes/auth.register.tsx
new file mode 100644
index 0000000..de254a8
--- /dev/null
+++ b/app/routes/auth.register.tsx
@@ -0,0 +1,138 @@
+import { useState } from "react";
+import { redirect } from "react-router";
+import type { Route } from "./+types/auth.register";
+import { getSession } from "~/lib/session.server";
+import type { RegistrationResponseJSON, AuthenticatorTransportFuture } from "@simplewebauthn/server";
+
+export async function loader({ request }: Route.LoaderArgs) {
+  const session = await getSession(request.headers.get("Cookie"));
+  if (session.get("userId")) return redirect("/");
+  return {};
+}
+
+function b64urlToBuffer(b64url: string): ArrayBuffer {
+  const base64 = b64url.replace(/-/g, "+").replace(/_/g, "/");
+  const pad = "=".repeat((4 - (base64.length % 4)) % 4);
+  const binary = atob(base64 + pad);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+  return bytes.buffer;
+}
+
+function bufferToB64url(buf: ArrayBuffer): string {
+  const bytes = new Uint8Array(buf);
+  let binary = "";
+  for (let i = 0; i < bytes.byteLength; i++) binary += String.fromCharCode(bytes[i]);
+  return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
+}
+
+export default function Register() {
+  const [username, setUsername] = useState("");
+  const [token, setToken] = useState("");
+  const [status, setStatus] = useState<"idle" | "loading" | "error">("idle");
+  const [errorMsg, setErrorMsg] = useState("");
+
+  async function handleRegister() {
+    setStatus("loading");
+    setErrorMsg("");
+    try {
+      const optRes = await fetch("/api/passkey?intent=reg-options", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ username, token }),
+      });
+      if (!optRes.ok) {
+        const err = await optRes.json() as { error?: string };
+        throw new Error(err.error ?? "オプション取得に失敗しました");
+      }
+      const optJSON = await optRes.json() as Record<string, unknown>;
+
+      const userObj = optJSON.user as Record<string, string>;
+      const challenge = b64urlToBuffer(optJSON.challenge as string);
+
+      const credential = await navigator.credentials.create({
+        publicKey: {
+          rp: optJSON.rp as PublicKeyCredentialRpEntity,
+          user: {
+            id: b64urlToBuffer(userObj.id),
+            name: userObj.name,
+            displayName: userObj.displayName ?? userObj.name,
+          },
+          challenge,
+          pubKeyCredParams: optJSON.pubKeyCredParams as PublicKeyCredentialParameters[],
+          authenticatorSelection: optJSON.authenticatorSelection as AuthenticatorSelectionCriteria,
+          timeout: 60000,
+        },
+      }) as PublicKeyCredential | null;
+
+      if (!credential) throw new Error("クレデンシャルの作成に失敗しました");
+
+      const attestation = credential.response as AuthenticatorAttestationResponse;
+      const regResponse: RegistrationResponseJSON = {
+        id: credential.id,
+        rawId: bufferToB64url(credential.rawId),
+        response: {
+          clientDataJSON: bufferToB64url(attestation.clientDataJSON),
+          attestationObject: bufferToB64url(attestation.attestationObject),
+          transports: attestation.getTransports
+            ? (attestation.getTransports() as AuthenticatorTransportFuture[])
+            : [],
+        },
+        authenticatorAttachment: (credential.authenticatorAttachment ?? undefined) as import("@simplewebauthn/server").AuthenticatorAttachment | undefined,
+        clientExtensionResults: credential.getClientExtensionResults(),
+        type: "public-key",
+      };
+
+      const verRes = await fetch("/api/passkey?intent=reg-verify", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(regResponse),
+      });
+      if (!verRes.ok) {
+        const err = await verRes.json() as { error?: string };
+        throw new Error(err.error ?? "登録に失敗しました");
+      }
+
+      window.location.href = "/";
+    } catch (e) {
+      setStatus("error");
+      setErrorMsg(e instanceof Error ? `${e.name}: ${e.message}` : String(e));
+    }
+  }
+
+  return (
+    <div className="wrap">
+      <header className="site-header">
+        <h1>todo</h1>
+      </header>
+      <div className="auth-box">
+        <h2>アカウント登録</h2>
+        <p>ユーザー名と登録トークンを入力してパスキーを作成します。</p>
+        <div className="field-group">
+          <input
+            type="text"
+            placeholder="ユーザー名"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            autoFocus
+          />
+          <input
+            type="password"
+            placeholder="登録トークン"
+            value={token}
+            onChange={(e) => setToken(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && handleRegister()}
+          />
+        </div>
+        <button
+          className="btn"
+          onClick={handleRegister}
+          disabled={status === "loading" || !username || !token}
+        >
+          {status === "loading" ? "登録中…" : "パスキーを登録"}
+        </button>
+        {status === "error" && <p className="error-msg">{errorMsg}</p>}
+      </div>
+    </div>
+  );
+}
diff --git a/app/routes/home.tsx b/app/routes/home.tsx
new file mode 100644
index 0000000..fd3c534
--- /dev/null
+++ b/app/routes/home.tsx
@@ -0,0 +1,252 @@
+import { useRef, useState } from "react";
+import { Form, redirect, useNavigation, useSearchParams, Link } from "react-router";
+import type { Route } from "./+types/home";
+import {
+  listTodos,
+  createTodo,
+  toggleTodo,
+  deleteTodo,
+  countActiveTodos,
+  hasAnyCredential,
+} from "~/lib/db.server";
+import { getSession, commitSession } from "~/lib/session.server";
+
+export async function loader({ request }: Route.LoaderArgs) {
+  const session = await getSession(request.headers.get("Cookie"));
+  const userId = session.get("userId") as string | undefined;
+  const username = session.get("username") as string | undefined;
+  const url = new URL(request.url);
+  const filter = url.searchParams.get("filter") ?? "all";
+  const hasCredentials = hasAnyCredential();
+
+  if (!userId) {
+    return { isAuthenticated: false, hasCredentials, todos: [], activeCount: 0, filter, username: null };
+  }
+
+  const todos = listTodos(userId, filter);
+  const activeCount = countActiveTodos(userId);
+  return { isAuthenticated: true, hasCredentials, todos, activeCount, filter, username: username ?? null };
+}
+
+export async function action({ request }: Route.ActionArgs) {
+  const session = await getSession(request.headers.get("Cookie"));
+  const userId = session.get("userId") as string | undefined;
+  if (!userId) throw new Response("Unauthorized", { status: 401 });
+
+  const form = await request.formData();
+  const intent = String(form.get("intent") ?? "");
+
+  if (intent === "create") {
+    const title = String(form.get("title") ?? "").trim();
+    if (!title) return { error: "タイトルを入力してください" };
+    createTodo(userId, title);
+    return redirect("/", { headers: { "Set-Cookie": await commitSession(session) } });
+  }
+
+  if (intent === "toggle") {
+    const id = String(form.get("id") ?? "");
+    const done = form.get("done") === "1";
+    if (id) toggleTodo(id, userId, done);
+    return redirect(request.headers.get("Referer") ?? "/", {
+      headers: { "Set-Cookie": await commitSession(session) },
+    });
+  }
+
+  if (intent === "delete") {
+    const id = String(form.get("id") ?? "");
+    if (id) deleteTodo(id, userId);
+    return redirect(request.headers.get("Referer") ?? "/", {
+      headers: { "Set-Cookie": await commitSession(session) },
+    });
+  }
+
+  return { error: "不正なリクエスト" };
+}
+
+function bufferToB64url(buf: ArrayBuffer): string {
+  const bytes = new Uint8Array(buf);
+  let binary = "";
+  for (let i = 0; i < bytes.byteLength; i++) binary += String.fromCharCode(bytes[i]);
+  return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
+}
+
+function b64urlToBuffer(b64url: string): ArrayBuffer {
+  const base64 = b64url.replace(/-/g, "+").replace(/_/g, "/");
+  const pad = "=".repeat((4 - (base64.length % 4)) % 4);
+  const binary = atob(base64 + pad);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+  return bytes.buffer;
+}
+
+export default function Home({ loaderData, actionData }: Route.ComponentProps) {
+  const { isAuthenticated, hasCredentials, todos, activeCount, filter, username } = loaderData;
+  const navigation = useNavigation();
+  const isSubmitting = navigation.state === "submitting";
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [searchParams] = useSearchParams();
+  const [loginStatus, setLoginStatus] = useState<"idle" | "loading" | "error">("idle");
+  const [loginError, setLoginError] = useState("");
+
+  async function handleLogin() {
+    setLoginStatus("loading");
+    setLoginError("");
+    try {
+      const optRes = await fetch("/api/passkey?intent=login-options", { method: "POST" });
+      if (!optRes.ok) throw new Error("オプション取得に失敗しました");
+      const options = await optRes.json() as Record<string, unknown>;
+
+      const credential = await navigator.credentials.get({
+        publicKey: {
+          challenge: b64urlToBuffer(options.challenge as string),
+          rpId: options.rpId as string,
+          allowCredentials: (options.allowCredentials as Array<{ id: string; transports?: string[] }> ?? []).map((c) => ({
+            id: b64urlToBuffer(c.id),
+            type: "public-key" as const,
+            transports: c.transports as AuthenticatorTransport[] | undefined,
+          })),
+          userVerification: "required" as UserVerificationRequirement,
+          timeout: 60000,
+        },
+      }) as PublicKeyCredential | null;
+
+      if (!credential) throw new Error("認証に失敗しました");
+
+      const assertion = credential.response as AuthenticatorAssertionResponse;
+      const verRes = await fetch("/api/passkey?intent=login-verify", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          id: credential.id,
+          rawId: bufferToB64url(credential.rawId),
+          response: {
+            clientDataJSON: bufferToB64url(assertion.clientDataJSON),
+            authenticatorData: bufferToB64url(assertion.authenticatorData),
+            signature: bufferToB64url(assertion.signature),
+            userHandle: assertion.userHandle ? bufferToB64url(assertion.userHandle) : undefined,
+          },
+          authenticatorAttachment: credential.authenticatorAttachment ?? undefined,
+          clientExtensionResults: credential.getClientExtensionResults(),
+          type: "public-key",
+        }),
+      });
+      if (!verRes.ok) {
+        const err = await verRes.json() as { error?: string };
+        throw new Error(err.error ?? "認証に失敗しました");
+      }
+      window.location.href = "/";
+    } catch (e) {
+      setLoginStatus("error");
+      setLoginError(e instanceof Error ? e.message : "エラーが発生しました");
+    }
+  }
+
+  const currentFilter = searchParams.get("filter") ?? "all";
+
+  if (!isAuthenticated) {
+    return (
+      <div className="wrap">
+        <header className="site-header">
+          <h1>todo</h1>
+        </header>
+        <div className="login-box">
+          {hasCredentials ? (
+            <>
+              <button className="btn-login" onClick={handleLogin} disabled={loginStatus === "loading"}>
+                {loginStatus === "loading" ? "認証中…" : "パスキーでログイン"}
+              </button>
+              {loginStatus === "error" && <p className="error-msg">{loginError}</p>}
+            </>
+          ) : (
+            <Link to="/auth/register" className="btn-login">はじめる</Link>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="wrap">
+      <header className="site-header">
+        <h1>todo</h1>
+        <nav className="header-nav">
+          <span className="username">{username}</span>
+          <Form method="post" action="/auth/logout">
+            <button type="submit" className="logout-btn">ログアウト</button>
+          </Form>
+        </nav>
+      </header>
+
+      <div className="compose">
+        <Form
+          method="post"
+          onSubmit={() => {
+            // Reset input after successful submit
+            setTimeout(() => inputRef.current?.focus(), 50);
+          }}
+        >
+          <input type="hidden" name="intent" value="create" />
+          <div className="compose-row">
+            <input
+              ref={inputRef}
+              type="text"
+              name="title"
+              placeholder="新しいタスクを追加…"
+              autoComplete="off"
+              autoFocus
+            />
+            <button type="submit" disabled={isSubmitting}>追加</button>
+          </div>
+        </Form>
+        {actionData && "error" in actionData && <p className="error-msg">{actionData.error}</p>}
+      </div>
+
+      <nav className="filters">
+        <Link to="/" className={currentFilter === "all" ? "active" : ""}>すべて</Link>
+        <Link to="/?filter=active" className={currentFilter === "active" ? "active" : ""}>未完了</Link>
+        <Link to="/?filter=done" className={currentFilter === "done" ? "active" : ""}>完了</Link>
+      </nav>
+
+      <ul className="todo-list">
+        {todos.length === 0 && (
+          <li className="empty">
+            {filter === "done" ? "完了したタスクはありません" : filter === "active" ? "未完了のタスクはありません" : "タスクがありません"}
+          </li>
+        )}
+        {todos.map((todo) => (
+          <li key={todo.id} className={`todo-item ${todo.done ? "done" : ""}`}>
+            <Form method="post" className="toggle-form">
+              <input type="hidden" name="intent" value="toggle" />
+              <input type="hidden" name="id" value={todo.id} />
+              <input type="hidden" name="done" value={todo.done ? "0" : "1"} />
+              <button type="submit" className="checkbox" aria-label={todo.done ? "未完了に戻す" : "完了にする"}>
+                {todo.done ? (
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                    <rect width="16" height="16" rx="3" fill="#6c63ff" />
+                    <path d="M3.5 8L6.5 11L12.5 5" stroke="white" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
+                  </svg>
+                ) : (
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                    <rect x="0.5" y="0.5" width="15" height="15" rx="2.5" stroke="#4b5563" />
+                  </svg>
+                )}
+              </button>
+            </Form>
+            <span className="todo-title">{todo.title}</span>
+            <Form method="post" className="delete-form">
+              <input type="hidden" name="intent" value="delete" />
+              <input type="hidden" name="id" value={todo.id} />
+              <button type="submit" className="delete-btn" aria-label="削除">×</button>
+            </Form>
+          </li>
+        ))}
+      </ul>
+
+      {todos.length > 0 && (
+        <footer className="todo-footer">
+          <span>{activeCount} 件未完了</span>
+        </footer>
+      )}
+    </div>
+  );
+}