Firebase Email & Password Authentication in React App | Step-by-Step Tutorial

hello everyone welcome back to the channel in this video let's see how to implement Firebase authentication with the email and password inside a front-end react application so you can go to firebase.google.com basically Firebase acts as a backend as a service it has a various services and it is backed by Google so you don't need to manage your backend services so you can focus on building your logic so our use case will be to use other integration service from Firebase you can go to console once you are inside it so it will ask you to create a project so after that you are supposed to register your app so here I have already created a project and registered one of my app and what you are supposed to do is you can simply like there will be options for you so you need to choose the web option because we are going to use this backend service for our web application not the mobile apps so you can choose this option and it will ask you to register your your app like this I have already done this so here you can see like I have already get started with the authentication so if you expand the product categories under the build you can find various services so here we are going to use authentication Service so the first thing you are supposed to do is inside a sign in method option you are supposed to enable email and password provider you can click on this one and you need to enable this so it is already done and inside users you can see there are no users as of now let's jump into the demo so this is my react application currently you can see I'm inside a sign up page so basically if I go to the home page so without authenticating you can see it has redirected back to login page so before login we are supposed to register right so you need to create account so this is my signup page so I would like to open the console as well so let's try registering the user so you can see I have completed the registration process and I'm inside my home page so I'm welcoming the user and here you can see I'm displaying the user email address and I have a logout button inside console you can see this is the response from Firebase once the user has registered so it has a user object that contains the metadata and then it is also providing an access token so here what you need to observe is I'm using local storage variables so if you go to application tab here you can see I'm using two variables one is token and the other is user why I am using is so once you log in or I mean once you register you need a certain State Management inside your front end so that you can use that information right so here I am not using any State Management tools so that's why I'm going with the local storage this information only I am accessing and showing inside home page so if there is no token then it it will treat like the person is not authenticated let me try to log out so if I click on logout button so you can see I have redirected back to login and the variables were deleted let's go to Firebase and let's refresh and see if the user has registered and you might observe like uh how do I register other like details right apart from email and password you need to make use of this user ID you know you need to store the other informations inside the Firebase database services so that again that will go into another topic so let's focus on the authentication aspect okay so now we have a user available so let's try to login with the same email so again you can see we are into home page and variables were created again so let's log out okay so let's start with the coding part okay guys so here I have opened the project folder inside Visual Studio code here you can see I have a basic react application created so I have used npx tool to create a basic react application and inside I have removed some of the files and I have a clean component like you can see inside the app I have just a welcome text and if I show in the browser so this is how it is looking right now so it is currently running on Port 3000 okay so the first thing we are going to do is inside source folder let's create a folder for Pages we need to create three pages one for sign up and inside I'm going to use reactor Snippets for generating the component snippet again let's create one more page for login let's use the snippet again okay and uh one more home page all right so let's save all these things okay so now let's go to root component which is app and let's try to import the sign up so let's see how it is looking in the browser okay so let's start with the sign up page and here I would like to replace this HTML code and you can see I have a H1 tag and form that has a two input Fields one for the email and the other for the password and a submit button and let me comment this paragraph tag so here you can see this is to redirect the user to login so we have to use the react router Dom package in order to use it so for a moment like let's comment this line so here you can see I'm using use State variables so let's create those two so here we need to import use state from react so the default value will be empty string whenever we input something so we are attaching on change Handler so it will update our state variables and we need a submit Handler right so when we submit the form this will trigger this handle submit function so let's prevent this default action okay so before continuing with further implementation let's save this and see how it is looking in the browser so let's add some CSS so that it will look properly so inside app.css I'm just adding some CSS Styles so it is just like you know making it Center and displaying Flex on in the column Direction and some margin and cursor pointer Styles so let's save this okay now you can see the form has been centered all right so now we are in good state to jump into Firebase console so you can go to this link and here you can see it is asking to create a project so let's go ahead and create one so I'm going to provide a name okay so let's continue I'm disabling the analytics you can go with your requirements okay so let's continue so here you can see uh get started by adding Firebase to apps so here what we are supposed to do is we need to select the web option we need to register our content application so again provide a name so make sure like you are providing a proper name because when you enable Firebase hosting it will consider this name in that domain name so in in our case I'm not going with the hosting and also I'm not enabling this so let's register all right so here it is asking to install the Firebase and then we have to initialize and you know configure in our front-end react project with this information so let's copy this code so inside source folder let's create a file called firebase.js so here I'm going to paste that information so we need to export default we need to use this app in all the pages so that's why I'm exporting so we also need to export one more thing which is uh authentication related so here you can see we are supposed to uh you know import this from again Firebase so before importing this one let's focus on installing the package first so let's copy this command so make sure you are inside your project and apart from Firebase I'm also going to install one more package which is react router Dom so to manage uh front-end routes I'm going to install this package so in the meantime like let me talk about react router Dom like you can go to this website here you can see I am inside a latest version 6.4 so in our project like we are going to make use of nested routes and I will discuss further how to implement when we start writing the code alright guys so the installation was completed so let's look at our code so inside package.json you can see Firebase and react router Dom was installed so here you can see so I'm importing the get auth from Firebase slash Earth package so let's save this there is one thing I would like to share here you are supposed to use this configuration data inside environment variables so make sure to implement that so all right let's close this and start with the sign up implementation okay so I'm going to implement uh asyncavate approach so let's open the try cash block so if there are any errors let's log that so here you can see I have created a variable which is a user credential so we are going to call create user with email and password so this method comes from Firebase so you can see now when I open the file in the tab so this is now recommending so let's import this so now you can see this method is coming from Firebase auth so let's import this one as well so let's lock this data what Firebase is giving us and here so after logging the information I am trying to take the user object I'm storing in this variable here I am creating two local storage variables so one for the token so here we are calling set item and the variable name is token and the value we are grabbing the access token from the user and I'm also storing the user information in user variable so since this will be an object what you need to do is you need to stringify it right you cannot directly store the object inside local storage so you have to stringify it so that it will be in a string format so once this process completed we need to redirect so for that I am going to use uh use navigate hook which is coming from react router Dom package so using this we can directly call this function and we can simply call slash this should go to home page let's also try to implement the home page as well we are going to have a heading let's add a button for the logout purpose so here you can see when you click on the button on click event so we need a function to handle this logic so here I'm using this function so here again you can see this is an async function inside this we need to call sign out method so again this will come from Firebase okay whenever we are logging out so we need to remove this local storage variables right so to clear that and then followed by again we need to redirect back so again here we need use Now update from the ACT router Dom so here you can see I'm redirecting to the login page and not to the home page so let's look at in the browser only in the context of react router component okay so we haven't implemented a routing Concepts right so that's why react application is complaining so let's focus on implementing that aspect so let's open the index.js file so here I'm going to import these functions from react router Dom so here what I'm trying to do is I am going to create a variable which is router variable using this functions so here I am going to have a route whenever you have a root path so we are going to load app component here inside I am going to have a nested routes so let's say if you go to slash sign up right so this signup page will go will load and then if you go to slash login path then it is going to load login page so what about like a home page right so before going to home page here you can see I'm going to have a protected component so I will Implement in a moment so when you go to Clash home page like the road path so we need to execute a middleware component so inside source folder let's create a folder for components and inside let's create a component for protected so inside you can see I'm going to replace this so I'm trying to fetch Locker storage variable which is a token and I'm storing in a variable if we have a token then we are going to use the re-outlet component so this comes from react router Dom if there is no token then we are going to navigate so this is again kind of a redirection to the login path so for a moment let's save this so let's try to import the protected again let's import lineup and login so inside this I'm providing one more nested route so here I am placing the home page by default it will go to protected component and it will verify if you have a token and if you do have one in place of this Outlet component this home page is going to replace so here I am going to replace react router provider so to this I'm providing the router prop and router object which we have created here so in the root component what we are supposed to do is so you can see we are loading the sign up so here we have to use the outlet so this comes from react router Dom so this is the replacement like so inside index.js so if you go to sign up so this sign up page will replace here so again for the login same so we don't need this import here so let's save this and verify in the browser okay now you can see it has redirected right because we do not have a token and the protected component is uh verifying the routes so let's try to add the same code base inside a login page as well so accept the fact that I'm going to change the component name so here also login class name for the button should be login as well here you can observe like we do not create a user inside a login page so here what you are supposed to do is you need to call sign in with email and password so again this comes from Firebase auth okay so let's remove this create user thing so let's change this heading as well login and the name of the form login let me verify if I have this class name okay let's save all okay now we can see the login page inside login so you can see I have commented this paragraph right let me change this so here inside login we need to ask user if they want to sign up here we are using the link component which is coming from react router Dom again in the sign up page as well so let's uncomment this line and let's import this link component all right so let me create on this one so now you can see we have redirected to sign up and then login and you can travel like this but you cannot access the home page let's start with the sign up process so let me open the console so let's click on sign up okay sorry guys uh like I have forgotten to continue with the Firebase implementation in the dashboard so we have registered the app and after this one we have to enable the authentication right so if you go inside the authentication let's get started with that and then inside sign in method so you can see uh the email and password provider we have to enable this one and save it okay I just want to retry this action this time let me register again so now we are inside the home page we are able to see the Firebase response so it is providing the user data and here you can also observe inside application tab so you can look at the locker storage array section we can see there are two variables created one is a token and the other is a user if I click on logout button this should remove these variables from Locker storage so let's try okay and we have redirected back to login page inside Firebase console let's uh verify this so by reloading this time we should see a user created inside a home page when we login display the user email right so here you can see I'm fetching the local storage variable which is the the user variable so we need to parse this right so to change it back to Json object instead of first string so we are storing the data inside user variable and after the H1 tag I'm going to place this h2 tag so here you can see I'm trying to display the user email only when there is a user data available so this is a conditional operator right so this is also called short circuit operator in react we are only going to access email property when we have a user object available so this comes from left to right evaluation okay so now let's try to login so I'm using the same user information which I have used for the registration so let's try login okay so now this time you can see the email is also showing up inside home page okay so let's log out okay so now I will try to go home page no it is not letting me to access right that's all about the video guys I hope the video is helpful and you understand the process of implementing Firebase authentication inside react application so we have used the email password approach keep watching dual icon subscribe to the channel take care bye foreign

Channel: Web Wizard

Views: 5,046

Keywords:

Id: aNMnyLjFqYI

Length: 19min 24sec (1164 seconds)

Published: Thu Jul 27 2023