chore: improvements

playground/app.vue

@@ -123,8 +123,8 @@ const providers = computed(() =>
         <template
           #default="{ loggedIn, clear }"
         >
-          <WebauthnModal v-if="!loggedIn" />
-          <PasswordModal v-if="!loggedIn" />
+          <WebauthnModal />
+          <PasswordModal />
           <UDropdown :items="[providers]">
             <UButton
               icon="i-heroicons-chevron-down"

playground/auth.d.ts

@@ -1,6 +1,6 @@
 declare module '#auth-utils' {
   interface User {
-    credential?: string
+    webauthn?: string
     password?: string
     spotify?: string
     github?: string

playground/components/PasswordModal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { loggedIn, fetch } = useUserSession()
+const { user, loggedIn, fetch } = useUserSession()
 const show = ref(false)
 const logging = ref(false)
 const password = ref('')
@@ -31,12 +31,12 @@ async function login() {
 
 <template>
   <UButton
-    v-if="!loggedIn"
+    v-if="!user?.password"
     size="xs"
     color="gray"
     @click="show = true"
   >
-    Password
+    Login with password
   </UButton>
   <UDashboardModal
     v-model="show"

playground/components/WebauthnModal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { loggedIn, fetch } = useUserSession()
+const { user, fetch } = useUserSession()
 const show = ref(false)
 const logging = ref(false)
 const userName = ref('')
@@ -56,12 +56,12 @@ async function authenticate() {
 
 <template>
   <UButton
-    v-if="!loggedIn && isSupported()"
+    v-if="!user?.webauthn && isSupported"
     size="xs"
     color="gray"
     @click="show = true"
   >
-    Webauthn
+    Login with Webauthn
   </UButton>
   <UDashboardModal
     v-model="show"

playground/nuxt.config.ts

@@ -25,7 +25,7 @@ export default defineNuxtConfig({
     devStorage: {
       db: {
         driver: 'fs',
-        base: './data/db',
+        base: './.data/db',
       },
     },
   },

playground/server/api/webauthn/login.post.ts

@@ -9,19 +9,19 @@ interface CredentialData {
 }
 
 export default defineCredentialAuthenticationEventHandler({
-  storeChallenge: async (_, options, attemptId) => {
+  async storeChallenge(_, options, attemptId) {
     await useStorage().setItem(`attempt:${attemptId}`, options)
   },
-  getChallenge: async (event, attemptId) => {
+  async getChallenge(event, attemptId) {
     const options = await useStorage<PublicKeyCredentialRequestOptionsJSON>().getItem(`attempt:${attemptId}`)
     await useStorage().removeItem(`attempt:${attemptId}`)
     if (!options)
-      throw createError({ statusCode: 400 })
+      throw createError({ message: 'Challenge not found', statusCode: 400 })
 
     const body = await readBody(event)
     const credential = await useStorage<CredentialData>('db').getItem(`users:${body.response.id}`)
     if (!credential)
-      throw createError({ statusCode: 400 })
+      throw createError({ message: 'Credential not found', statusCode: 400 })
 
     return {
       options,
@@ -33,17 +33,18 @@ export default defineCredentialAuthenticationEventHandler({
       },
     }
   },
-  onSuccces: async (event, response) => {
+  async onSuccces(event, response) {
     const user = await useStorage<CredentialData>('db').getItem(`users:${response!.credentialID}`)
     if (!user)
       throw createError({ statusCode: 400 })
 
+    console.log('response', response)
     user.counter = response!.newCounter
     await useStorage('db').setItem(`users:${response!.credentialID}`, user)
 
     await setUserSession(event, {
       user: {
-        credential: response!.credentialID,
+        webauthn: response!.credentialID,
       },
       loggedInAt: Date.now(),
     })

playground/server/api/webauthn/register.post.ts

@@ -2,18 +2,18 @@ import { bufferToBase64URLString } from '@simplewebauthn/browser'
 import type { PublicKeyCredentialCreationOptionsJSON } from '@simplewebauthn/types'
 
 export default defineCredentialRegistrationEventHandler({
-  storeChallenge: async (_, options, attemptId) => {
+  async storeChallenge(_, options, attemptId) {
     await useStorage().setItem(`attempt:${attemptId}`, options)
   },
-  getChallenge: async (_, attemptId) => {
+  async getChallenge(_, attemptId) {
     const options = await useStorage<PublicKeyCredentialCreationOptionsJSON>().getItem(`attempt:${attemptId}`)
     await useStorage().removeItem(`attempt:${attemptId}`)
     if (!options)
-      throw createError({ statusCode: 400 })
+      throw createError({ message: 'Challenge not found', statusCode: 400 })
 
     return options
   },
-  onSuccces: async (event, response, body) => {
+  async onSuccces(event, response, body) {
     const user = {
       id: 1,
       displayName: body.displayName,
@@ -24,12 +24,12 @@ export default defineCredentialRegistrationEventHandler({
     await useStorage('db').setItem(`users:${response!.credentialID}`, user)
     await setUserSession(event, {
       user: {
-        credential: response!.credentialID,
+        webauthn: response!.credentialID,
       },
       loggedInAt: Date.now(),
     })
   },
-  registrationOptions: async () => {
+  async registrationOptions() {
     return {
       rpName: 'My Relying Party Name',
     }

src/runtime/app/composables/webauthn.ts

@@ -7,6 +7,7 @@ import {
 } from '@simplewebauthn/browser'
 import type { VerifiedAuthenticationResponse, VerifiedRegistrationResponse } from '@simplewebauthn/server'
 import type { AuthenticationResponseJSON, PublicKeyCredentialCreationOptionsJSON, PublicKeyCredentialRequestOptionsJSON, RegistrationResponseJSON } from '@simplewebauthn/types'
+import { ref, onMounted } from '#imports'
 import type { WebauthnComposable } from '#auth-utils'
 
 interface RegistrationInitResponse {
@@ -92,11 +93,15 @@ export function useWebauthn(options: {
 
     return verificationResponse && verificationResponse.verified
   }
+  const isSupported = ref(false)
+  onMounted(() => {
+    isSupported.value = browserSupportsWebAuthn()
+  })
 
   return {
     register,
     authenticate,
-    isSupported: browserSupportsWebAuthn,
+    isSupported,
     isAutofillSupported: browserSupportsWebAuthnAutofill,
     isPlatformAvailable: platformAuthenticatorIsAvailable,
   }

src/runtime/types/webauthn.ts

@@ -1,8 +1,10 @@
+import type { Ref } from 'vue'
+
 export interface WebauthnComposable {
   /**
-   * Helper function that checks if the webauthn API is available
+   * Vue ref (boolean) that checks if the webauthn API is available
    */
-  isSupported: () => boolean
+  isSupported: Ref<boolean>
   /**
    * Helper function that checks if the browser supports "Conditional UI" for webauthn
    * @see https://github.com/w3c/webauthn/wiki/Explainer:-WebAuthn-Conditional-UI