HowTo Video Tutorial Script (575 words)

Laurence Moroney: Did you know that Firebase Auth now offers phone number authentication where your users can simply sign in using their verified phone number and not have to deal with usernames or passwords? It works by sending a message with an embedded code to the phone number that you sign up with. This contains a validation code, and if the user enters the right validation code, they’ll be signed into the application and registered as a Firebase user.

You’ll also notice that a CAPTCHA is used. This is optional, and you can turn it off by using the radio button. I’m Laurence Moroney, and in this video, I’ll show you how it all works.

Before coding, the first thing you’ll need to do is have a Firebase project in the Firebase console.

If you don’t have one already, you can create one at this URL. Once you’ve done that, you need to go into the Authentication section and click on the Sign in Methods tab. You can see a list of the various sign in methods, and on this list is phone.

Flip the Enable switch to on, and then click Save. Your app can now handle Firebase phone authentication. If you look at this URL, there’s a demo app that you can use to inspect how the authentication flow works. It’s this sample that we’ll step through for the rest of this video.

The demo was built using the open source Firebase UI libraries, and I strongly recommend using them, as they encapsulate most of the complex user flows that are necessary in building an app that uses sign in. A link to the libraries themselves, along with full instructions on using them, is right here.

The first step is to use the libraries, of course. And you can do that by including them from our CDN here. If you prefer to use local scripts, NPM, Bauer, or other methods, check out the link also.

To use Firebase UI off, you’ll first need to configure it. And typically this will include a URL to redirect to on successful sign in, a terms of service URL, and a set of options.

It’s in these options that you have to specify that you want to use phone off with the phone off provider, and things such as whether you want to use CAPTCHA or not. Here’s an example.

Once that’s done, you can initialize Firebase UI Auth with it and load it into a div on your page, like this. You can then check the on/off state changed for Firebase Auth to determine if the user is signed in or not. If it returns non-null, then the user is signed in. Otherwise, they’re signed out.

But what’s really neat about this is all the user interface that you see for managing users is entirely automated. You don’t have to build it for yourself. Firebase UI handles all of it for you.

That includes things like the user interface for entering a phone number, submitting it through Firebase, and where you enter to the code to verify it. And once all of this is completed, you’ll then be redirected to the signed in URL that you configured in the Settings earlier. It’s really that easy.

So to learn more about Firebase, including more on Firebase Auth, check out our YouTube channel where we drop new videos frequently. And don’t forget to hit that Subscribe button!