feat(auth): Multi-factor Auth support with SMS for Google Cloud Identity Platform (#2725)

Defines multi-factor auth client APIs for Google Cloud Identity Platform.

Author: wti806

packages/auth-types/index.d.ts

@@ -35,6 +35,7 @@ export interface User extends UserInfo {
   linkWithPopup(provider: AuthProvider): Promise<UserCredential>;
   linkWithRedirect(provider: AuthProvider): Promise<void>;
   metadata: UserMetadata;
+  multiFactor: MultiFactorUser;
   phoneNumber: string | null;
   providerData: (UserInfo | null)[];
   reauthenticateAndRetrieveDataWithCredential(
@@ -64,6 +65,10 @@ export interface User extends UserInfo {
     displayName?: string | null;
     photoURL?: string | null;
   }): Promise<void>;
+  verifyBeforeUpdateEmail(
+    newEmail: string,
+    actionCodeSettings?: ActionCodeSettings | null
+  ): Promise<void>;
 }
 
 export interface UserInfo {
@@ -75,17 +80,31 @@ export interface UserInfo {
   uid: string;
 }
 
+export interface MultiFactorUser {
+  enrolledFactors: MultiFactorInfo[];
+  enroll(
+    assertion: MultiFactorAssertion,
+    displayName?: string | null
+  ): Promise<void>;
+  getSession(): Promise<MultiFactorSession>;
+  unenroll(option: MultiFactorInfo | string): Promise<void>;
+}
+
 export class ActionCodeInfo {
   private constructor();
   data: {
     email?: string | null;
     fromEmail?: string | null;
+    multiFactorInfo?: MultiFactorInfo | null;
+    previousEmail?: string | null;
   };
   operation: string;
   static Operation: {
     PASSWORD_RESET: Operation;
     RECOVER_EMAIL: Operation;
     EMAIL_SIGNIN: Operation;
+    REVERT_SECOND_FACTOR_ADDITION: Operation;
+    VERIFY_AND_CHANGE_EMAIL: Operation;
     VERIFY_EMAIL: Operation;
   };
 }
@@ -164,6 +183,10 @@ export interface AuthError extends Error {
   tenantId?: string;
 }
 
+export interface MultiFactorError extends AuthError {
+  resolver: MultiFactorResolver;
+}
+
 export class FacebookAuthProvider extends FacebookAuthProvider_Instance {
   static PROVIDER_ID: string;
   static FACEBOOK_SIGN_IN_METHOD: string;
@@ -206,6 +229,7 @@ export interface IdTokenResult {
   authTime: string;
   issuedAtTime: string;
   signInProvider: string | null;
+  signInSecondFactor: string | null;
   claims: {
     [key: string]: any;
   };
@@ -239,11 +263,31 @@ export class PhoneAuthProvider_Instance implements AuthProvider {
   constructor(auth?: FirebaseAuth | null);
   providerId: string;
   verifyPhoneNumber(
-    phoneNumber: string,
+    phoneInfoOptions: PhoneInfoOptions | string,
     applicationVerifier: ApplicationVerifier
   ): Promise<string>;
 }
 
+export type PhoneInfoOptions =
+  | PhoneSingleFactorInfoOptions
+  | PhoneMultiFactorEnrollInfoOptions
+  | PhoneMultiFactorSignInInfoOptions;
+
+export interface PhoneSingleFactorInfoOptions {
+  phoneNumber: string;
+}
+
+export interface PhoneMultiFactorEnrollInfoOptions {
+  phoneNumber: string;
+  session: MultiFactorSession;
+}
+
+export interface PhoneMultiFactorSignInInfoOptions {
+  multiFactorHint?: MultiFactorInfo;
+  multiFactorUid?: string;
+  session: MultiFactorSession;
+}
+
 export class RecaptchaVerifier extends RecaptchaVerifier_Instance {}
 export class RecaptchaVerifier_Instance implements ApplicationVerifier {
   constructor(
@@ -296,10 +340,53 @@ export interface OAuthCredentialOptions {
   rawNonce?: string;
 }
 
+export class PhoneAuthCredential extends AuthCredential {
+  private constructor();
+}
+
 export interface AuthSettings {
   appVerificationDisabledForTesting: boolean;
 }
 
+export class MultiFactorSession {
+  private constructor();
+}
+
+export abstract class MultiFactorAssertion {
+  factorId: string;
+}
+
+export class MultiFactorResolver {
+  private constructor();
+  auth: FirebaseAuth;
+  session: MultiFactorSession;
+  hints: MultiFactorInfo[];
+  resolveSignIn(assertion: MultiFactorAssertion): Promise<UserCredential>;
+}
+
+export interface MultiFactorInfo {
+  uid: string;
+  displayName?: string | null;
+  enrollmentTime: string;
+  factorId: string;
+}
+
+export interface PhoneMultiFactorInfo extends MultiFactorInfo {
+  phoneNumber: string;
+}
+
+export class PhoneMultiFactorAssertion extends MultiFactorAssertion {
+  private constructor();
+}
+
+export class PhoneMultiFactorGenerator {
+  private constructor();
+  static FACTOR_ID: string;
+  static assertion(
+    phoneAuthCredential: PhoneAuthCredential
+  ): PhoneMultiFactorAssertion;
+}
+
 export class FirebaseAuth {
   private constructor();
 
@@ -386,6 +473,7 @@ declare module '@firebase/app-types' {
       SAMLAuthProvider: typeof SAMLAuthProvider;
       PhoneAuthProvider: typeof PhoneAuthProvider;
       PhoneAuthProvider_Instance: typeof PhoneAuthProvider_Instance;
+      PhoneMultiFactorGenerator: typeof PhoneMultiFactorGenerator;
       RecaptchaVerifier: typeof RecaptchaVerifier;
       RecaptchaVerifier_Instance: typeof RecaptchaVerifier_Instance;
       TwitterAuthProvider: typeof TwitterAuthProvider;

packages/auth/demo/public/index.html

@@ -112,6 +112,16 @@
               title="Email Not Verified" data-placement="bottom">
           <i class="fa fa-times"></i>
         </span>
+        <div class="btn-group" id="enrolled-factors-drop-down">
+          <button type="button" class="btn btn-default btn-sm dropdown-toggle"
+                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="fa fa-key" title="User multi-factor enrolled"
+               data-toggle="tooltip" data-placement="bottom"></i>
+            <span class="caret"></span>
+          </button>
+          <!-- List of enrolled second factors. -->
+          <div class="dropdown-menu enrolled-second-factors"></div>
+        </div>
       </div>
       <div class="clearfix"></div>
     </div>
@@ -469,6 +479,37 @@
                 </button>
               </form>
 
+              <!-- Enroll MFA-->
+              <div class="group">Enroll Second Factor</div>
+              <ul id="mfa-tab-menu" class="nav nav-tabs" role="tablist">
+                <li role="presentation" class="active">
+                  <a href="#mfa-phone-section" aria-controls="mfa-phone-section"
+                     data-toggle="tab" role="tab">
+                    Phone
+                  </a>
+                </li>
+              </ul>
+              <div class="tab-content">
+                <div class="tab-pane active" id="mfa-phone-section">
+                  <form class="form form-bordered no-submit">
+                    <input type="tel" id="enroll-mfa-phone-number"
+                           class="form-control" placeholder="Phone Number" />
+                    <button class="btn btn-block btn-primary" id="enroll-mfa-verify-phone-number">
+                      Verify Phone Number
+                    </button>
+                    <input type="text" id="enroll-mfa-phone-verification-id"
+                           class="form-control" placeholder="Phone Verification ID" />
+                    <input type="text" id="enroll-mfa-phone-verification-code"
+                           class="form-control" placeholder="Phone Verification Code" />
+                    <input type="text" id="enroll-mfa-phone-display-name"
+                           class="form-control" placeholder="Display Name" />
+                    <button class="btn btn-block btn-primary"
+                            id="enroll-mfa-confirm-phone-verification">
+                      Complete Enrollment
+                    </button>
+                  </form>
+                </div>
+              </div>
 
               <!-- Other Actions -->
               <div class="group">Other Actions</div>
@@ -662,6 +703,45 @@
       </div>
     </div>
 
+    <!-- The multi-factor sign-in dialog. -->
+    <div class="modal" id="multiFactorModal" tabindex="-1" role="dialog">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+            <h4 class="modal-title">Select a second factor to sign in with</h4>
+          </div>
+          <div class="modal-body">
+            <!-- List of 2nd factor options. -->
+            <div class="list-group enrolled-second-factors"></div>
+            <!-- For handling sign-in with phone 2nd factor. -->
+            <form class="form form-bordered no-submit hidden" id="multi-factor-phone">
+              <div class="form">
+              <button class="btn btn-block btn-primary" id="send-2fa-phone-code">
+                Send code
+              </button>
+              </div>
+              <div class="form">
+              <input type="text" id="multi-factor-sign-in-verification-id"
+                     class="form-control" placeholder="Phone Verification ID" />
+              <input type="text" id="multi-factor-sign-in-verification-code"
+                     class="form-control" placeholder="Phone Verification code" />
+              <button class="btn btn-block btn-primary"
+                      id="sign-in-with-phone-multi-factor">
+                Complete sign In
+              </button>
+              </div>
+            </form>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <!-- List of provider ID suggestions. -->
     <datalist id="provider-id-options">
       <option value="google.com"></option>