React-native-firebase: Phone Auth - phoneAuthSnapshot with null values

[flaviouk]

Issue

I was trying to setup phone auth (great work btw), and at first the only issue I was having was onAuthStateChanged not getting called after firebase.auth().signInWithCredential(credential). My app is setup in a way that only onAuthStateChanged changes redux-store, after I restarted the app to try again, onAuthStateChanged got triggered and I logged in normally, but then when i tried to replicate, phoneAuthSnapshot was/is
{verificationId: null, code: null, error: null, state: "verified"}

Tried deleting the user directly from firebase console, doesn't work either.
Here is my code:

  onSubmit(values) {
    const { enterCode, verificationId } = this.state

    // Code was sent already
    if (enterCode) this.signIn(values.code, verificationId)
    else {
      const phoneNumber = `+${values.country.callingCode}${values.phoneNumber}`

      return firebase.auth()
        .verifyPhoneNumber(phoneNumber)
        .then(phoneAuthSnapshot => {
          switch (phoneAuthSnapshot.state) {
            case firebase.auth.PhoneAuthState.CODE_SENT:
              this.setState({ verificationId: phoneAuthSnapshot.verificationId, enterCode: true })
              break;

            case firebase.auth.PhoneAuthState.ERROR:
              toast.danger(phoneAuthSnapshot.error, 'top')
              this.reset()
              break;

            case firebase.auth.PhoneAuthState.AUTO_VERIFY_TIMEOUT:
              toast.danger('Verification timed out')
              this.reset()
              break;

            case firebase.auth.PhoneAuthState.AUTO_VERIFIED:
              this.signIn(phoneAuthSnapshot.code, phoneAuthSnapshot.verificationId)
              break;
          }
        })
        .catch(err => toast.danger(err, 'top'))
    }
  }

  signIn(code, id) {
    const verificationId = this.state.verificationId || id

    if (!verificationId || !code) return toast.danger('', 'top')

    const credential = firebase.auth.PhoneAuthProvider.credential(verificationId, code)
    return firebase.auth().signInWithCredential(credential).catch(() => toast.danger('', 'top'))
  }

Environment

1. Application Target Platform: Android

1. Development Operating System: macOS Sierra 10.12.6

1. Build Tools: Android 23.0.2

1. React Native version: 0.48.4

1. RNFirebase Version: 3.0.0

1. Firebase Module: auth

[pulkitkkr]

I'm facing the same issue i guess, i have SHA 1 and google-sservices.json intact but still getting this error

[flaviouk]

I was previously getting that error just after switching projects, added SHA 1, rebuilt google-services.json, enabled phone auth method and upgraded to blaze plan (not sure if related).. after doing this, it worked again like it used to

[pulkitkkr]

I deleted the app (not Project) and re created for android with SHA-1 but still getting the same error

[pulkitkkr]

Just enabled the Spark Plan .... It's working now

[Salakar]

@pulkitkkr I'll add this to the upcoming new documentation site as a note that you need to be on a paid plan for phone auth to work.

The brand new docs site isn't live yet, but if it helps both of you the start of the phone auth docs (still wip but stuff is there) can be accessed with this temporary URL:

https://invertase-default.firebaseapp.com/docs/v3.0.*/auth/phone-auth

Feedback on the new docs site also welcome.

@flaviocarvalho are you still having an issue with null values? Which states specifically are causing issues for you or is it all of them?

Edit: ah I see what you mean - think I have a rough idea of what this may be, will take a look.

[pulkitkkr]

@Salakar paid plan isn't necessary , tried it again with another app ... Seems to work fine now ,l... But upon phone verification As @flaviocarvalho mentioned snapshot is null

[flaviouk]

@pulkitkkr Yeah spark plan is free and gives you 10K/month, not sure if new projects starts with spark plan enabled or like a trial version
@Salakar New docs site looks awesome, I had only tried verifyPhoneNumber, gonna try signInWithPhoneNumber instead now, might even be simpler in my app, will let you know if that works

[flaviouk]

Okay I just tried with signInWithPhoneNumber and it works perfectly and much simpler, I guess this is a verifyPhoneNumber issue

[brianhiss]

@pulkitkkr @flaviocarvalho What did you guys do to get around the SHA-1 error? I have a paid app (Blaze Plan), the app and code (verifyPhoneNumber) work perfectly in iOS, authenticating via physical iPhone. No matter what I do, I cannot get around the SHA-1 error on Android. I've tried new keys, logging inside the Android code. I also only have one app on Firebase, so no conflicts between apps.

