Phone-Auth & android auto verify

[colinm]

Ok, I know I've gotta be missing something simple. New to react, following https://rnfirebase.io/auth/phone-auth I've got phone auth working great in the app both on android and IOS basing my code off the example as a start until I hit devices that auto-verify, is there a way to disable autoverify and force entering sms pin?

Is there any documentation or code examples using signInWithPhoneNumber example with (functional components and hooks) like the example docs solving the auto verify. I'm having a hell of a time getting this going on a real pixel device and googles auth limits. My app authentication flow is basically:

1. user enters phone
2. user receives sms
3. user confirms sms
4. app creates account on backend server
5. app redirects user to main screen

I need to tell if it auto-verified and if so, bounce out of the flow (since i don't need to confirm the OTP, grab the current token "auth().currentUser.getIdToken(true)" so I can provision it on my api backend and create the account.

Im somewhat new to JS coming from a ruby world and banging my head here lol. Any help would be MUCH appreciated. Thanks in advance.

[mikehardy]

Hi there!

I think the actual flow from firebase's perspective is:

user enters phone
app creates account with unverified phone number on backend server
user receives sms

• user confirms sms and backend server marks phone number as verified, or...
• sms is auto-confirmed and onUserChanged or onAuthChanged listener is called
  app redirects user to main screen

Anyway - I think the main thing is, have you played around with the listeners, there is a snippet here https://rnfirebase.io/reference/auth/phoneauthsnapshot - you should be able to tell via state_changed what is going on with the listener

This is kind of a mess but is actually in use in one of my projects and works last I checked

    firebase
      .auth()
      .verifyPhoneNumber(phoneNumber)
      .on(
        'state_changed',
        async (phoneAuthSnapshot) => {
          if (!this.listeningForPhoneVerifyStatus) {
            console.log('PhoneVerify::auth listener - no longer listening for phone events.');
            return;
          }

          // How you handle these state events is entirely up to your ui flow and whether
          // you need to support both ios and android. In short: not all of them need to
          // be handled - it's entirely up to you, your ui and supported platforms.

          // E.g you could handle android specific events only here, and let the rest fall back
          // to the optionalErrorCb or optionalCompleteCb functions
          switch (phoneAuthSnapshot.state) {
            // ------------------------
            //  IOS AND ANDROID EVENTS
            // ------------------------
            case firebase.auth.PhoneAuthState.CODE_SENT: // or 'sent'
              console.log(
                `PhoneVerify::auth listener code sent - verificationId: ${phoneAuthSnapshot.verificationId}`
              );
              // on ios this is the final phone auth state event you'd receive
              // so you'd then ask for user input of the code and build a credential from it
              // as demonstrated in the `signInWithPhoneNumber` example above
              this.setState({
                verificationId: phoneAuthSnapshot.verificationId,
                // message: 'Not verified. Code Sent.',
              });
              RN.Alert.alert(
                I18NService.translate('phone-code-sent'),
                I18NService.translate('phone-code-sent-message')
              );
              break;
            case firebase.auth.PhoneAuthState.ERROR: // or 'error'
              console.log(
                'PhoneVerify::auth listener verification error, phoneAuthSnapshot: ',
                phoneAuthSnapshot
              );
              RN.Alert.alert(
                I18NService.translate('phone-verify-error'),
                // FIXME unhandled promise rejection here?
                I18NService.translate(phoneAuthSnapshot.error?.code ?? 'unknown', {
                  default: phoneAuthSnapshot.error?.message,
                })
              );
              Analytics.analyticsEvent('errorPhoneVerify', {
                phoneNumber,
                emailAddress: firebase.auth().currentUser?.email ?? '',
              });
              break;

            // ---------------------
            // ANDROID ONLY EVENTS
            // ---------------------
            case firebase.auth.PhoneAuthState.AUTO_VERIFY_TIMEOUT: // or 'timeout'
              console.log('PhoneVerify::auth listener auto verify on android timed out');
              Analytics.analyticsEvent('verifyPhoneAutoTimeout', { phoneNumber });
              // proceed with your manual code input flow, same as you would do in
              // CODE_SENT if you were on IOS

              this.setState({
                verificationId: phoneAuthSnapshot.verificationId,
              });
              break;
            case firebase.auth.PhoneAuthState.AUTO_VERIFIED: // or 'verified'
              // auto verified means the code has also been automatically confirmed as correct/received
              // phoneAuthSnapshot.code will contain the auto verified sms code - no need to ask the user for input.
              console.log(
                'PhoneVerify::auth listener auto verified on android, phoneAuthSnapshot: ',
                phoneAuthSnapshot
              );
              // Example usage if handling here and not in optionalCompleteCb:
              Analytics.analyticsEvent('successPhoneVerify', { verifyType: 'autoVerify' });
              this.linkUser(phoneAuthSnapshot.verificationId, `${phoneAuthSnapshot.code}`); // coercion fixes type error
              break;
            default:
              console.log(
                `PhoneVerify::auth listener unknown phoneAuthSnapshot.state?${phoneAuthSnapshot.state}`
              );
          }
        },
        (error) => {
          // optionalErrorCb would be same logic as the ERROR case above,  if you've already handed
          // the ERROR case in the above observer then there's no need to handle it here
          console.log(
            'PhoneVerify::auth listener error visible in optional error handler: ',
            error
          );
          // verificationId is attached to error if required
        },
        (phoneAuthSnapshot) => {
          // optionalCompleteCb would be same logic as the AUTO_VERIFIED/CODE_SENT switch cases above
          // depending on the platform. If you've already handled those cases in the observer then
          // there's absolutely no need to handle it here.

          // Platform specific logic:
          // - if this is on IOS then phoneAuthSnapshot.code will always be null
          // - if ANDROID auto verified the sms code then phoneAuthSnapshot.code will contain the verified sms code
          //   and there'd be no need to ask for user input of the code - proceed to credential creating logic
          // - if ANDROID auto verify timed out then phoneAuthSnapshot.code would be null, just like ios, you'd
          //   continue with user input logic.
          console.log(
            'PhoneVerify::auth listener optional complete handler sees value:',
            phoneAuthSnapshot
          );
        }
      );
    // optionally also supports .then & .catch instead of optionalErrorCb &
    // optionalCompleteCb (with the same resulting args)
    actions.setSubmitting(false);
  };

