Firebase Authentication in React: A Step-by-Step Guide with Protected Routes

hello my friends in this tutorial I will show you how to create user authentication using reactjs and Firebase sign up and signin methods also I will explain the protected root concept and how to sign out a user so let's start I have a clean react application here so first of all I will create a homepage with the form layout let's create a Pages folder with the home js6 file and add some basic structure inside it will be a section and title for now next I want to display my homepage so I should install the react router Dom library and create the very first router Stree I need to import browser router roots and root here now I can compose them and declare a homepage as a default route to do it just pass the index prop to rout with the homepage element don't forget to import the page and use it as an element of the route our homepage is successfully rendered as you can see on the screen so next step is creating a form marker add a form tag first a legend to declare a form title and a field set to group our input Fields then create a list and every item of this list will contain a label and input element and I want you to know that I wrote CSS in advance to save a little time but don't worry you can repeat after me without styling or using any CSS you want please note that I use a type password for the second input to hide the user's password symbols during typing after that let's make a sign up button I Define it with the type button to prevent the default form submit action because the default button type is submit also we need to allow users to use the login method here so to implement it I will declare as state the dial call is sign up active and and the simple Handler function a little below this function will switch our e Side Up active flag to true or false on every call now we need to call it somewhere so I'm going to create an empty link element at the bottom of our form and pass the function as an onclick Handler after that let's split our form titles into two the first is for the sign up active State and the second is for sign in just d at it replace the render condition and text sign up will be the default here and now it works the same actions to split our link elements and buttons the login link should be visible if the sign up state is active let's check how it looks now okay and we also need to render different action buttons in the same way now make sure it works and yes it looks well the second step here is to create a Firebase application and integrate it into our react app open the Firebase console and press create a project after that type a project name and click continue I disabled Google analytics CU we don't need it now and our project is ready now I need to pick a new web application in the console and prompt an app title press the register app wait a second and go to the next step this is a very important part now we need to install Firebase to our react app and save all these credentials I'm going to add a new Firebase file to the root folder of my project and paste all Firebase settings inside okay save it and go back to the Firebase console open the build tab on the left bar pick authentication and click get started now choose email password signin method press enable and save get back to our Firebase settings and import the get out method from Firebase alss we need to create a n instance and exported to use it all over the app okay now I would like to move all this sensitive data from the Firebase config to the N file I strongly recommend you hide it from the straight access since I use vit as my project Builder I need to call every variable with with graic but if you use create r t or something else the way of naming might be different here I'll speed up the process a little now we can read these variables from n file using import. met. n construction and this also works only with we if you use create r t you should probably read this as a process. n well if I didn't M up anywhere our project must continue to work and it actually works good so now I would like to work with sign in and sign up method let's import the create user with email and password method from Firebase house and declare a new sign up Handler function below inside this function I will call the create user with email and password method with three arguments let's take a look at them first the house instance we can import from the Firebase config but we still don't have email and password here so I'm going to add a new state to save the user's email value and another one for the password the initial value of B States will be an empty stream eight user with email and password method will register a new user in the Firebase console and we can do something useful with the user's data inside the function or C an error but I'm going to use a simple console lock here because this is just an example and we don't need any actions here now we should make our inputs controlled by the state so I will create a handle email change function to set an email value and a similar one for the password just copy pin paste the current Handler and replace the name and the set State function now let's P them to our inputs we should call them when unchange event is trigger The Last Action here before create the first user is to add the on click Handler to the sign up button okay we are ready to create the first user just under an email and password click sign up and our console Log Show us a new user to make sure that the user was successfully created go back to the Firebase console open the authentication page and it's here great also we don't need to call the sign up method if the email or password is empty I just add it as simple verification on the top of our Handler function but you can do it more complex if you want it works next I will create a signin method to allow users to to log to our service import the sign in with email and password method from the Firebase house and create a new handle I will call it handle sign in I can copy and paste our sign up function because it will be almost the same I just need to replace a callone method PR handle sign in as an onclick prop to the sign in button and let's try to log in enter enter our email and password and press sign in and here we go we were successfully logged in user IDs are equal as you can see now is the time for protected root concept basically if we have an authentication process in our app we want to hide some pages or data from the straight access in other words if the user doesn't have an account or is not logg in to it we don't want to show him some private Pages let's create a new private page it will contain just only section and title for now and add it to the roots three with a specific pass it's going to be private and don't forget to import it now we can easily open this page just because there are no rules to protect it from outter access so I will create a components folder and add a protected root component inside this component receives a children prop and a user prop in fact the implementation of the protected route is quite simple in our case we just want to check if the user exists if it's true we just return children if there is no user navigate to the homepage that's it now go back to Our Roots at this moment we do not store the user anywhere and this is a problem because we need to pass it as a prop to the protected rout I'm going to import there on our state change Firebase method and call it inside the use effect hook right here on the top level of our app this function is some kind of event Lister that will listen to the user's out State changes it means when a user successfully creates an account or login this function calls a call back that we passed as a second argument inside this callback we have access to the user so we can store it somewhere in this example I'm going to use the US state hook to store our user but it is also possible to do it with react context API or Redux or whatever you want the initial user value will be null inside the on our state change call back set the user if it exists and set null if it logs out for example don't forget to clean up your user effect hoop this cleanup function will call after a component on mounts it's time to try to use protected route we need to import it and then wrap our private page and pass the user prop also I need to import the AL instance here now we are ready to test the protected route the first attempt to open the private page failed and it's okay then we try to log in and open it again but unfortunately it redirects us to the homepage but why the thing is the root three is created once on the orial change so if we try to look at our user inside the protected route it always be null because this is an initial user value in fact this is the reason why we should write some extra logic here actually this problem has many solutions but I suggest adding one more State here and call it isfetching the default is fetching value will be true and only after getting the current user State we will replace it with false while we fetching our app will return the simple loading component here you can use beautiful loading animation instead and now we can try to open the protected route again log to our account and try to open a private page the private page was successfully opened but there is one more concern we should forbid access to the homepage for users who were successfully logged in so let's write some logic inside our homepage the render condition will be similar to the protected route we just pass a user prop to the page and check if the user exists now if so we should navigate him to the private page let's import navigate from react rter Dom and pass a user prop and now it works correctly The Last Action here is to add the ability to sign out it's pretty simple to implement just import the sign out function from the fire Bas house and call it inside a custom Handler I will call it handle sign out and also use only console lock here but you can trigger different actions pass this Handler to the button and now let's check the full flow sign out first and then we are not able to open the private page before login but after login we automatically navigated to the private page works perfect subscribe if you like it

Channel: from Dev To Prod

Views: 2,379

Keywords: authentication javascript, authentication vs authorization, authentication react, authentication react firebase, authentication react router dom v6, authentication react router, firebase authentication react, firebase authentication js, firebase auth react, firebase auth signout, firebase sign in, firebase sign up with email and password, react login firebase, react auth, firebase react tutorial, react authorization, authentication, node js authentication, react js auth

Id: PngrpszT3aY

Length: 13min 41sec (821 seconds)

Published: Tue Nov 21 2023