Optimizations

src/components/auth/PasskeyLogin.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Icon } from '@iconify/vue';
+import { startAuthentication } from '@simplewebauthn/browser';
+
+const loading = ref(false);
+const error = ref<string | null>(null);
+
+async function handlePasskeyLogin() {
+  loading.value = true;
+  error.value = null;
+
+  try {
+    // 1. Get options from server
+    const resp = await fetch('/api/auth/passkey/login/start');
+
+    if (!resp.ok) {
+      throw new Error('Failed to start passkey login');
+    }
+
+    const options = await resp.json();
+
+    // 2. Browser handles interaction
+    let asseResp;
+    try {
+      asseResp = await startAuthentication(options);
+    } catch (err) {
+      if ((err as any).name === 'NotAllowedError') {
+        // User cancelled or timed out
+        return;
+      }
+      console.error(err);
+      error.value = 'Failed to authenticate with passkey';
+      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 {
+      error.value = 'Login failed. Please try again.';
+    }
+  } catch (err) {
+    console.error('Error during passkey login:', err);
+    error.value = 'An error occurred during login';
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div>
+    <button
+      class="btn btn-secondary w-full"
+      @click="handlePasskeyLogin"
+      :disabled="loading"
+    >
+      <span v-if="loading" class="loading loading-spinner loading-sm"></span>
+      <Icon v-else icon="heroicons:finger-print" class="w-5 h-5 mr-2" />
+      Sign in with Passkey
+    </button>
+
+    <div v-if="error" role="alert" class="alert alert-error mt-4">
+      <Icon icon="heroicons:exclamation-circle" class="w-6 h-6" />
+      <span>{{ error }}</span>
+    </div>
+  </div>
+</template>