[colinm]

Thanks for the quick reply, i looked at this code (or similar) in the docs and was torn on using signInWithPhone or verifyPhoneNumber. Initially the docs made singIn look pretty simple, and minus the autoverify it works flawlessly in the app. It does however look like verifyPhoneNumber is much more friendly for custom flows, but I wanted to get this chunk finished without too much rewriting so I could get back to adding functionality. Are there any disadvantages to using verify vs signIn from your persective? I'll give this route a go after lunch, thanks again for the response. Much appreciated.

[mikehardy]

honestly have not thought too much the difference between signin and verify / I lifted my code from the docs and once it worked, I just went with it

[colinm]

Ended up going with verifyPhoneNumber and now auto verify is working correctly, i'd still like to see the docs show signInWithPhone handle auto verify in their example as more android phones will use this in the future and a novice in react/firebase that hits the docs is going to head down the same path I did most likely.

[MeetPalm24]

Hi,
I think signin is dangerous as it is verifying fake number in background as well

[sleekLancelot]

The accepted answer doesn't answer the most important question here: "is there a way to disable autoverify and force entering sms pin?"

[kimuniiii]

Problem

I ran into the same problem myself

When I use signInWithPhoneNumber, I could not sign in with the following error

Error

• code : auth / sesion-expired
• description : The sms code has expired. Please re-send the verification code to try again.

The cause of the error is listed here

Solution

When I use verifyPhoneNumber, I solved the problem with the following code.
Successful Auto Verify on an actual Android device（Google Pixel 5）

const verifyPhoneNumber = (phoneNumber: string) => {
    auth()
      .verifyPhoneNumber(phoneNumber)
      .on("state_changed", async (phoneAuthSnapshot) => {
        switch (phoneAuthSnapshot.state) {
          case auth.PhoneAuthState.CODE_SENT:
            console.log("sent sms code")
            break;

          case auth.PhoneAuthState.ERROR:
            console.error("error")
            break;

          case auth.PhoneAuthState.AUTO_VERIFY_TIMEOUT:
            console.error("auto verify timeout error")
            break;

          case auth.PhoneAuthState.AUTO_VERIFIED:
            console.log("auto verified")

            if (phoneAuthSnapshot.code === null) return;

            const phoneCredential = auth.PhoneAuthProvider.credential(
              phoneAuthSnapshot.verificationId,
              phoneAuthSnapshot.code,
            );

            const response = await auth().signInWithCredential(phoneCredential);
            console.log("response", response)
            console.log("success phone auth sign in and login")
            break;
        }
      });
  };

[Gautham495]

@kimuniiii You saved me thanks!!!!!!!!!!!!