Passkeys!

src/pages/login.astro

@@ -16,6 +16,40 @@ const errorMessage =
 ---
 
 <Layout title="Login - Chronus">
+  <script>
+    import { startAuthentication } from "@simplewebauthn/browser";
+
+    const loginBtn = document.getElementById("passkey-login");
+
+    loginBtn?.addEventListener("click", async () => {
+      // 1. Get options from server
+      const resp = await fetch("/api/auth/passkey/login/start");
+      const options = await resp.json();
+
+      // 2. Browser handles interaction
+      let asseResp;
+      try {
+        asseResp = await startAuthentication(options);
+      } catch (error) {
+        console.error(error);
+        return;
+      }
+
+      // 3. Verify with server
+      const verificationResp = await fetch("/api/auth/passkey/login/finish", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(asseResp),
+      });
+
+      const verificationJSON = await verificationResp.json();
+      if (verificationJSON.verified) {
+        window.location.href = "/dashboard";
+      } else {
+        alert("Login failed");
+      }
+    });
+  </script>
   <div class="flex justify-center items-center flex-1 bg-base-100">
     <div class="card bg-base-100 shadow-2xl w-full max-w-md mx-4">
       <div class="card-body">
@@ -60,6 +94,11 @@ const errorMessage =
           <button class="btn btn-primary w-full mt-6">Sign In</button>
         </form>
 
+        <button id="passkey-login" class="btn btn-secondary w-full mt-4">
+          <Icon name="heroicons:finger-print" class="w-5 h-5 mr-2" />
+          Sign in with Passkey
+        </button>
+
         <div class="divider">OR</div>
 
         <div class="text-center">