Firebase Phone Auth for Web Applications – Firecasts

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]

Danny Hutson

29 thoughts on “Firebase Phone Auth for Web Applications – Firecasts

  1. One thing that's different from Android Firebase Phone Auth with Web App one is user has to enter the OTP. In the Android flow, app reads the message for the OTP (without asking for permission, cool eh)

    Want to see this feature for web apps too.. but I guess that's the feedback for Google Chrome Development.

  2. If Firebase really want people to enjoy those kind of videos they need to solve the communication problem through Google platforms. Google Plus doesn't have an easy communication on the chat like Facebook Messenger.
    I'm trying to say that people would prefer learn about Firebase or any other kind of programming if they find other people to practice and learn together.
    Where could I find people from my country to practice anything with me? Is there any Google App where I can find people by their interest? Searching communities on G+? I don't think so.
    Thank you, Firebase.
    I hope you can understand me and try to talk to Google about this.

  3. Hi
    Comment je fais pour utiliser cette authentification sans avoir besoin d'intégrer la vérification via ReCaptcha. Je ne trouve rien dans la documentation : https://firebase.google.com/docs/auth/web/phone-auth#send-a-verification-code-to-the-users-phone

  4. Your firebaseui is beautiful.
    But sometimes, developers like me have to use firebase authentication in their own <input type="tel"> box.
    Eg: big forms where phone number verification is just one part and lots of other input fields are needed.
    Also, if we wants to use firebase phone number authentication in a big form with different style, we just can't do it.
    Because these are your own codes and without your guidance, we can do nothing.
    Please make videos on adding firebase authentication on websites without using Firebaseui and by using custom input fields and custom buttons.
    If you make this without using nodejs, it will be great because some developers may not have nodejs feature support. Including me.
    If you make the video without using Firebaseui and nodejs, that will be much helpful because simplicity is what we want.

  5. Your firebaseui is beautiful.
    But sometimes, developers like me have to use firebase authentication in their own <input type="tel"> box.
    Eg: big forms where phone number verification is just one part and lots of other input fields are needed.
    Also, if we wants to use firebase phone number authentication in a big form with different style, we just can't do it.
    Because these are your own codes and without your guidance, we can do nothing.
    Please make videos on adding firebase authentication on websites without using Firebaseui and by using custom input fields and custom buttons.
    If you make this without using nodejs, it will be great because some developers may not have nodejs feature support. Including me.
    If you make the video without using Firebaseui and nodejs, that will be much helpful because simplicity is what we want.

  6. Does phone auth require a password? Can you require the user to set a password to go along with the phone number (for instance using a phone number as opposed to an email address)

  7. Can anybody help me with the source code of firebase web phone auth please.
    Kindly share me the firebase web phone authentication.i really need it .
    Thankyou

  8. The description and code is not clear! I'm trying since 2 days to use the phone verification, but there is not a clear Tutorial? Send us the Code for only the PHONE authentification!

  9. I am trying to add Firebase Phone Auth with an invisible reCaptcha. The basic code is giving the following Error. All the other code is working fine. Could anybody help?

    //invisible recaptcha Verifier

    window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier( 'submitPhone',{ //'submitphone is my button ID

    'size': 'invisible',

    'callback': function(response) {

    console.log(response);

    }

    });

    let appVerifier = window.recaptchaVerifier;

    firebase.auth().signInWithPhoneNumber(numberToSubmit, appVerifier).then(function (confirmationResult) {

    // SMS sent. Prompt user to type the code from the message, then sign the

    // user in with confirmationResult.confirm(code).

    window.confirmationResult = confirmationResult;

    console.log(confirmationResult);

    //Here I generate the following output in the console.log

    (03AOLTBLToE_23GyrteAWZ4b_vW2DPhncsf1byhoBoqqRGhQOoWho7gZ8dMmVTo5YkyMkIGUXwn1XAEi6zbMCuvD8_HnsI2G3SeVHoKzlQwKCTnTTVPpEEVzY3RamFkt8A5yOXAbHKFPgS-cSDY-w5ZYy08URNxQVWtQuxVtD_RXy2iv8YSyQHEm8G8GZa4IsCwVtgYMev1ZddtobNGtaVFZA4dqjO9_ubzEhUxImRpF6DIyoxsQrA1JUtwlyB-YlY53eXZQnfEQUA3L7CmB_L1skXZYdLyee4vDHGATgoRhdSOITMov-spBG0lyhCkPYcZvbeHAAeP-7s)

    }).catch(function (error) {

    // Error; SMS not sent

    // …

    console.log('Error sending SMS:' + error);

    //Here I generate the following Error in the console.log

    Error sending SMS:Error: Invalid format.

    });

    The following Error is printed in the console.log around both the above mentioned outputs –

    VM1428:1 Uncaught DOMException: Blocked a frame with origin "https://www.google.com" from accessing a cross-origin frame.

    at <anonymous>:1:16

  10. My default sms is "your firebase app verification code is …". I want that sms to have my website project name, what should I do?

Leave a Reply

Your email address will not be published. Required fields are marked *