How to set up Authentication using Firebase (Web)

good morning everyone I hope you have a fantastic day it's Gabriel here and today we're gonna create a login in JavaScript using firebase for those of you who are not familiar with it firebase is a platform owned by Google it provides server-side services such as login storage cloud notification and much more if you don't want to spend too much energy on time creating your own server side this is actually an excellent choice connecting a fast back-end to your application I'm going to use Visual Studio code to write my script it's free and comfortable I'll leave a link in the description if you like to use it so buckle up and enjoy the ride we are starting right now go ahead and open up visual studio code and add five new files log in HTML main HTML login dot JavaScript main JavaScript and file based JavaScript clicking on the ctrl + space button together will open the snippet menu open up the login control space and select the first HTML snippet it will create an HTML template go ahead and change the main JavaScript to login JavaScript get rid of the CSS and I like to put the script in the body area we need to add also the firebase JavaScript and we will do the same process to the main when you finish editing the HTML go ahead and open up firebase login with your account and click on the go to console button it will load your file based settings this window you will need to add a project so click on the add project button as you can see I already have one this is the project manager page select the add file base to your web app and click on it it will give you a snippet copy the snippet and go to the login HTML page paste the code in the head area and take everything that's inside the script and cut it this code responsible to initialize the file based application that's why we are putting it in the file based JavaScript I like to wrap the code with a self invoke function so everything inside is going to be private so we will expose this global variable I promise to do a future video explaining why it is a very good idea to wrap up your third party objects fell base library should be added to all HTML pages so go ahead and copy the file base library from the login and paste it on the manga so so far we've just initialized the file based object so now let's work on the login itself go back to file base and click on the get started on the authentication tab question mark on the top right corner select authentication developer Docs go to the guide stub authentication web and click the first option this is a pre build UI provided by file based themselves click on it and scroll to the bottom and now we will copy and paste a lot of code copy the UI config area which is going to initialize the login UI paste everything on the login J's file and like the previous Java Script I like to wrap everything in a self invoke function so all that is inside is going to be private now we need to setup where we want to be redirected to after the login is success so we want to go to the main HTML Terms of Service URL I accidentally put also the main but you should put something else back to firebase and copy the UI star of the function it will inject the login interface to the HTML the next snippet is three lines of HTML code take them and put them on the login HTML which is where the login interface is going to be injected now if you notice the UI object is not in issue so this is going to initialize the object copy this line and put it on the log in JavaScript you can see the UI is actually the same UI over here so the last thing we need to do is actually add a file based else library so scroll to the top and copy these two lines of code and paste them on the login HTML underneath the file based JavaScript go to the main HTML and put your own welcome text open up the login HTML page then you will be presented with the login interface so you can see I have a little arrow it happened because I opened the log in HTML through the system file and not through silver but it doesn't really matter because we're going to use the sign-in with email which requires only internet connection so let's set up the login JavaScript so we can see only the email comment all the rest except the email of vital going back to the login HTML we can see only the sign-in with email and no errors go back to firebase sign-in method under the authentication tab and enable the email and password option mine is already enabled go back to the login HTML put your email click Next firebase will check if the user exists if not it will prompt you with username and password signing in will redirect you to the main page under the user tab on firebase console you can actually see the user has been created so let's take a little coffee break before we continue shall we [Music] so now that you're enjoying a good cup of coffee go back to the authentication developer Docs go to the reference tab and choose from the left menu JavaScript select a file based off and inside select a house option on the right list you will see all the file based dot else methods we will need there on earth state change click on it and copy the snippet on the example go to the main JavaScript and basically what we want to do we want to prevent anonymous user getting into the main HTML so as always I created this self invoke function paste the snippet we copied before now the on state change function is not only a function but it is also an event registration it means that if the user is not authenticated anymore I'm going to get notified so if I have a user authenticated it means that he can stay otherwise I have to redirect him to the login HTML another thing I like to do is to save the user ID because it's been used a lot when we talk to the server so if the user is not logged in it's going to be reset to null let's create the logout function and you can see that the only thing I need to do is call the sign out method and the on outside change is going to handle the rest back to the main HTML we are going to add a button called logout and we will connect the onclick event to this logout function that we are exposing right now and another thing I want to do is to use the firebase object we created earlier in the firebase JavaScript file and again as I told you in a future video I will explain the benefits of using this approach so go ahead and implement the onclick event on the button [Music] so actually going back to the application and refreshing the page we will see the logout button clicking on it will log us out and you can see that even trying manually to change the others to the main HTML will actually prompt us out to the login again this is because we are not authenticated so only by a login we can access the main HTML again and it will stay so if I'm in the main HTML and will refresh the page it will stay and again pressing the logout button will send us to the login page so that's it for me I hope it wasn't too fast to catch we have done a lot for a 7 minute video and all of these using the firebase platform if it was helpful and you like to see more click on the like button and subscribe if you haven't already and as always I'll see you in the next one

Channel: Gabriel's Lab

Views: 64,220

Keywords: How to set up Login using Firebase (Web), Gabriels lab, gabriel's lab, login, javascript, how to add login in javascript, javascript tutorial, firebase, login with firebase, how to add login in firebase, gabriel's lab and firebase, firebase tutorial, how to use firebase, How to set up Authentication using Firebase (Web), authenticate with firebase, firebase web, how to, authentication, tutorial

Id: CvkCjfHts9A

Length: 7min 31sec (451 seconds)

Published: Sat Jan 27 2018