离子电容 Firebase 电话号码认证问题

Question

For anyone who is trying to authenticate via firebase phone number using ionic, this post is for you.

I spent weeks trying to solve this problem for my own app, and have moved on to using email because solving the phone number problem was taking too much time, but I am making this post to save you from wasting your time on red herrings.

The Issue:

Phone number can only be used when attached to a url, so if you are making an ionic application through a website, phone number auth via firebase will work, however, if you are trying to do it on mobile it won't work because firebase requires a url attached and there are no urls in mobile apps of course ( firebase ).

Option 1: Plugins

So, the easiest option would be to look around for third-party plugins to implement phone number auth on. I believe there is a Cordova plugin for this, ( cordova-plugin-firebase-authentication ), however that library is not compatible with Capacitor (compatable plugins ).

There are a few other plugins that I tried to implement without much success. Notably, the ( capacitor-firebase-auth plugin ). It claims that phone auth works for ios and android, however, the actual method for doing that seems very complicated and follows a different path using.p8 codes that I was unable to follow-through with ( confusion ). And this plugin has some major limitations .

Option 2: In-App-Browsers

Since option one doesn't seem very feasible right now, the second option is to put code up on a website for phone number authentication and then open a browser within your app to authenticate. I spent a ton of time trying to get this method to work to no avail. It seems possible theoretically, but in practice, it is a mess. The biggest problem with this method is that what you want is to be able to run the signInWithPhoneNumber(phoneNumber, appVerifier) on your mobile app, because then your app treats users that have signed in through phone number like any other user and it makes general authentication much easier downstream in your application. However, in order to do that you need a verified appVerifier , which is of the class firebase.auth.RecaptchaVerifier . The firebase.auth.RecaptchaVerifier is supposed run .render() to initiate the recaptcha provlem and then run .verify() to verify a token that is given after the user does the recaptcha ( documentation ). I have tried to run .render() on a website and then .verify() on a mobile app, passing the token between the two. I am not sure why this doesn't work, it could just be a problem with my setup, but after trying for over a week on this method, I gave up on trying to get it to work. The token I pass just doesn't confirm. I don't know how these two functions work under the hood, there may be some identification system for each unique instance of firebase.auth.RecaptchaVerifier that is invalidating this method, I really don't know.

If you want to take a stab at this method, I recommend using the cordova plugin (it is compatible on capacitor projects) instead of an iframe or the capacitor browser plugin for in-app-browser to the website because it is easier to use and there is better functionality for passing data between the app and the website.

Option 3: Implementing Manually on IOS and Android

I haven't tried out this method, however, theoretically, you could go into your android studio and Xcode projects to actually write swift and java code following the firebase instructions for firebase phone auth ( android tutorial ) ( ios tutorial ). This would probably work, but I am not sure how you would notify your ionic project to defer to the swift and java files when authenticating.

---

Please let me know if there are any methods that have worked for you or any solutions to the roadblocks I have encountered, this is what I've tried so far!

Answer 1

I am the OP. After doing more work I finally got the phone auth system to work using capacitor-firebase-auth ( https://github.com/baumblatt/capacitor-firebase-auth ). I also created a git repo showing my code example and how to use it: https://github.com/Darrow8/capacitor-phone-test

In my previous attempt, I was running into issues with getting cfaSignInPhone to work but after more tweaking, it worked. Another major issue was getting firebase.auth().signInWithCredential to work. It turns out I had to combine the aformentioned capacitor-firebase-auth library with @angular/fire https://www.npmjs.com/package/@angular/fire

Answer 2

You can simply use cordova-plugin-firebase-authentication its compatible with capacitor, it works for me.

https://ionicframework.com/docs/native/firebase-authentication

Answer 3

Hello I tried working with Firebase Web and it worked well for me. No external plugins just firebase web implementation

Answer 4

Cannot leave a comment due to reputation but I would appreciate an implementation of it, I am going through your code but not sure where to call the methods you have mentioned. Any feedback would be most welcome. Bests