Firebase Phone Auth for Web Applications – Firecasts


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. [MUSIC PLAYING] 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! [MUSIC PLAYING]

Be the first to comment

Leave a Reply

Your email address will not be published.


*