Getting started with Firebase Auth on the Web – Firecasts
Articles Blog

Getting started with Firebase Auth on the Web – Firecasts


[MUSIC PLAYING] DAVID EAST: What’s
up, everybody? David here, and on today’s
episode of “Firecasts,” we’re going to be covering
Firebase Authentication. And just as a
reminder to you, this is one of many episodes
in a series on Firebase on the web where we cover things
like the Realtime Database, Firebase Authentication,
Firebase Hosting, Firebase Storage, pretty much Firebase
everything for the web. And we also cover
JavaScript frameworks, so Angular, Ember, React,
Polymer, all that good stuff. So if you want to
see those episodes, make sure to hit the
Subscribe button. But today we’re covering
Firebase Authentication. We’re going to go over how
to get everything set up in the Firebase console. And then after that,
we’re going to build a little app that uses email
and password authentication. So let’s get going. So when you’re working with
Firebase Authentication and the JavaScript
SDK, you’re going to be working within this
auth namespace, which returns to you all
the auth methods you need to log users in. And today we’re going to be
focusing on email and password. So to log a user in with
an email and password, we can call
auth.signInWithEmailAndPassword. And as you might
have guessed, it takes in an email as
well as a password. And what this will do is it
will sign in an existing user and return to you
a promise where you can resolve that user. But let’s say you
don’t have a user and you want to
create an account. Well to do that, you can
createUserWithEmailAndPassword. That takes an email
and a password. And I think you’re starting to
see a bit of a pattern here. And so what this will do is it
will go and create the user. And it will also log them in. So just like before with
signInWithEmailAndPassword, they both return promises which
allow you to asynchronously resolve the user’s data. But since it’s a promise, it
will only resolve one time. So if you want to monitor
authentication state, you can use a different
method for this. And that method is
onAuthStateChanged, which takes in a callback. And this callback fires
off every single time the authentication
state changes. So whether a user logs
in or a user logs out, that will trigger this
callback function. So in the case that
a user logs in, this Firebase user
parameter will be populated with the
current user’s information. But if the user logs out,
this Firebase user parameter will be null. So these are the
main three methods you need to know for working
with email and password authentication. But to practice them,
let’s go and build a login and sign up form. So here I have a web app
with a couple HTML elements. We have an email text
box, a password text box, a Login button,
a Sign Up button, and a not seen Log Out button. Because no one’s
logged in, so we shouldn’t really present
them the Log Out button. And all of these
elements correspond over here in our HTML– the email
text box, the password text box, our Login button,
Sign Up button, and unseen Log Out button. And then down here is
my application code stored in my app.js file. And if you’re wondering where
I’m including the Firebase SDK, it’s up here in the header. So I have some pretty sweet
web fonts, and then also the 3.1 version of Firebase.js. And yes, of course my own
homebrewed style’s right here. So now let’s kick this app off
by opening up the app.js file. So default inside of app.js,
I have configured my Firebase application. So I have all my
configuration keys. And then I just call
Firebase.initializeApp. And you can find
all this information in the Firebase console. So the first thing
I want to do is I want to get all
of these elements that I referenced
before into the DOM. So you’re going to
get all these elements with the magic of editing, which
you can see is just everything we referenced before–
email, password, log in, sign up, and log out. So now that I have
all the DOM moments, I want to first attach a
click event to this Log In button where I gather the
email and the password fields, and then send them off to
Firebase Authentication to log in a user. So let’s add a little
comment for that. And I’ll grab the button,
so btnLogin.addEventListener click, and then provide
the callback function. So inside of this
callback function, I want to get my email
and password fields. So we’ll grab the txtEmail.value
and the password.value. And I’m also going to
store Firebase Auth into this little
variable since I don’t have a lot of real estate. And then now I’m
going to sign in with signInWithEmailAndPassword. And signInWithEmailAndPassword
returns to me a promise, which allows
me to resolve the user. Or I can use this
promise to catch any errors that might happen
and log them to the console. So essentially what’s
going to happen here is I’m going to provide
an email and a password, click this Log In button. And this will fire off the
addEventListener function. And then inside of here, we’ll
gather email and password, send them off to
Firebase Authentication. And then if there’s a
user, it’ll log them in. If not, we will catch that
error and log it to the console. And I see that I actually
have a little typo right here. So I want to switch that
from password to pass. So now I’m going to
go and log in a user. So [email protected]
with my super secret password. And when I log in, you can
see we actually get an error. And this error says that
the given sign in provider is disabled for this
Firebase project. Enable it in the
Firebase console. So let’s go over to
the Firebase console to see what this is all about. So here in the Firebase console,
I’m in the Authentication tab. And underneath here I’m going
to click on Sign In Method. And you can see
within Sign In Method that we have this table of
all of the sign in providers. So email and password,
the one we’re using, Google, Facebook,
Twitter, GitHub, and my personal
favorite, anonymous. And what you might notice is is
that under status, all of these are disabled. And what this means is
that we can’t use them. So to enable them, we can go
over here and click this pencil and then enable. So now I’m going to go
and refresh this page. And I’m going to try another
one, [email protected] And when I log in,
we get another error. And this error says that
there is no user record corresponding to this account. Which makes sense, because
we don’t have any users. So how are we supposed
to log anyone in? So let’s fix that by attaching
event to the Sign Up button. So back in our app, I’m going to
add a click event for the Sign Up button. So btnSignUp.addEventListener
click with a callback function. And then the inside of
this callback function, I’m going to do something
really similar to what’s going on inside of log in. Because essentially
all we’re doing here is we’re getting the
email, the password, and then we’re calling
signInWithEmail AndPassword and checking for any errors. And we can really do the
same thing inside of here, but rather than call
signInWithEmailAndPassword, we just call create user
with email and password. So let’s just copy and
paste all of this code. And then now change
signIn to createUser. So one thing you
might be wondering is, how do we know that this value
right here is an actual email? Well we don’t, and on the
client that is up to us to validate that because
Firebase Authentication just assumes the input you sent
to it is an email or whatever that you want to
pass back to it. And it’s lenient and
leaves that up to you. So like a good
developer we are, we’re just going to leave
a little to do note. Check for real email. OK, so now I’ve
done that, I’m going to log in with a very real
email and with my password. And then when I click
Sign Up, nothing happens. And we don’t see
anything because while we are checking for errors,
we are not actually resolving the user. So in this promise, I could
use the dot then method to resolve the user, and
then log them to the console. But this promise
will only fire off one time, which
leaves me in the dark for any authentication
state changes. So rather than using
dot then, I want to use a real time
authentication listener. So using Firebase.auth().
onAuthStateChanged, I can pass through
a callback function. And this will let me know every
single time the authentication state changes. So this Firebase
user parameter could contain a populated
Firebase user, or it could be null if
we’re not logged in. So inside of here, I’m going
to write an if statement to check for the user. So if the user exists, lets
log them to the console. Otherwise let’s log a little
message of not logged in. So now I refresh
the page, you can see that we have the user
logged to the console. So I can go and
open up this user. And if I scroll
down, you can see that the same email is the one
we used to create the user. So now we’ve given the users the
ability to log in and sign up. But when they’re
logged in, we like to show them a Log
Out button so they can click that and log out. You can see down
here in our HTML, I have this button of btnLogOut. And by default, we have
this hide class on it, which sets its display to none. So I’m going to go
back to my app.js and add a click event
to be able to log out when that button is clicked. So I’m going to tap
into it with btnLogOut, addEventListener click with
this callback function. Now inside of this
callback function, I’m going to call
Firebase.auth().signOut. And this will sign out the
currently authenticated user. So now my log out button will
work when it’s clicked on, but we can’t see it. So what we could do is inside of
this onOffStateChange listener, we can check to see if we
want to display the button if the user is logged in. So if the user is
logged in, we’re going to get into the
class list of btnLogOut, and we’re going to
remove the hidden class. And if they are not logged
in, we want to add that. So now when we
refresh the page, we can see that we have our
nice Logged Out button and that we are logged in. And if I go and click
the Logged Out button, you can see down
in the console, we log the message of not logged
in, which means we logged down. So that’s pretty
much everything you need to know to get started
with Firebase Authentication. And if you like this video, make
sure to hit that Like button and subscribe. And also if you
want to learn more about Firebase Authentication,
like using Twitter, Facebook, Google,
Github auth, then you can check out our documentation,
which the links are in the description. But before I head out, I want
to see what you all are using for Firebase Authentication. Like what provider do you want
to use and what kind of apps are you building? And that’s all. But I’ll see you guys next time. [MUSIC PLAYING]