@Salakar @chrisbianca Have you guys seen this at all? It's my last remaining headache from the upgrade to 3.0.x, just can't seem to get around it. Posted here details https://github.com/invertase/react-native-firebase/issues/466#issuecomment-334915196 here as well. I am running on a physical device, HTC One, Android 5.0.2. Google Play Services (11.5.09) are up to date. Even hard reset the phone.

All other Firebase services are working properly, including the new Firestore. So wouldn't appear to be a config issue.

[flaviouk]

@brianhiss You need to add your SHA-1 to the firebase console, in the android app dashboard:
Here is how you can get it: https://developers.google.com/android/guides/client-auth
https://stackoverflow.com/questions/39144629/how-to-add-sha-1-to-android-application

[brianhiss]

@flaviocarvalho I've had my SHA-1 key in Firebase for a while now. Actually have both the debug key and release key. Which one are you uploading to the console?

[flaviouk]

@brianhiss debug I think, is your local google-services.json up to date with your project's?

[Salakar]

Hi all, not ignoring this issue, I am looking into it, just a PITA to investigate phone auth issues as I get 24 hour blocked from firebase after too many attempts of using phone auth 🙈 , been blocked since yesterday, will get back to it once it lifts in the next couple of hours. Have a rough idea what the null value issue is.

[Salakar]

@pulkitkkr to go back to my previous statement, a paid plan is definitely required for phone auth:

[pulkitkkr]

@Salakar In India, US and Canada it's free upto 10k SMS/month. I'm using it for free, can confirm that .....moreover I'm also facing an issue , phone auth work with release APK but not in debug mode

[pulkitkkr]

@brianhiss try react-native run-android --variant=release ... In my case SMS services works in build mode but not in debug mode

[brianhiss]

@pulkitkkr Appreciate that tip, unfortunately already tried all that before :)

@flaviocarvalho Appreciate all your contributions, I had already tried all of them. Just asking the community here in case I missed any of the obvious.

@Salakar Appreciate the insight and help, I know how busy you guys are on the core 3.0.x release and don't have extra time to debug edge cases like this. I think it's time to find a new test device and reach out to Firebase Support and see if my account is locked for any reason. I'll post back my findings to the community in case anyone else runs into this.

[brianhiss]

@pulkitkkr I'm not an expert in Android, nor can I even get my own implementation to work with Android (iOS is perfect), but do you have both keys in Firebase Console?

You obvious have your release signingConfigs setup in android/app/build.gradle:

signingConfigs {
        release {
            if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
                storeFile file(MYAPP_RELEASE_STORE_FILE)
                storePassword MYAPP_RELEASE_STORE_PASSWORD
                keyAlias MYAPP_RELEASE_KEY_ALIAS
                keyPassword MYAPP_RELEASE_KEY_PASSWORD
            }
        }
    }

Here is where I am Android illiterate, do you need to add in a debug setting in there with your ~/.android/debug.keystore values, or does Android Studio/gradle do this for you for debug. I'm curious myself, something I played with to try to get Phone Auth working on Android, one of the many things I've tried.

For you Android guys, can you sign your debug releases with your release key? Is there any downside to this?

[flaviouk]

@brianhiss I just checked my android/app/build.gradle I don't have that signingConfigs like you do.

The only thing I have that is related to release/debug is:

// applicationVariants are e.g. debug, release
applicationVariants.all { variant ->
        variant.outputs.each { output ->
            // For each separate APK per architecture, set a unique version code as described here:
            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
            def versionCodes = ["armeabi-v7a":1, "x86":2]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
            }
        }
    }

And also a comment on top of that file:

// whether to bundle JS and assets in debug mode
// bundleInDebug: false,
// whether to bundle JS and assets in release mode
// bundleInRelease: true,

