Atridad Lahiji
df82a02f41
All checks were successful
Docker Deploy / build-and-push (push) Successful in 4m3s
73 lines
1.9 KiB
Vue
73 lines
1.9 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 {
|
|
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();
|
|
|
|
let asseResp;
|
|
try {
|
|
asseResp = await startAuthentication({ optionsJSON: options });
|
|
} catch (err) {
|
|
if ((err as any).name === "NotAllowedError") {
|
|
return;
|
|
}
|
|
console.error(err);
|
|
error.value = "Failed to authenticate with passkey";
|
|
return;
|
|
}
|
|
|
|
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>
|