100 thoughts on “Getting started with Firebase Auth on the Web – Firecasts

  1. where did the original authentication code disappear to? That was a little misleading. Can't figure out if the authentication goes into the head of the index.html or app.js file. Thanks!

  2. Hello! Just a quick question, does firebase allow pre-determined users to sign-in to my application? Does it have a feature to create a list of email addresses that are allowed to sign-in or sign-up? Thanks so much for the help!

  3. hi, great videos!, just a question, how do i manage the name and last name of users, and what about roles?, I read the firebase documentation but I don't get a clear anwser… thanks

  4. The transparent hand annotating the video definitely makes the video feel more human and gives Firebase's instructional videos a unique flavor, but it was a TERRIBLE instructional choice.

  5. David, anyway I can use Office365 SSO (Azure AD v2.0 endpoint) to authenticate users for Firebase? (I said "Microsoft?!?! ;(….

  6. I'm building an app for our volunteers who help the world, and I want to provide volunteers the ability to log in, but no one else. This would mean not allowing registrations, or login unless they were already in the database.
    I would be interested to know how this can be achieved with FireBase.
    thnkx

  7. I am getting this error
    ERROR: Uncaught TypeError: firebase.auth is not a function.

    can u help me resolve this asap
    thanks in advance

  8. When I run it in the console shows no errors but when I press the login button or make up a random email i also get no errors – ie the buttons seem to be doing nothing? Any ideas?

  9. Can you share the whole code needed for all firebase authentications?
    One div for all types of authentications like Google OAuth, Facebook OAuth,Email Auth,Phone number Auth, Twitter OAuth etc.?

    Please?

  10. i got "The email address is badly formatted." error on both login and sign up.. any solutions? i followed the instructions tho

  11. Hi, as promised at the beginning of the video i'm seeking videotutorial to bind AngularJS 1.x with FIRESTORE. Is it possible? Thank you

  12. hey, i was working on an app and i have to use the same database for android and web both but the web is working properly and android is not working it is giving me the reference properly but not adding anything to it … whats the problem dude … help me out will you ?

  13. hey, can we use same firebase database for both android and web it is possible because i tried it works with web but not with android is there any way to use same database on both web and android at the same time please tell me i really need your help please….

  14. The only thing I don't understand is that it seems you are exposing your credentials to the user in app.js. I'm sure you can just do the authentication server side and send/receive tokens or messages from the client.

  15. hi! In your tutorial when you press log out button then it hides that button but Why I need to refresh after that log out button hide.???

  16. This is my login code
    function login()
    {
    var email=document.getElementById("un").value;
    var password=document.getElementById("pass").value;
    firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    console.log(error.Message);

    });
    }
    firebase.auth().onAuthStateChanged(function(user){
    if(user){
    //alert(user)
    window.location="dashboard.html";
    }
    else
    {
    alert("sign out");
    }
    });
    if my userid is wrong then my page in redirected.why this is happening can anyone know this.

  17. But people can create users calling the ''create method" from the console and write garbage on your database.

  18. I am getting the following error. "Error: A network error (such as timeout, interrupted connection or unreachable host) has occurred." I am hosting on the firebase hosting system and it is whitelisted so not sure why I am still getting this error.

  19. worst video i ever seen they don't provide any type of pre-requirement of coding and also they don't provide proper information for Beginners

  20. How to manage different user roles in a correct way? Example case: "there could be (1)Normal users who can sign in to web-app's Events after they have logged in and (2)Organizer users who can create Events for normal users :)" There is some discussion at https://stackoverflow.com/questions/43866550/firebase-set-roles-to-users but that seems kind of hard way?

  21. i got like this .
    Failed to load https://www.googleapis.com/identitytoolkit/v3/relyingparty/getAccountInfo?key=AIzaSyCqySPZ2NO53qr3MKASoEyPhHOaRoxdX40: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'null' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access.
    script.js:27 A network error (such as timeout, interrupted connection or unreachable host) has occurred.

  22. hi i am able to sign up but when i try to login i'm getting the following error

    Failed to load https://www.googleapis.com/identitytoolkit/v3/relyingparty/getAccountInfo?key=AIzaSyCF-2eltn6ArGyTfOLhOms2O15Vip6UDJ0: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'null' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access.
    authentication.js:28 A network error (such as timeout, interrupted connection or unreachable host) has occurred.

  23. @askfirebase hi i am able to sign up but when i try to login i'm getting the following error

    Failed to load https://www.googleapis.com/identitytoolkit/v3/relyingparty/getAccountInfo?key=AIzaSyCF-2eltn6ArGyTfOLhOms2O15Vip6UDJ0: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'null' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access.
    authentication.js:28 A network error (such as timeout, interrupted connection or unreachable host) has occurred.

  24. I'm getting the error below. Anyone know what to do with this?

    Failed to load https://www.googleapis.com/identitytoolkit/v3/relyingparty/getAccountInfo?key=AIzaSyCQO6eaDQEgTaNgLbe0MTLEGzOF8esIJ04: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'null' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access.

  25. It's an awesome tutorial to understand everything with firebase. It's very simple tutorial but it gave me all guidelines for the firebase login.

    Thank you very much for the great tutorial 🙂

  26. what app are you using to develop a html? pls help me because in sublime i cant get acces in js.

  27. हम सबसे कम कीमतों में G Suite (Google Email Hosting) प्रदान करते हैं Now you can ping me on skypeid : HEMANT_136, #GSuiteGoogleEmailHosting

  28. getting Uncaught TypeError: Cannot read property 'addEventListener' of null
    and Ur {code: "auth/argument-error", message: "createUserWithEmailAndPassword failed: First argument "email" must be a valid string."}code: "auth/argument-error"message: "createUserWithEmailAndPassword failed: First argument "email" must be a valid string."__proto__: Error
    Wc @ auth.js:286
    r @ auth.js:289
    btnSignup.addEventListener.event @ main.js:44
    auth.js:
    any solution would be appreciated

  29. Can you please take a session on nodejs and firebase authentication on server side( token verification part ). In the app, in each webpage I am authenticating to get UID just because of this my entire code is on web side. Can you please show a direction how UID can be sent to index.js on server.

  30. I find it very very tricky to read firebase. There is nowhere mentioned in the javascript section on how to create user data like displayName and those things but in the "onAuthStateChanged" method justbelow it, it is getting all kinds of data like phone, displayname etc. I know there is a method called create user but that is in admin section. So does that method not work with javascript? Why is it not mentioned there?

  31. I got the phone auth to work, it is great, but I realized there is a problem with phone auth, what if user changed his phone number ? once user login, and before user change his/her phone number with their carrier , how can we let them change their phone number ?

  32. TypeError: auth.createUsernWithEmailAndPassword is not a function

    I keep getting this error even though, i tried to create the exact same format as the the html and js file. but everytime i press the register button, this shows up, any solution?

  33. @firebase: Thanks a lot sir, but I have some issues. Can U please help me out? firebase.js:1 Uncaught {code: "app/duplicate-app", message: "Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).", name: "[DEFAULT]", stack: "[DEFAULT]: Firebase: Firebase App named '[DEFAULT]…12:14↵ at http://localhost:3000/js/app.js:48:2"}

  34. please help!
    I did every thing almost exactly as you did but something weird happens the app does not catch any error and the user is not authenticated
    however when I debug the code in browser the user gets authenticated I guess the function terminates before the process is finished but i don't know how to solve this.

  35. This was the most useful video I have ever seen unlike many other videos this guy goes just the way I was expecting someone to go,Thank you very much:)

  36. When I did exactly this video showed, the class "btn btn-action" was not even recognized and that's because "btn btn-action" class is a custom built CSS class. Where can I download it? I've tried everywhere and I still couldn't find it.

  37. If I develop the exact the same web app like this, am I able to deploy it to Firebase web hosting too?

  38. I have a question:
    Are there any other type of authentication?
    I mean i need create a login screen with ID and password. I needn't email. Can u give me some advice ?
    I hope u can understand my bad english

  39. Hello…my firebase website shows a blackscreen when loading on android smartphone. It loads for a long time and finally switches off. It has never opened….please assist me fix this problem….

  40. Hey there, I am struggling to add email verification to my React app and for some reason, my dynamic link is not working would appreciate if someone can help or any tutorial about dynamic links and email verifications

Leave a Reply

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

Back To Top