Multi-factor Auth

Increase security by adding Multi-factor authentication to your app.

iOS Setup

Make sure to follow the official Identity Platform documentation to enable multi-factor authentication for your project and verify your app.

Enroll a new factor

Before a user can enroll a second factor they need to verify their email. See User interface is returned.

Begin by obtaining a MultiFactorUser instance for the current user. This is the entry point for most multi-factor operations:

import auth from '@react-native-firebase/auth';
const multiFactorUser = await auth.multiFactor(auth());

Request the session identifier and use the phone number obtained from the user to send a verification code:

const session = await multiFactorUser.getSession();
const phoneOptions = {
  phoneNumber,
  session
};

// Sends a text message to the user
const verificationId = await auth()
  .verifyPhoneNumberForMultiFactor(phoneOptions);

Once the user has provided the verification code received by text message, you can complete the process:

const cred = auth.PhoneAuthProvider.credential(verificationId, verificationCode);
const multiFactorAssertion = auth.PhoneMultiFactorGenerator.assertion(cred);
await multiFactorUser.enroll(multiFactorAssertion, 'Optional display name for the user);

You can inspect User#multiFactor for information about the user's enrolled factors.

Sign-in flow using multi-factor

Ensure the account has already enrolled a second factor. Begin by calling the default sign-in methods, for example email and password. If the account requires a second factor to complete login, an exception will be raised:

import auth from '@react-native-firebase/auth';

auth()
  .signInWithEmailAndPassword(email, password)
  .then(() => {
  // User has not enrolled a second factor
  }).catch((error) => {
    const { code } = error;
    // Make sure to check if multi factor authentication is required
    if (code === "auth/multi-factor-auth-required") {
      return;
    }

    // Other error
  });

Using the error object you can obtain a MultiFactorResolver instance and continue the flow:

const resolver = auth.getMultiFactorResolver(auth(), error);

The resolver object has all the required information to prompt the user for a specific factor:

if (resolver.hints.length > 1) {
// Use resolver.hints to display a list of second factors to the user
}

// Currently only phone based factors are supported
if (resolver.hints[0].factorId === auth.PhoneMultiFactorGenerator.FACTOR_ID) {
// Continue with the sign-in flow
}

Using a multi-factor hint and the session information you can send a verification code to the user:

const hint = resolver.hints[0];
const sessionId = resolver.session;

auth()
  .verifyPhoneNumberWithMultiFactorInfo(hint, sessionId) // triggers the message to the user
  .then((verificationId) => setVerificationId(verificationId));

Once the user has entered the verification code you can create a multi-factor assertion and finish the flow:

const credential = auth.PhoneAuthProvider.credential(
  verificationId,
  verificationCode
);

const multiFactorAssertion =
  auth.PhoneMultiFactorGenerator.assertion(credential);

resolver.resolveSignIn(multiFactorAssertion).then((userCredential) => {
// additionally onAuthStateChanged will be triggered as well
});

Upon successful sign-in, any onAuthStateChanged listeners will trigger with the new authentication state of the user.

To put the example together:

import auth from '@react-native-firebase/auth';

const authInstance = auth();

authInstance
    .signInWithEmailAndPassword(email, password)
    .then(() => {
        // User has not enrolled a second factor
    }).catch((error) => {
        const { code } = error;
        // Make sure to check if multi factor authentication is required
        if (code !== "auth/multi-factor-auth-required") {
            const resolver = auth.getMultiFactorResolver(authInstance, error);

            if (resolver.hints.length > 1) {
                // Use resolver.hints to display a list of second factors to the user
            }

            // Currently only phone based factors are supported
            if (resolver.hints[0].factorId === auth.PhoneMultiFactorGenerator.FACTOR_ID) {

                const hint = resolver.hints[0];
                const sessionId = resolver.session;

                authInstance
                    .verifyPhoneNumberWithMultiFactorInfo(hint, sessionId) // triggers the message to the user
                    .then((verificationId) => setVerificationId(verificationId));

                // Request verificationCode from user

                const credential = auth.PhoneAuthProvider.credential(
                    verificationId,
                    verificationCode
                );

                const multiFactorAssertion =
                      auth.PhoneMultiFactorGenerator.assertion(credential);

                resolver.resolveSignIn(multiFactorAssertion).then((userCredential) => {
                    // additionally onAuthStateChanged will be triggered as well
                });
            }
        }
    });

Testing

You can define test phone numbers and corresponding verification codes. The officialofficial guide contains more information on setting this up.