Not sure if that helps you or not, let me know if you want me to check something else, pretty sure I got it running in debug, but don't know exactly how to check.
I do have a ~/.android/debug.keystore file, and another called myProject.keystore (not sure which one I'm using, might have been a mistake while I was trying to set this up)

[brianhiss]

@flaviocarvalho Thank you, always helpful to see more. I used the React Native Android Signing Guide to setup my signingConfigs, and it seems everything is working.

I'm going to reach out to Firebase Support. My guess is my Android device is blocked, or my account is locked out for some reason.

Let me know if you come across anything else, but I'll also update this thread with my findings.

[Ehesp]

@flaviocarvalho is your issue resolved?

[flaviouk]

@Ehesp I didn't try verifyPhoneNumber again, but feel free to close it if this was fixed on the latest update.

[zoontek]

I have exactly the same problem. I can't use signInWithPhoneNumber since it's for a reauthentification (to update the user email), and onAuthStateChanged is not fired when the user is already connected… I have a paid plan, already check SHA-1, put in release mode, etc. with no success.

Has anyone succeed?

[lslima91]

This is still an issue with verifyPhoneNumber.

using the example code is a good way to replicate it:
https://rnfirebase.io/docs/v3.2.x/auth/phone-auth#Example

[Gongreg]

Just So others would not think that it is an issue. Auto verification on android is supposed to return nulls. https://stackoverflow.com/questions/48334262/firebase-phone-authentication-sms-code-null-android

[aMarCruz]

@Ehesp , @Gongreg is right... why does verifyPhoneNumber is not returning the credential directly on onVerificationCompleted?

Maybe I'm missing something, but seeing these lines looks obvious.

That should avoid regenerating the credential later, which I think is one of the sources of these problems.

BTW: I'm curious, the variable mCredential is not used, how does this protect against null verificationId?

[chrisbianca]

@aMarCruz mCredential is used here: https://github.com/invertase/react-native-firebase/blob/287ad216cf8895dce892e53c8fff4fd48e81d265/android/src/main/java/io/invertase/firebase/auth/RNFirebaseAuth.java#L1128

[kokoapps]

is this issue closed ?
I am getting nulls and can't create the credentials for signing in

[franzwarning]

So what are we supposed to do with this object: Object {verificationId: null, code: null, error: null, state: "verified"} (in the case of Instant Verification?)

[ydv0121]

i am also getting this don't know how to solve it

So what are we supposed to do with this object: Object {verificationId: null, code: null, error: null, state: "verified"} (in the case of Instant Verification?)

[mikehardy]

Are you using the return values from the API calls, vs using the onAuthChanged listener objects like in the example on rnfirebase.io? My best advice is to use the listener like the example, it has all the things you need

[ydv0121]

Are you using the return values from the API calls, vs using the onAuthChanged listener objects like in the example on rnfirebase.io? My best advice is to use the listener like the example, it has all the things you need

i am using onAuthChanged listener ..and on very first time i am getting OTP from firebase after then it always return Object {verificationId: null, code: null, error: null, state: "verified"}

[dochathuc]

I have the same issue with AUTO_VERIFIED, it returns {verificationId: null, code: null, error: null, state: "verified"}, and onAuthStateChanged will not be called.
Solution:
https://github.com/invertase/react-native-firebase/issues/1962#issuecomment-521990883

• Creating an object with credential by passing null values
• Sign in by this firebase method, signInWithCredential

[rajatrao777]

@dochathuc
Hi All,
I am facing the same issue i.e once the Phone Auth for a particular mobile number has been done and signed via signInWithCredential , the next time i try to sign in via verifyPhoneNumber i do get all values null except state as verified (i think it basically means the phone is smart to validate itself without otp i guess so everything is null and state is verified)
I did checked the solution you mentioned as was able to create credential with null values and was able to sign in with
'signInWithCredential'
But how to handle the user who has signed with phone number initially and received the otp , but the next time due to auto verification without otp , i don't want him to redirect to main screen skipping the flow of otp as it is been not sent to user, but still verified doesn't seem proper to me 😞.
I know the user is auto verified but still doubt about skipping the otp and verificationId
Any advice , suggestion appreciated and thanks for linking the soln

[dochathuc]

@rajatrao777
Hi,
I think we have to let users go to the Input OTP screen and force them to wait. We will not know there is an auto verification until verifyPhoneNumber listener returns.

[rajatrao777]

@dochathuc
Hi,
I got your point , but when the user enter the mobile no and then verifyPhoneNumber is called by the time user is redirected to otp screen, but the user had already signed in once and signed out (earlier user had received otp for the first time), so now verifyPhoneNumber returns null values (no otp message comes)but state is verified , but as you said user is waiting in otp screen for what reason as user is already verified , so thats the problem user needs to be skipped from entering mobile no and getting the result if verified then direct to main screen else direct to otp for verification?
Are you able to understand the scenario i am trying to explain?

[hari-n-rangarajan]

• Creating an object with credential by passing null values
• Sign in by this firebase method, signInWithCredential

@dochathuc Could you give an example? Passing null values to phoneAuthProvider.Credential gives me a null back.

[dochathuc]

@hari-n-rangarajan
Hi Hari,
With AUTO_VERIFIED on Android, you will receive {verificationId: null, code: null, error: null, state: "verified"}. Then:

• Creating an object with credential by passing null values
• Sign in by this firebase method, signInWithCredential

const credential = firebase.auth.PhoneAuthProvider.credential(verificationId, code); const userCredential = await auth.signInWithCredential(credential);