title: Ionic Capacitor Firebase Phone Number Authentication Problems
body: <h2>For anyone who is trying to authenticate via firebase phone number using ionic, this post is for you.</h2>
  <p>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.</p>
  <p><strong>The Issue:</strong></p>
  <p>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 (<a href="https://firebase.google.com/docs/auth/web/phone-auth" rel="nofollow noreferrer">firebase</a>).</p>
  <p><strong>Option 1: Plugins</strong></p>
  <p>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, (<a href="https://github.com/chemerisuk/cordova-plugin-firebase-authentication" rel="nofollow noreferrer">cordova-plugin-firebase-authentication</a>), however that library is not compatible with Capacitor (<a href="https://capacitorjs.com/docs/cordova/known-incompatible-plugins" rel="nofollow noreferrer">compatable plugins</a>).</p>
  <p>There are a few other plugins that I tried to implement without much success. Notably, the  (<a href="https://github.com/baumblatt/capacitor-firebase-auth" rel="nofollow noreferrer">capacitor-firebase-auth plugin</a>). 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 (<a href="https://github.com/baumblatt/capacitor-firebase-auth#google-ios-specific-configurations-1" rel="nofollow noreferrer">confusion</a>). And this plugin has some major <a href="https://github.com/baumblatt/capacitor-firebase-auth#phone-verification-1" rel="nofollow noreferrer">limitations</a>.</p>
  <p><strong>Option 2: In-App-Browsers</strong></p>
  <p>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 <code>signInWithPhoneNumber(phoneNumber, appVerifier)</code> 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 <code>appVerifier</code>, which is of the class <code>firebase.auth.RecaptchaVerifier</code>. The <code>firebase.auth.RecaptchaVerifier</code> is supposed run <code>.render()</code> to initiate the recaptcha provlem and then run <code>.verify()</code> to verify a token that is given after the user does the recaptcha (<a href="https://firebase.google.com/docs/reference/js/firebase.auth.RecaptchaVerifier" rel="nofollow noreferrer">documentation</a>). I have tried to run <code>.render()</code> on a website and then <code>.verify()</code> 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 <code>firebase.auth.RecaptchaVerifier</code> that is invalidating this method, I really don't know.</p>
  <p>If you want to take a stab at this method, I recommend using <a href="https://github.com/apache/cordova-plugin-inappbrowser" rel="nofollow noreferrer">the cordova plugin</a> (it is compatible on capacitor projects) instead of an iframe or the <a href="https://capacitorjs.com/docs/apis/browser" rel="nofollow noreferrer">capacitor browser plugin</a> 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.</p>
  <p><strong>Option 3: Implementing Manually on IOS and Android</strong></p>
  <p>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 (<a href="https://firebase.google.com/docs/auth/android/phone-auth" rel="nofollow noreferrer">android tutorial</a>) (<a href="https://firebase.google.com/docs/auth/ios/phone-auth" rel="nofollow noreferrer">ios tutorial</a>). 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.</p>
  <hr />
  <p><strong>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!</strong></p>