React & Firebase Login Authentication

okay guys today we're gonna be making a login system using reactpod frontend and firebase for the back end and this is gonna be our project right here so once we load the page this input is gonna be focused and we're gonna have both the sign up and sign in so this is sign up right now but if we click here this is gonna switch to sign in and if we try to sign up here let's say hello at gmail or actually just say hello here we're gonna have an error message showing here then let's do gmail.com and maybe let's not add a password so the password must be six characters long or more and then once we type the password where we can sign up and we're gonna be welcome to the home page where we only have a nav and a log out button and if we log out that goes back here and then since we have an account now we can click on login and then we're gonna do hello at gmail.com and i'm gonna do the password and if you click sign in now it's gonna sign into that page as well so a few things we're gonna be needing i currently have my react project open so i just cleaned up everything there is nothing that i added so we want to install a firebase first so we're going to npmi firebase and while that's installing i wanna do a few things uh let's go to pawns.google.com and we're gonna get a font here which is this one and we're gonna get few values so we're going to get 300 or 6 not it not italic semiball 6 volt 700 uh this is also completely optional this is just a font we're gonna be adding so we're gonna paste it right here and then the next thing here is this line so before that uh i have this code pen i made for you guys so these are all the styles for the app because i'm not going to be going over the styles and i'll leave the link in the description so you just want to click anywhere control a is going to select everything control c to copy it we're going to go to app we're going to remove everything from our app and we're just going to paste that thing we copied here and it already has added a font and everything so these are all the styles we're going to use and i'm going to close the code pan and this so the next step we want to go to firebase.google.com you're going to need to log in or sign up and once you're logged in you're going to click go to console add project and let's call this login click continue we don't need the google analytics so we're going to disable that and click create project and while that's creating a project we can open our terminal here and start our project so npm start i already have one project open so it's gonna ask me for another port but you guys are not going to be able to see this so i'll just open it here and i can close this one right here and we can click continue here and then if we click web and we're going to give it the same name we have which is login and we can click register app so that shouldn't take much and then this is the code we're gonna get so what we wanna do with this code first we wanna add it in a file that we're gonna create so if we go back here we inside the source we're going to create a new file called fire.js and the things we want to copy is everything inside the script so just this part and we want to paste that here and i'm also going to remove these two comments initialize firebase and your web apps configuration then on top of that so line one we want to import firebase from firebase and then here we want to set that this equal to a const so this is going to be const fire equals so firebase dot initialize app and config and then we want to export this file by doing export default file and we can click continue to console here so we're not going to be changing anything in this file anymore and then here we can add authentication so if we click here we're gonna need to click on setup sign in [Music] and then here you wanna pick email and password and you wanna enable the first option click save and then if we go back there's nothing else yet so we're gonna go back to our project we can close the fire.js because we're not gonna be adding anything there so we're gonna have few components and i'm going to keep all my states inside the app so if we go to app let's start adding states that we'll need so we want to import your state and use effect from react these are two hooks we're going to be using let's see why is not defined up here so first state we're gonna have here is gonna be for the user so we're gonna do const user set user and we're gonna set that to an empty string then we're gonna have two states for uh our two inputs one is going to be for email so once email set email equals to use state empty string as well and the other input would be our password so we're going to make a state for that one's password set password equals to use state and we also want to set that to an empty string and then we're going to have two states to display the errors because since we have two inputs and if we have a error that's related to let's say our email we want to display it under that input otherwise if we have an error that's really related to password we want to display it under the password input so we're going to make another state called uh email error and set email error and we're also going to set that to an empty string and we're going to make a state for the password error so password error set password error here equals to use state set that to an empty string as well and another state that we're gonna have is gonna help us switch from signing to sign up which you'll see soon so we're gonna call this has account and set has accounts and we're gonna set that initially to false and these are all the states we're gonna be needing so the first function we can make is going to be for login so let's call it handle login to make it an arrow function and we need to import fire so this file we created fire.js because we're gonna target that all the time so let's do import fire from dot slash fire and then inside our handle login we wanna call that so fire we're gonna do dot ops dot sign in with email and password so these are uh camel case so be careful how you write these so sign in with email and password and we want to pass email and password that we made and then under that we want to catch errors so there and inside of that we're gonna have a switch statement and all documentation you can find on firebase all order all the other quotes they have so we're gonna add switch error.code and inside of this the first case we're gonna have so we're gonna have a case here that's gonna be ops slash invalid dash email then we're gonna have another case so let's add case here and this is going to be alt as well slash user disabled and we're gonna have case here hot slash user not found and if we get any of these errors we want to set our email error state we make success email error and we want to tell you to error dot message like that then we wanna do a break here and then we're gonna have few more cases so it's gonna be case alt slash wrong dash password and here we wanna set our password error instead of email address now do the same thing which is gonna be error dot message and we're gonna add a break here and that's gonna be our handle login function then we're gonna make a similar function that's going to be handle sign up so handle sign up it's going to be equal to an arrow function and we can copy this whole thing because they're pretty similar here it's going to be fire.alt and then instead of sign in with email and password it's going to be create user with email and password and we're passing the same thing and then few things here that we'll need to uh to change because our case is gonna be different so we're gonna remove the last case and our first case is gonna be old slash and then we can add something else here and that's gonna be email dash already dash in dash use and then the second case is gonna be invalid dash email and we're all again setting email error to that message and here instead of wrong password it's gonna be weak passwords and we're gonna do the same thing then we're gonna have a function for log out so we're gonna call it handle log out and this function is gonna be pretty small it's only gonna have a single line so we're gonna do fire dot ods dot sign out and that's all there is to a logout function and then we're gonna need a listener that's gonna check if user exists and once we sign up and log in so we're gonna call that alt listener here and inside of that we want to call fire dot alt dot on alt state changed gonna pass user here [Music] and then inside of that we wanna check if there is a user so if user we made a state which is set user here so if there is a user we wanna set user to that user requesting and then we're gonna have else and we're also gonna set user but we're just gonna set it to an empty string if there is no user and then if you remember we got use effect at beginning and we still didn't use it so we're gonna use it right here so we're gonna do use effect that's an arrow function and we're going to leave the empty array here and what we want to do inside of this is just called this function we just made which is going to listen to for those events and then that's all all there is we still need to fix few issues with states so for example i'm gonna make two more functions here at the top so one is gonna be to clear the inputs just so we make it our code cleaner since i'm holding everything in that and we're gonna set our email which is our state for our input to an empty string and set password also to an empty string and we're gonna make another function here that's gonna clear our error clear headers and here we wanna set email error to an empty string and set password error to an empty string so these things both of these functions are just going to either clear the input we have or clear the errors so let's scroll down let's see where we need to add them so inside the handle login before the fire we want to call that function which is clear errors and then for our sign up we want to call the same function so before the file we want to clear errors and then lastly we want to clear the inputs so this function right here so we want to do that every time we have a user so every time we log in or sign up it means that we already have a user and that's where we want to clear the input and set the user here and then we're going to need to create few components so we can add these so i'm going to make the component called login dot js and we're going to create another component called hero.js so let's go to our logging component and we're going to import react from the act and then we're going to const login and here we want to return something so we're going to return a section login and then let's do export defaults log here and then i want to import this login component inside my app so if we scroll all the way here we're gonna import login from dot slash login and right now we're just gonna be displaying that single component that we have inside our app so we can remove the h1 and we're just gonna display that login component right and this is all we have because we already added the style set beginning so inside the login function before we start adding anything we will need to pass props to the things we'll have here so few props will need is going to be our states so the state for email first so we're going to pass email as email and then we want to pass set email to update our state set email we want to do the same thing for our password so password equals password and set password equals to set password and we also want to uh pass functions like handle login because we're all the buttons and everything is going to be inside the login component so this would be going to be handle login we're going to need handle sign up that's another function we made so once we sign up we're gonna have has account that's gonna help us check what what we wanna display the button with sign in or sign up another way around we're gonna have seth has accounts so we can actually toggle the state so seth has account and we also want to pass the email address state we made so email address equals the email error and we want to do the same thing for password address here password so these are all the states we're going to get inside our login so if we go here we need to destructure those states that we we need to get so let's go to our login and the first thing we want to do let's just pass props here and then we're going to destructure it here so we're going to do const and we can just copy these so we can copy the email paste it in so all of these values is what we need to copy so just do that real fast make sure you get everything that we passed here because these are all the functions we're gonna call and the states we're gonna show on the page so make sure you get everything right here just separate them with a comma and this is the last one and it's not letting me format so i'll make it full screen here for a second and this is going to be equal to props and then we can format so it looks a bit nicer we have some space so now these are all the props we can use and also give me a second we're not going to remove anything we're just going to add parentheses here because it has weird formulae so the first thing inside of this we want to add is going to be the login container so that's going to be our name then inside of there we're going to have a label that's going to say username we don't need html4 just need a label with username then under the label we're going to have inputs which is going to be type text and we're going to add autofocus so it focuses when the page loads we're going to add required and here we want to add these values so we made two states for uh for our inputs if we go back here one of them is email and second one is password so for the value we want to add email then we're gonna have one change event here we're gonna pass an event we're gonna do set email to that event.target.value like that and then under that input we're going to display a paragraph with a class name of error message and we already passed the state here which is email error so we can display that here then we're gonna have another label that's gonna be password if i save this file you should be able to see a few things already happening on the page so we're going to have a label that's password and then here we want to add an input and type is going to be password we're also going to add required and instead of value email like we have here we'll have another state which is password and then we also need on change event here again i'm going to pass the events to update our state which is set password and we're going to set it to event.target.value and then under that we also want to display another error message we made so we're gonna do p dot error message to give it that class and instead of email error we want to display the password out here so you're not going to be able to see them right now but if we change this email address to let's say one you can see it right here so that's only going to show once we have admins and then under that trigger we're going to make a div with the class of button container so vpn container and inside of that this is why we made the state which is has account so this state right here so we're gonna check if hence account is true and then here we're gonna do else and we're gonna do something else inside so what we do we want to do if he has a count is true uh first thing we need we're going to add a react fragment because we're going to have two things and i don't want to add a tip so we're gonna have a button and we're also gonna have a paragraph here and we can just copy both of these here as well so button and copy everything with react fragments so this button is just gonna say sign in and this paragraph here is gonna be don't have an account and then we're gonna add a span here which is just gonna say sign up and then this button is gonna be sign up here and paragraph is going to be have an account set some space and then spam inside of that they're just gonna say sign in so since this state we have is false at beginning is gonna show this here as you can see on me so the button that we have that says sign so that's showing there and then we're going to add a click event so if we click the button that says sign up what do we want to do or sign in rather so this button is sign in so we have two functions one for sign in or login and one for sign up so on the first button when we sign in we want to call the function which is handle sign in or handle login sorry and then we have handle sign up which we're gonna call when we hit this button which is sign up so we're gonna hold handle sign up and then the only thing we need to do is toggle the state which is set has account because that state is always false and it's always going to show only one button but we want to toggle it once we click the span so if it's false we want to toggle it back to true if it's true we want to toggle it back to false we're going to add on click on our span and we're going to call set has account and we're going to set it to opposite or just toggle it and we're going to do the same here on this path so on click as an error function we're going to call set has account and we want to toggle it and then it added something weird which we're remove in a second so what this is gonna do if we click sign in here it's gonna switch to sign up if we click sign up it's gonna switch to sign in so that's the only thing this function does it just toggles the state to to do that and also switch the buttons from signing to sign as you see here the inputs are always gonna remain the same and then we can also make our hero component here we're not gonna have much here just some stuff that you guys can see once you log in how it looks like once here and we already added the styles for everything so you guys won't need to add anything else we'll have a section of here we're gonna have a nail and inside the map we're gonna have h2 that says welcome and we're gonna have a button that says log out and then we can export default hero and let's import that hero here since line three we can import hero from here we're still not gonna display it yet actually let's just add it here because we're gonna need to send a prop since inside our hero we have a button that's gonna be for us to log out and we already made a function which is called handle logout so we're gonna need to pass that to a hero so we can use it on the button here so let's just add hero for now and we're gonna pass that function which is handle logout okay i'm the logout and then inside the hero we want to get that value here or destructure it and on our button we want to add all click events and we want to call the function of handle logout so right now you can see both sections hero and a login so what we're going to do as if you remember we are checking for the user here so only if user exists we're setting the actual user so we can check for the same thing here instead of rendering both components so before the login we can do user is true so if user exists what do we want to do here so we can render one component if user exists and we can render another one if the user doesn't exist so if user exists we should be on the home page so we can render this component which is called hero but that's our home page and then we want to add else here so if user doesn't exist we don't want him to go to home page we should be on this page which is login so again if user exists render the component hero which we just made otherwise render the login component which is this one and user is only going to exist if you either sign up or log in so right now we can test if this works so for example we're on the sign up page and if you write something click sign up we can see the error message and let's do the test at gmail.com and then let's type password password should be at least six characters so let's do one two three four five six click sign up and there we go we're on the home page and if we go to this to the firebase and we will reload the page here we're going to be able to see that that's the gmail.com and then if we click log out everything's cleared now we have an account so now we can go to sign in add an account here and one two three four five six is my password click sign in and we're back again so that would be it for this tutorial guys i'll make sure to leave all the links in the description for styles firebase and everything else you guys need i hope you learned something new thank you so much for watching and i'll catch you guys in the next one peace out

Channel: h3webdevtuts

Views: 91,636

Keywords: react, reactjs, app, hooks, beginner, project, simple, tutorial, useState, html, html5, css, css3, basic, frontend, beginners, webdev, reactapp, functions, functional components, components, web development, react hooks, react project, react tutorial, fire, firebase, auth, authentication, firebase auth, firebase authentication, react auth, react authentication, login, firebase login, react login, login auth, login authentication, useEffect, form, signup, signin, logout

Id: cFgoSrOui2M

Length: 28min 38sec (1718 seconds)

Published: Fri Aug 07 2020