feat: add bindings for Multi-Factor Authentication (Phone) (#932)

## What kind of change does this PR introduce?

Adds the bindings for MFA (Phone) Client library. In particular, add
- Enroll - now allows for enrollment of Phone Factors
- Challenge for Phone - now takes in a channel
- List Factors - now supports access of Phone factors


### TODOS:
- [x] Remove empty `totp` from response field  on enroll response

### Not addressed yet

- `challengeAndVerify` will currently return an error on the `verify`
step when used with a phone factor. We could introduce an alternate
behaviour (e.g. terminating at the `challenge` step gracefully) since we
have the `type` of the challenge-associated-factor in the response. This
is not addressed in this PR

src/GoTrueClient.ts

@@ -2341,12 +2341,14 @@ export default class GoTrueClient {
           return { data: null, error: sessionError }
         }
 
+        const body = {
+          friendly_name: params.friendlyName,
+          factor_type: params.factorType,
+          ...(params.factorType === 'phone' ? { phone: params.phone } : { issuer: params.issuer }),
+        }
+
         const { data, error } = await _request(this.fetch, 'POST', `${this.url}/factors`, {
-          body: {
-            friendly_name: params.friendlyName,
-            factor_type: params.factorType,
-            issuer: params.issuer,
-          },
+          body,
           headers: this.headers,
           jwt: sessionData?.session?.access_token,
         })
@@ -2355,7 +2357,12 @@ export default class GoTrueClient {
           return { data: null, error }
         }
 
-        if (data?.totp?.qr_code) {
+        // TODO: Remove once: https://github.com/supabase/auth/pull/1717 is deployed
+        if (params.factorType === 'phone') {
+          delete data.totp
+        }
+
+        if (params.factorType === 'totp' && data?.totp?.qr_code) {
           data.totp.qr_code = `data:image/svg+xml;utf-8,${data.totp.qr_code}`
         }
 
@@ -2429,6 +2436,7 @@ export default class GoTrueClient {
             'POST',
             `${this.url}/factors/${params.factorId}/challenge`,
             {
+              body: { channel: params.channel },
               headers: this.headers,
               jwt: sessionData?.session?.access_token,
             }
@@ -2483,11 +2491,15 @@ export default class GoTrueClient {
     const totp = factors.filter(
       (factor) => factor.factor_type === 'totp' && factor.status === 'verified'
     )
+    const phone = factors.filter(
+      (factor) => factor.factor_type === 'phone' && factor.status === 'verified'
+    )
 
     return {
       data: {
         all: factors,
         totp,
+        phone,
       },
       error: null,
     }

src/lib/types.ts

@@ -302,10 +302,9 @@ export interface Factor {
   friendly_name?: string
 
   /**
-   * Type of factor. Only `totp` supported with this version but may change in
-   * future versions.
+   * Type of factor. `totp` and `phone` supported with this version
    */
-  factor_type: 'totp' | string
+  factor_type: 'totp' | 'phone' | string
 
   /** Factor's status. */
   status: 'verified' | 'unverified'
@@ -471,10 +470,6 @@ export interface Subscription {
   unsubscribe: () => void
 }
 
-export interface UpdatableFactorAttributes {
-  friendlyName: string
-}
-
 export type SignInAnonymouslyCredentials = {
   options?: {
     /**
@@ -805,14 +800,23 @@ export type GenerateLinkType =
   | 'email_change_current'
   | 'email_change_new'
 
-export type MFAEnrollParams = {
-  /** The type of factor being enrolled. */
-  factorType: 'totp'
-  /** Domain which the user is enrolled with. */
-  issuer?: string
-  /** Human readable name assigned to the factor. */
-  friendlyName?: string
-}
+export type MFAEnrollParams =
+  | {
+      /** The type of factor being enrolled. */
+      factorType: 'totp'
+      /** Domain which the user is enrolled with. */
+      issuer?: string
+      /** Human readable name assigned to the factor. */
+      friendlyName?: string
+    }
+  | {
+      /** The type of factor being enrolled. */
+      factorType: 'phone'
+      /** Human readable name assigned to the factor. */
+      friendlyName?: string
+      /** Phone number associated with a factor. Number should conform to E.164 format */
+      phone: string
+    }
 
 export type MFAUnenrollParams = {
   /** ID of the factor being unenrolled. */
@@ -833,6 +837,8 @@ export type MFAVerifyParams = {
 export type MFAChallengeParams = {
   /** ID of the factor to be challenged. Returned in enroll(). */
   factorId: string
+  /** Messaging channel to use (e.g. whatsapp or sms). Only relevant for phone factors */
+  channel?: 'sms' | 'whatsapp'
 }
 
 export type MFAChallengeAndVerifyParams = {
@@ -873,7 +879,7 @@ export type AuthMFAEnrollResponse =
         /** ID of the factor that was just enrolled (in an unverified state). */
         id: string
 
-        /** Type of MFA factor. Only `totp` supported for now. */
+        /** Type of MFA factor.*/
         type: 'totp'
 
         /** TOTP enrollment information. */
@@ -897,6 +903,22 @@ export type AuthMFAEnrollResponse =
       }
       error: null
     }
+  | {
+      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
+
+        /** Phone number of the MFA factor in E.164 format. Used to send messages  */
+       phone: string
+      }
+      error: null
+    }
   | {
       data: null
       error: AuthError
@@ -918,6 +940,9 @@ export type AuthMFAChallengeResponse =
         /** ID of the newly created challenge. */
         id: string
 
+        /** Factor Type which generated the challenge */
+        type: 'totp' | 'phone'
+
         /** Timestamp in UNIX seconds when this challenge will no longer be usable. */
         expires_at: number
       }
@@ -933,6 +958,8 @@ export type AuthMFAListFactorsResponse =
 
         /** Only verified TOTP factors. (A subset of `all`.) */
         totp: Factor[]
+        /** Only verified Phone factors. (A subset of `all`.) */
+        phone: Factor[]
       }
       error: null
     }