Setting Up Firebase Auth with React: Step-by-Step Tutorial

hello everyone to a brand new video I am nage and in this video we will learn how to integrate Firebase authentication with a react project to do this we will start by setting up a basic react application then we will move on to integrating Firebase and setting up the authentication process this includes user sign up login and session management using context API we will also tackle some common issues you might face during the integration so this is the demo of what we will be building there is a login page and there is a create new account page so with login page you can login either by entering your email and password or by using your Google account so if I will use email and password for which I have already created an account then I can simply sign in and when I will do that then I will be redirected to the homepage with the message saying hello uh my email you are now logged in now I can log out by clicking on this log out button in the header I can also log in using this continue with Google button so when I will click on it then I can simply use my Google account now because I have already logged in previously this code by default has picked up my information and now I am logged in as a Google user into this project or in this website now let's see how we can Implement these two pages along with all of this functionality so this is the boilerplate react application with all the components for authentication login registration for the fixed header and for the homepage so we don't have to worry about building this application from the scratch and we can just focus on the important stuff to integrate Firebase authentication providers for email and Google with our react project now before we start to write any code let's first see what are the min minimum steps we need to take in our Firebase account the first thing you need to do is to register on the firebases website if you have not already done that next you need to create a new project and you need to add the authentication for email and Google and to do that you just need to go to the signin methods and because I have already added email password and Google you are now able to see them over here but to add a new provider you can just click on this button and you can select any one of the providers which are available so email and Google are already added but you can add Facebook and apple GitHub Yahoo Twitter Microsoft and so on and so forth you will also need to create a web application for your project if you have not already done that you can do that by clicking on this project settings and by clicking on this add app I have already added a web app but if you have not done that then you can simply click on this button add app and then select the typee of the application that you want to be associated with your Firebase backend so for web you need to select or click on this icon for IOS and Android these two buttons can be used and we will also need to use this Firebase config values that I will show you how we can do that now the first thing that we need to do in our react project is to add Firebase to this web application and for that first we need to run in the terminal npm install Firebase now I am going to initialize the Firebase config and for that I will create a new folder in the SRC folder with the name Firebase I will create a file in this folder with the name Firebase do JS now in this fire base.js file I'm simply going to copy the code which is given over here so let's just copy it and paste it over here over here we are simply creating a new config object and we are creating a new app by simply calling initial app and then providing this config object as an argument now to use authentication or Au we need to make a couple of more changes to this f base.js file first I will add or import the get o from Firebase o and then we will also initialize the value of O constant and then finally we are going to export both app and O to be used in other modules now this concludes everything we need to do for our fire base.js file now now before we start to add all the O functions in this project first let's create a use o hook which we can use to manage the centralized state for our authentication to do that in this SRC folder I will create a new folder with the name contexts in this context folder I will create another folder with the name Au context and within Au context I will create another file with the name index. jsx now this Au context file is going to take care of two things first to create an O context or the authentication context which is going to encapsulate all the childrens and then we will also create a use o hook which we can use in different components to get to know about the different authentication State related parameters first I will simply create the Au context by simply calling react. create context now let's create the component for our Au provider we can directly export this Au provider function from over here now with the Au provider we will need a bunch of State variables the first one that we are going to need is for the current user whenever the user will log in then the user's information is going to be set in this current user State variable next one is going to be the user logged in state if the user will be logged in then this will be set to True otherwise this will be set to its default value which is false let's also Al set the loading state of our Au hook initially it will be set to True which simply means that our code is trying to find out or trying to load what is the current Au state of the users in our project the next thing that we will do is we will subscribe to the Au State change event so whenever the authentication state is going to be changed such as if the user is logging in or if a user is logging out then we want to subscribe to those event changes by simply list listening to them for that we need to import the O dependency from the Firebase JS file that we just created so import o from Firebase for/ Firebase we will be subscribing to the Au State changed event in a use effect hook so use effect and this is going to have a call back function as an argument and an empty dependency array because we only need it for the first time now to subscribe we just need need to write unsubscribe equals to on o State Changed by providing the O object as an argument and then providing a call back function which is going to be called to handle when we will receive any user information this unsubscribe can be used for cleanup so when the Au provider component is going to be unmounted then we can simply return this unsubscribe function now let's implement the initialized user function when a user has successfully logged in then it is going to be provided with the users's information as an argument so first we can simply check if the user is a valid value if that's the case then we can simply set the current user so we can call Set current user function by simply spreading out the users properties into a new object so that we are not maintaining any references to this user argument when we have set the current user then we can also be sure that the user has logged in so we can simply call set user logged in to true if if the user has logged out then we will not receive the valid user object if that's the case then we can simply set the current user as null and we can also update the users's logged in state or status to false finally after all of this we can simply call the set loading function to set the loading state to false now from this Au provider we are going to expose the value object which is going to be const value equals to a new object literal so I'm going to expose the current user and if the user is logged in or not and also the loading state if the hook is currently loading the user information or not finally we can simply return our Au context provider we will return the Au context. provider component with the value prop set to this value object so this is everything we need to do with the Au provider context now it's time to export one more item from this file which is our use o hook so for that we will simply export a function use o which is our Hook and the return value is the result of calling use context by providing this Au context as an argument let's now also add all the missing dependencies that we need for this file so react use context use State and use effect we also need to import the on o State changed function so import on o State changed from five is O So now our o context and use o implementation is finished the next thing that we will do is to initialize or implement the o. JS file which is going to contain all the functions for authentication so let's create a new file in the Firebase folder with the name au. JS now over here first we are going to import o from our f base.js file so let's do do that now we will be adding the individual functions to create a new user with email and password to sign in the user with email and password to sign in a Google user and to sign out I will also show you how you can implement the functions for password change password reset and email verification although I will not be using those functions in this project but you can extend this project to implement these functionalities as well so to create a new user with email and password we can simply create an asyn function which is going to call the create user with email and password function from Firebase Au so let's just import this function so import create user with email and password similar to that we can add the function to sign in using email and password now to sign in with Google we need to use the Google Au provider and for that I am just going to import Google Au provider let's also import import the signin with email and password function as well in this do signin with Google function first we need to get the provider value by calling Google Au providers Constructor next we will simply call sign in with popup function so this is important because a popup is going to be opened and we are going to select the Google account using which we need to login now what you can do is you can return this result from over here and as an extra step you can also save the users information in fir store so for that you can simply use the result. user property and then maybe save it to fir store now let's add the function to sign out the user from their account this can be done by simply calling au. signout now remember I told you that I will show you the implementation of the functions to do password reset password change and to send verification email although we will not be using these features in this project so to do password reset we just need to call send passord password reset email to update the password we just need to call update password by providing the au. current user as an argument and the new password and for email verification we need to call this function send email verification by providing the current user as an argument now because I'm not using it I'm just going to comment this out now it's time to update our boiler plate code which is already there for the Au components for header and for home so let's just start with the login component so for login first we need to import the O functions which are do sign in with email and password and also do sign in with Google we will also need to import the use o hook which we have created so import use o use AU from Au context we can use the use Au hook to get to know about the users's logged in status by simply calling use o destructuring the user logged in property now when the user will click on on the login button then this onsubmit function is going to be called so over here what we will do is we will simply check if is signing in is true or not so if the user is not currently signing in then we can first set the is signing into true and then we can simply call this do sign in with email and password function so await do sign in with email and password by providing the email hold on email and password as the arguments and that is all we need to do for signing in using the email and password it's pretty straightforward next we can provide the function for Google sign in and for that we can just create a function first so this is the function and same stuff we need to check if the user is currently signing in or not so if they are not signing in then we will simply set is signing into true and then we will simply call do sign in with Google Now there could be an error with users signing in using the Google's popup if there is an error then we have to make sure that we are setting the set is signing in or the is signing in state variable to false that can be done by simply providing a call back for the error state of the promise which will be returned from this do signin with Google function so let's do that for this login component we also need to make sure that if the user is already logged in then they are navigated to the homepage because there is no point in showing the login page to a logged in user now this is everything we need to do to this existing boiler plate login component all the other inputs and their behaviors are there one last thing that you need to take care over here is to set the error message if there is any error so I'm not currently doing it but you can extend this codes to implement the error message functionality now similar to login we can also update the register component which is having the boiler plate code for the register card so we just need to import use Au and do create user with email and password functions for on submit we can simply provide the logic to create a new user with their email and password by first checking if they are already not registering and then if the user is already logged in then we can navigate to homepage now for the header we cannot display these three buttons or links Al together to log out to log in and to register in new account the log out button should only be visible if the user is logged in otherwise the login and register new account buttons should be visible so I'm just going to modify this code now with this condition we can use the user logged in property from use o hook to check which buttons we need to display in our fixed header and again we need to import the required dependencies for the use Au Hook from the O context that we created and also the do sign out function which we have added to the .js file now we can do one last thing in our homepage and that is to display a message which will simply print the users email or users's display name whichever is available so we need the use o Hook from the O context and this time we are going to fetch the current user property from calling the use Au Hook from this home component we can simply return a message hello and if display name is available then we are going to print display name otherwise we will print the current users's email now this condition is important because when a user will login or create an account using email and password then their display name is not going to be available although we can set it explicitly by simply creating a profile page and allowing the user to enter their display name or by simply showing a dialogue when the user logs in for the first time asking for their name but in any case if display name is not available then we have to use email but the display name is going to be available with the Google's authentication and that is pretty much everything you need to do to integrate Firebase o with your react application I hope this tutorial made the process clear and you are now equipped to implement this in your own projects if you found this video helpful then please hit that subscribe button it really supports the channel and helps me bring more content like this to you guys this is ntit signing off thanks for watching and I will see you in the next video

Channel: Code Radiance

Views: 10,676

Keywords: ReactJS, Firebase Authentication, Web Development, User Authentication, JavaScript Framework, Firebase Integration, React Firebase Tutorial, Secure Web Apps, Frontend Development, Firebase Security

Id: WpIDez53SK4

Length: 17min 28sec (1048 seconds)

Published: Wed Jan 10 2024