fix: add MFA for WebAuthn bindings

src/GoTrueClient.ts

@@ -70,12 +70,15 @@ import type {
   VerifyOtpParams,
   GoTrueMFAApi,
   MFAEnrollParams,
+  MFAVerifyParams,
   AuthMFAEnrollResponse,
   MFAChallengeParams,
   AuthMFAChallengeResponse,
   MFAUnenrollParams,
   AuthMFAUnenrollResponse,
-  MFAVerifyParams,
+  MFAVerifyTOTPParams,
+  MFAVerifyPhoneParams,
+  MFAVerifyWebAuthnParams,
   AuthMFAVerifyResponse,
   AuthMFAListFactorsResponse,
   AMREntry,
@@ -88,11 +91,13 @@ import type {
   LockFunc,
   UserIdentity,
   SignInAnonymouslyCredentials,
-  MFAEnrollTOTPParams,
   AuthMFAEnrollTOTPResponse,
+  AuthMFAEnrollPhoneResponse,
+  AuthMFAEnrollWebAuthnResponse,
   AuthMFAEnrollErrorResponse,
+  MFAEnrollTOTPParams,
   MFAEnrollPhoneParams,
-  AuthMFAEnrollPhoneResponse,
+  MFAEnrollWebAuthnParams,
 } from './lib/types'
 
 polyfillGlobalThis() // Make "globalThis" available
@@ -2364,6 +2369,9 @@ export default class GoTrueClient {
   private async _enroll(
     params: MFAEnrollPhoneParams
   ): Promise<AuthMFAEnrollPhoneResponse | AuthMFAEnrollErrorResponse>
+  private async _enroll(
+    params: MFAEnrollWebAuthnParams
+  ): Promise<AuthMFAEnrollWebAuthnResponse | AuthMFAEnrollErrorResponse>
   private async _enroll(params: MFAEnrollParams): Promise<AuthMFAEnrollResponse> {
     try {
       return await this._useSession(async (result) => {
@@ -2413,34 +2421,67 @@ export default class GoTrueClient {
   private async _verify(params: MFAVerifyParams): Promise<AuthMFAVerifyResponse> {
     return this._acquireLock(-1, async () => {
       try {
-        return await this._useSession(async (result) => {
+        const result = await this._useSession(async (result) => {
           const { data: sessionData, error: sessionError } = result
           if (sessionError) {
             return { data: null, error: sessionError }
           }
 
-          const { data, error } = await _request(
-            this.fetch,
-            'POST',
-            `${this.url}/factors/${params.factorId}/verify`,
-            {
-              body: { code: params.code, challenge_id: params.challengeId },
-              headers: this.headers,
-              jwt: sessionData?.session?.access_token,
+          if ('code' in params && 'challengeId' in params && 'factorId' in params) {
+            // This handles MFAVerifyTOTPParams and MFAVerifyPhoneParams
+            const { data, error } = await _request(
+              this.fetch,
+              'POST',
+              `${this.url}/factors/${params.factorId}/verify`,
+              {
+                body: {
+                  code: params.code,
+                  challenge_id: params.challengeId,
+                },
+                headers: this.headers,
+                jwt: sessionData?.session?.access_token,
+              }
+            )
+            if (error) {
+              return { data: null, error }
             }
-          )
-          if (error) {
-            return { data: null, error }
+            await this._saveSession({
+              expires_at: Math.round(Date.now() / 1000) + data.expires_in,
+              ...data,
+            })
+            await this._notifyAllSubscribers('MFA_CHALLENGE_VERIFIED', data)
+            return { data, error }
+          } else if ('factorType' in params && params.factorType === 'webauthn') {
+            // TODO: Replace the placeholder
+            const { data, error } = await _request(
+              this.fetch,
+              'POST',
+              `${this.url}/factors/verify`,
+              {
+                body: {
+                  use_multi_step: params.useMultiStep,
+                  factorType: params.factorType,
+                },
+                headers: this.headers,
+                jwt: sessionData?.session?.access_token,
+              }
+            )
+            if (error) {
+              return { data: null, error }
+            }
+            await this._saveSession({
+              expires_at: Math.round(Date.now() / 1000) + data.expires_in,
+              ...data,
+            })
+            await this._notifyAllSubscribers('MFA_CHALLENGE_VERIFIED', data)
+            return { data, error }
           }
-
-          await this._saveSession({
-            expires_at: Math.round(Date.now() / 1000) + data.expires_in,
-            ...data,
-          })
-          await this._notifyAllSubscribers('MFA_CHALLENGE_VERIFIED', data)
-
-          return { data, error }
+          // TODO: fix this hack
+          // If we reach here, it means none of the conditions were met
+          return { data: null, error: new Error('Invalid MFA parameters') }
         })
+        // TODO: Fix thsi hack
+        return result
       } catch (error) {
         if (isAuthError(error)) {
           return { data: null, error }
@@ -2526,11 +2567,16 @@ export default class GoTrueClient {
       (factor) => factor.factor_type === 'phone' && factor.status === 'verified'
     )
 
+    const webauthn = factors.filter(
+      (factor) => factor.factor_type === 'webauthn' && factor.status === 'verified'
+    )
+
     return {
       data: {
         all: factors,
         totp,
         phone,
+        webauthn,
       },
       error: null,
     }

src/lib/types.ts

@@ -808,6 +808,7 @@ export type MFAEnrollTOTPParams = {
   /** Human readable name assigned to the factor. */
   friendlyName?: string
 }
+
 export type MFAEnrollPhoneParams = {
   /** The type of factor being enrolled. */
   factorType: 'phone'
@@ -816,14 +817,20 @@ export type MFAEnrollPhoneParams = {
   /** Phone number associated with a factor. Number should conform to E.164 format */
   phone: string
 }
-export type MFAEnrollParams = MFAEnrollTOTPParams | MFAEnrollPhoneParams
 
-export type MFAUnenrollParams = {
-  /** ID of the factor being unenrolled. */
-  factorId: string
+export type MFAEnrollWebAuthnParams = {
+  /** The type of factor being enrolled. */
+  factorType: 'webauthn'
+  /** Domain which the user is enrolled with. */
+  issuer?: string
+  /** Human readable name assigned to the factor. */
+  friendlyName?: string
+
+  /** Have the Auth client library handle the browser-authenticator interaction for you */
+  useMultiStep?: boolean
 }
 
-export type MFAVerifyParams = {
+export type MFAVerifyTOTPParams = {
   /** ID of the factor being verified. Returned in enroll(). */
   factorId: string
 
@@ -834,6 +841,26 @@ export type MFAVerifyParams = {
   code: string
 }
 
+// Declared as a separate type to allow for future changes
+export type MFAVerifyPhoneParams = MFAVerifyTOTPParams
+
+export type MFAVerifyWebAuthnParams = {
+  /** The type of factor being enrolled. */
+  factorType: 'webauthn'
+
+  /** Have the Auth client library handle the browser-authenticator interaction for you */
+  useMultiStep?: boolean
+}
+
+export type MFAEnrollParams = MFAEnrollTOTPParams | MFAEnrollPhoneParams | MFAEnrollWebAuthnParams
+
+export type MFAVerifyParams = MFAVerifyTOTPParams | MFAVerifyPhoneParams | MFAVerifyWebAuthnParams
+
+export type MFAUnenrollParams = {
+  /** ID of the factor being unenrolled. */
+  factorId: string
+}
+
 export type MFAChallengeParams = {
   /** ID of the factor to be challenged. Returned in enroll(). */
   factorId: string
@@ -918,13 +945,30 @@ export type AuthMFAEnrollPhoneResponse = {
   }
   error: null
 }
+
+export type AuthMFAEnrollWebAuthnResponse = {
+  data: {
+    /** ID of the factor that was just enrolled (in an unverified state). */
+    id: string
+
+    /** Type of MFA factor. */
+    type: 'phone'
+
+    /** Friendly name of the factor, useful for distinguishing between factors **/
+    friendly_name?: string
+  }
+  error: null
+}
+
 export type AuthMFAEnrollErrorResponse = {
   data: null
   error: AuthError
 }
+
 export type AuthMFAEnrollResponse =
   | AuthMFAEnrollTOTPResponse
   | AuthMFAEnrollPhoneResponse
+  | AuthMFAEnrollWebAuthnResponse
   | AuthMFAEnrollErrorResponse
 
 export type AuthMFAUnenrollResponse =
@@ -963,6 +1007,9 @@ export type AuthMFAListFactorsResponse =
         totp: Factor[]
         /** Only verified Phone factors. (A subset of `all`.) */
         phone: Factor[]
+        /** Only verified Phone factors. (A subset of `all`.) */
+        // TODO: Hgihglight that it's not webAuthn since totp and phone it's lower case, and then delete this comment.
+        webauthn: Factor[]
       }
       error: null
     }