Optimizations

src/pages/login.astro

@@ -1,6 +1,7 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import { Icon } from 'astro-icon/components';
+import PasskeyLogin from '../components/auth/PasskeyLogin.vue';
 
 if (Astro.locals.user) {
   return Astro.redirect('/dashboard');
@@ -16,40 +17,6 @@ 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">
@@ -94,10 +61,7 @@ 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>
+        <PasskeyLogin client:idle />
 
         <div class="divider">OR</div>