[Music] fire base off is a secure authentication system that allows users to sign in and sign up for your application it also allows federated identity through providers like Facebook Twitter and of course Google now when doing this your users will demand a rich user experience and providing this as well as solving identity problems can be a lot of work luckily firebase UI makes all of this really easy and in this video I'll show you how to do a sign in and sign up with Google in a web app as well as using an email password combination before we start you'll need to create a firebase project and then enable authentication on it the console will then provide you with code snippets to put in your web page let's take a look step 1 create a new project in the firebase console step 2 enable authentication click get started click setup sign-in method enable email password and enable Google step 3 if you're going to run these pages on your own domain be sure to add the domain name step 4 go back to the overview screen and click add firebase to your web app then you'll get the initialization code okay now we've done everything we need on the firebase back-end the next step is to build a site that presents sign-in options this takes you to a page once you've signed in and displays information about the user on that page and that's it it's just two web pages but wait surely when signing in you might need to build more pages things like choosing between different accounts on the machine something like this or if you want to sign up a new user then you probably need something like this well the good news is firebase off UI does all of that for you let's just build our pages and we'll see it in action here's my first page it's just basic it's near-empty HTML remember that code from the firebase console well I'll just paste that in and then from github I can use the code for the sign-in widget you can find that code here and I'll paste it here yes that's github because firebase off UI is fully open source I need to configure it to tell it which page to redirect to after signing in and also which providers I'm using earlier if you remember I turned on email and Google so I'll do that here and now the logged in page again it's pretty basic and I just paste in the same code not this part it's a callback that happens when the auth state changes so we'll write a little info about the user to the page in that case and that's it that's all the coding we need to do so you now have a page with to sign-in buttons there's a sign-in with Google button and a sign in with email button think about the different flows for sign-in with Google button I might have no Google accounts on this machine in which case I have to give the user the facility to create one or there might be more than one account signed in in this browser in which case I have to give the user the ability to choose one of them or of course I might have a user already signed in with Google in which case I should just sign them right in let's see this in action okay I now have a browser with no Google account signed in I click sign in and I get this as I have email sign in as an option it falls back to email sign in but I really want to sign in with Google so I need a Google account so if I select more options I can do that and this is all without writing any code for it okay here's the next scenario I have multiple accounts signed in on this browser so when I try to sign in it gives me an account chooser that's pretty neat right and then there's this simple scenario I have one account in this browser so when I click sign in I should just sign straight in and I am so lots of different user flows but you're given the optimal standard user interface without needing to write any code and that's what the open source firebase off UI does for you so we just saw what happens when a user tries to sign in with Google but what if you want to keep your own user store and not Federation identity provider like a horse well no problem the email sign-in gives you just that if you try to sign in with email what firebase will do is list the Google accounts based on their email address that are signed into this browser already but if you don't want one of them and you just want to use your own you can sign in with that so but of course you might need a sign up page so that someone can create an email identity to sign in to your site with and that's also provided for you Google smart lock will even save it for you if you want let's see that in action [Music] I'm now back on my home page and I'll select sign in with email here are two email addresses that I signed in with previously if I pick one of them I'll get either the Google sign-in password entry if it's a Google ID or the email password one if it's an identity I set up on this page I enter the password and I'm logged in signing up a new account is easy you just click the Add Account button enter the details username and password and the account will be created one subtle but powerful part of this is that firebase off the UI also detects and prompts your users to use the sign-in method that they previously had used so for example if they had signed in with Google previously they will be taken directly there to do so again saving them time and effort and saving you a lot of code and that's it great UX for signing in and signing up very little coding for you I hope you enjoyed this screencast on how to do firebase author UI on the web as always leave me questions in the comments below and don't forget to hit that subscribe button [Music]