feat: allow for extra data fields to be included in the registration …

…body
atinux · Sep 27, 2024 · 1e9c628 · 1e9c628
1 parent 977470b
commit 1e9c628
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 9 deletions.
diff --git a/playground/components/WebauthnModal.vue b/playground/components/WebauthnModal.vue
@@ -11,7 +11,7 @@ const { register, authenticate, isSupported } = useWebAuthn()
 async function signUp() {
   if (logging.value || !userName.value) return
   logging.value = true
-  await register(userName.value, displayName.value)
+  await register({ userName: userName.value, displayName: displayName.value })
     .then(() => {
       fetch()
       show.value = false

diff --git a/src/runtime/app/composables/webauthn.ts b/src/runtime/app/composables/webauthn.ts
@@ -33,12 +33,11 @@ export function useWebAuthn(options: {
   authenticateEndpoint?: string
 } = {}): WebAuthnComposable {
   const { registerEndpoint = '/api/webauthn/register', authenticateEndpoint = '/api/webauthn/authenticate' } = options
-  async function register(userName: string, displayName?: string) {
+  async function register(data: { userName: string, displayName?: string }) {
     const { creationOptions, attemptId } = await $fetch<RegistrationInitResponse>(registerEndpoint, {
       method: 'POST',
       body: {
-        userName,
-        displayName,
+        ...data,
         verify: false,
       },
     })
@@ -47,9 +46,8 @@ export function useWebAuthn(options: {
     const verificationResponse = await $fetch<VerifiedRegistrationResponse>(registerEndpoint, {
       method: 'POST',
       body: {
+        ...data,
         attemptId,
-        userName,
-        displayName,
         response: attestationResponse,
         verify: true,
       },

diff --git a/src/runtime/types/webauthn.ts b/src/runtime/types/webauthn.ts
@@ -63,11 +63,11 @@ export interface WebAuthnComposable {
   isPlatformAvailable: () => Promise<boolean>
   /**
    * Register a credential
-   * @param userName The user name to register
-   * @param displayName The display name to register
+   * @param data.userName The user name to register
+   * @param data.displayName The display name to register
    * @returns true if the registration was successful
    */
-  register: (userName: string, displayName?: string) => Promise<boolean>
+  register: <T extends { userName: string, displayName?: string }>(data: T) => Promise<boolean>
   /**
    * Authenticate a credential
    * @returns true if the authentication was successful