Atridad Lahiji
8a3932a013
All checks were successful
Docker Deploy / build-and-push (push) Successful in 4m5s
77 lines
2.0 KiB
Vue
77 lines
2.0 KiB
Vue
<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>
|