Nativescript-plugin-firebase: Add support for firebase phone authentication

[abhayastudios]

Firebase now supports phone authentication in the console. The docs for iOS can be found here, whereas the docs for Android are expected here sometime soon. Although maybe the web client is more suitable for this plugin?

Will be great to have support for this auth method :)

[EddyVerbruggen]

Sounds good. Please ping when it's available.

[abhayastudios]

@EddyVerbruggen the Android docs are available now

[EddyVerbruggen]

Making good progress!

[abhayastudios]

Great stuff!! Please me know as soon as you have a pre-release available. I'd love to try it out and look forward to implement it in my app.

Thanks so much Eddy!

[EddyVerbruggen]

Added to 4.0.0 which will be released later today.

I'm especially interested in a test of Android devices as that's not 100% tested.

[abhayastudios]

Woohoo :) I will test on a Samsung S8 (Android 7)

[EddyVerbruggen]

That's great! I tested on a Nexus 6P (Android 7) but made a few fixes after my initials test that I can no longer test since the app is already authenticated.. and the phone-firebase wiring seems a bit sticky. Not a problem for normal usage, but for testing all the plugin's code branches it's annoying.

Anyway, 4.0.0 will be on npm in a few hours.

[abhayastudios]

Hi Eddy,

I tried it on a Samsung S8. I got the prompt to enter the code and an SMS with the code. By the way do you know whether it is possible to adjust the text for entering the verification code?

On the first attempt I got this error below, even though the phone was registered in firebase. Not sure if I missed something or whether there is an issue:

onVerificationStateChangedCallbacks com.google.firebase.auth.PhoneAuthCredential: function () { [native code] }
Unhandled Promise rejection: com.google.firebase.auth.PhoneAuthCredential.getCredential is not a function ; Zone: <root> ; Task: Promise.then ; Value: TypeError: com.google.firebase.auth.PhoneAuthCredential.getCredential is not a function TypeError: com.google.firebase.auth.PhoneAuthCredential.getCredential is not a function
    at file:///data/data/com.abhayastudios.testapp/files/app/tns_modules/nativescript-plugin-firebase/firebase.js:945:87
    at file:///data/data/com.abhayastudios.testapp/files/app/tns_modules/nativescript-plugin-firebase/firebase-common.js:128:5
    at ZoneDelegate.invoke (file:///data/data/com.abhayastudios.testapp/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:365:26)
    at Zone.run (file:///data/data/com.abhayastudios.testapp/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:125:43)
    at file:///data/data/com.abhayastudios.testapp/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:760:57
    at ZoneDelegate.invokeTask (file:///data/data/com.abhayastudios.testapp/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:398:31)
    at Zone.runTask (file:///data/data/com.abhayastudios.testapp/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:165:47)
    at drainMicroTaskQueue (file:///data/data/com.abhayastudios.testapp/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:593:35)
Error: Uncaught (in promise): TypeError: com.google.firebase.auth.PhoneAuthCredential.getCredential is not a function
TypeError: com.google.firebase.auth.PhoneAuthCredential.getCredential is not a function
    at file:///data/data/com.abhayastudios.testapp/files/app/tns_modules/nativescript-plugin-firebase/firebase.js:945:87
    at file:///data/data/com.abhayastudios.testapp/files/app/tns_modules/nativescript-plugin-firebase/firebase-common.js:128:5
    at ZoneDelegate.invoke (file:///data/data/com.abhayastudios.testapp/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:365:26)
    at Zone.run (file:///data/data/com.abhayastudios.testapp/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:125:43)
    at file:///data/data/com.abhayastudios.testapp/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:760:57
    at ZoneDelegate.invokeTask (file:///data/data/com.abhayastudios.testapp/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:398:31)
    at Zone.runTask (file:///data/data/com.abhayastudios.testapp/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:165:47)
    at drainMicroTaskQueue (file:///data/data/com.abhayastudios.testapp/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:593:35)

Any subsequent registrations work smooth, but as you suggested it doesn't verify the phone anymore even after deleting the account for the specific phone. It just registers the phone and returns the login method result object. However, if I lie about my phone number and provide something else then I get this ClassLoader referenced unknown path:

onVerificationStateChangedCallbacks.onCodeSent.forceResendingToken: com.google.firebase.auth.PhoneAuthProvider$ForceResendingToken@56dc38c
06-20 20:13:48.535 29411  9399 W System  : ClassLoader referenced unknown path: /data/user/0/com.google.android.googlequicksearchbox/files/velour/jar_data/JS1Hd84QnH9W7Q61ZTKD3QA_1.jar/lib

So I guess it kinda works, but there are small small things to be smoothened :)

[EddyVerbruggen]

Thanks, that's what I was afraid of. The good part is your phone doesn't need a manual entry of the SMS code either. I think older Android versions do, and that's what the prompt is for. I tried to suppress it for our "automatic" case, but obviously it wasn't perfect.

I'll see if I can get my hands on an older Android phone to play with.

[EddyVerbruggen]

@abhayastudios I've now solved that stacktrace (.PhoneAuthCredential.getCredential( should be .PhoneAuthProvider.getCredential( and can verify an invalid phonenumber/smscode results in the correct Promise.reject(). If only I had an easy way to test the happy flow..

[EddyVerbruggen]

Reading a bit more Google advises you to show the verification prompt even if auto-verification in the background works as well (which it mostly does). So I'm going to wait 2-3 sec before showing the prompt, and if it does it may be redundant (or the app is running on a SIM-less device).

[EddyVerbruggen]

@abhayastudios Fixed in 4.0.2. That should support all Android flows (iOS only has 1 flow, the one where the code needs to be entered). Also, I've added a property to pass in a custom prompt message, see the updated phone auth doc.

[abhayastudios]

Looking good so far :) I will test it some more over the next couple of days.

[freddiandrew]

@EddyVerbruggen
where i can see method implemented for this phone auth ? i want to know that setAutoRetrievedSmsCodeForPhoneNumber can use, using {N} angular.
i also want to try to use dialog modal if possible rather than prompt for older phone, and for checking sms quota.
thank you

[m4r4c00ch0]

How can we use this with the Web API?