Alternative Sign in Methods for Firebase with Ionic

Ryan Gordon
Mar 13, 2018 · 5 min read

In my other posts on Firebase sign ins, a focus has been put on Social providers. The main point of this emphasis is to enable ways for users to sign in with information they already have rather than creating new credentials for yet another site. What if, however, the user has no social providers or what if they have them but don’t want to use the ones we offer.

Additionally, what if the user doesn’t want to provide their information but we still need some way to authenticate the user to provide services.

This is where the next two sign-in methods come in very handy; SMS Sign in and Anonymous sign in.

Anon Login

Enabling Anon Login will be easy if you have done any of the other firebase providers I have wrote about. We will be reusing alot of the same stuff to get anon login working. The good news for this login , is no native social media providers are needed.

Furthermore if at a later point we need to, anon user accounts can be converted and linked to other types of accounts in the firebase console.

First step is to enable to anon login sign-in method in firebase. Once this is activated, no further setup is needed other than the typical firebase setup if it is a new project.

Enable anon login and click save

Coding the guest login

The code itself is very straightforward. All of the hard work is encapsulated into a simple function called signInAnonymous

Nothing more is needed to implement this but the drawback is we have no user info. No name, no contact info, just a device ID used for firebase.

At any point an anonymous account in Firebase can be linked to any other sign in provider so our guests arent stuck with only this sign in method.

Sign Out :

I should have covered this on a previous post but we should probably do a sign out considering there is 2 providers here and we will want to test both.

Signing a user out of firebase is easy. Its done as simply as:

signOut(){firebase.auth().signOut();}

Now we just need to wire this function up to a button and bam we’re good.

Take a break; Grab a sandwich before the next part.

Phone number Login:

Disclaimer: This login method only works on web versions for now. This is due to the RecaptchaVerifier packaged not being able to verify the source of the request when on mobile.

Logging into an app/service with SMS is a very popular sign in method, in particular in China with most big websites such as Amazon and AliExpress accepting phone number sign ins.

To us as app developers there might not be much difference between email vs phone number sign ins. They are both unique identifiers, both have some measure of security and we can verify ownership of the credential by sending a confirmation email/sms if we need.

Phone number sign ins have one distintct advantage over email sign ins. NO PASSWORDS.

Providers can still enable passwords and use the phone number as a second form of verification see ‘Two-Factor Authentication’.

How does it work ?

Signing in with sms on firebase is enabled through the use of the OTP protocol. This is a popular method for verifying users using One Time Passwords which are generated on the fly and only valid for a certain peroid in some cases. This OTP protocol is used very often as a secondary signin method. In this example users select to sign in with phone number, receive a text and gain access by providing the 6 digit OTP code they receive. The same process will happen every time they need to sign in.

Getting started:

I am going to make an decision to implement the SMS login stuff in a separate page. There is no reason for this other than having the page strictly for phone sign in details. This idea behind all this is every sign in will have a button. Some methods need additional info (email, sms logins) and they will push a new page to collect this info. Social sign ins get this info from their providers and anon login just logs in.

ionic g page sms-login

In this login page we need to perform a couple of tasks.

  • Gather phone number
  • Mitigate spam/bot signups
  • Confirm user has access to phone number provided

Gathering the phone number will be easy and can be done with the usual angular forms. How ever using Firebase SMS requires more than just a phone number.

In order to use firebase SMS login service we must pass an instance of RecaptchaVerifier which has been verified in our app. Without doing so we will get an appropriate error

To mitigate bot sign ups we will use Google reCaptcha. reCaptcha is one of the de-facto providers for captcha verification on forms. Part of what makes it so great is its learning algorithms which help to train some of Googles other services such as sign detection in the Maps product.

Finishing it off

After the user has provided their desired number and has confirmed, we need to authenticate this number by sending a one time passcode. Not doing so means we have no way of knowing for sure if the user owns this number and it is needed to complete the sign in.

The good news is Firebase handles the SMS side of things for us once we initiate the login. All we have to do is provide a way for the user to submit the code and attempt to authenticate it.

The best way to do this might be with an alert, this is a visual pop up component that we can use to gather the number, on submit we can check the code and if successful, pop the user back to the previous page.

Below you can see all the code used to implement the sign in on the backend.

quite a lot going on here

Before we test the sign in. We will need to enable the SMS method in the Firebase console. To do this head to your firebase console located at console.firebase.google.com and enable the Phone method.

If the user is confirmed through this, we are done. The user is now signed in and can use our app.

Another Disclaimer:

Using either of these sign in methods wont pull down useful user info like an avatar image or name details etc. If you need this info from users, prompt for it after the signup is successful.

Conclusion :

Conclusion

From this article, we have set up 2 alternitive sign in methods and worked through a cross platform solution for signing users into our firebase with either SMS texts or just as a guest.

All the code for this tutorial and all of my other ones can be found here. I am aiming to implement as many of the firebase features as I can and YES I am looking for contributors!!!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade