Building Login/Signup with React & Firebase | Manoj Singh Negi | Recraft Relic

hey guys welcome to recreate channel and i hope you are doing well so today we are going to basically build a login sign up page uh using firebase so we are basically going to just create two forms for login and sign up and then we are going to use firebase for authentication and after the user is authenticated we will redirect them to a dashboard and will perform you know simple private and public routes like if you are logged in then you will not be able to go to the logging on signup page and if you are logged out then you will not be able to access dashboard right so simple stuff uh let's get started before starting i'll say if you like what i do each and every week please go ahead and subscribe to my channel and share it with people you know uh if you find it useful all right so let's get started i already have a simple cra application or sample application and uh let's start by installing a route installing react router and uh you know just uh creating us a simple uh login and sign up so i already have react order installed so i'm just going to import browser router and switch from it so import browser router from react router dome right and i also need switch and [Music] i also need route great now let's um go ahead and convert this into [Music] a routing system so browser router inside that there will be switch so we are using uh react router because it's going to make it very easier for us to redirect user and uh put authentication you know without it you know it will be a lot of custom logic to just hide log you know pages like login or signup and dashboard so i'm just going to use router for that so so i'm going to create my first route which will be login so the path will be slash and the component will be login so we haven't created the login component yet so we don't have to worry about it right now i'm just going to do it the next thing so we have this component folder here and i'm going to create login dot js so let's create a simple law component import react from react right and const login equal to i'm just going to return an h1 for now which say login and then i'm just going to say export default login right now let's go ahead and import it here login and let's reload so you can see on slash login is on slash login is getting loaded now let's create sign up new file signup.js i'm going to just copy paste everything from login to sign up and just rename it sign up and here it will be sign up sign up as well and i'm going to reload if you uh if i go to slash it we're going to uh load the and if i go to sign up it is again loading login what's the reason the reason is that even if we are on the sign up the path still contains slash and that's why you know the log with basically you know uh picking login first and not going to sign up at all so in order to solve that we have to do exact here so we are telling react router that um the login with only load when the exact path path is less and if it's anything else uh it it doesn't have to load log in so now you can see uh we are able to see sign up and if i go to slash we'll be able to see login now let's create dashboard as well so these are like cell components right now we'll obviously uh change them so i'm just building them for better clarity once that is out of the way we can start working on the juicy part so dashboard will import it and uh here we'll just say dashboard right and reload it if i go to slash dashboard not this localhost 3000 slash dash board then it will load the dashboard okay great so we have the routing in place and so now let's create some ui we'll start with login uh i'm using for csi i'm using tailwind and for to make it easy for the demo i'm just using a direct cdn link i'll link this down in the description if you want to have a look but you can always go to the github you know to the main repo and you can always get these things so now in the login because i'm using tailwind i can do a lot of cool stuff so let's do it um [Music] so we'll start by creating the main background div which is this and i'm going to put some so i'm going to make it uh full width so let's give it a class name w uh full so if you guys don't know about taylorman it's a super simple and super helpful css framework and it lets you it basically enables you to do a lot without even writing css so they have a lot of helpful classes that which we can use here all right so for example wfo is going to make the width to full and at screen is going to make the height of this div uh you know as the full screen like uh this screen it's like 100 vh in normal css so we'll go to here now uh i'm just going to um give it some gradient background and if we have to do it in css it's a lot of you know you have to go and do a find the colors and all that stuff it's uh with talents uh is simple so we'll just go bg gradient gradient to r2r is like to write and we say from yellow 200 so 200 and these are basically you know the degree of the color so uh the lower is uh is the number the lighter the color will be so for example 100 will be the lightest and then the 500 and 600 will be the darkest color so from yellow to 100 we are so we are defining the second color we are red 500 to pink 500 right um so let's see how that goes you can see the uh you know gradient so it's that easy with uh you know with tailwind so now let's uh so i'm just going to build uh the form in the middle with a white with the white background like a card so let's uh create the dip for that we'll do the div i am just going to give it the width of the um class name width of 96 which is like the highest width uh entailment and i'm just going to give it bg white and for now i'm just going to give it height as well so you can see the height and all the way right i'm i'm going to center it out so what i'm going to do is i'm going to convert this into a div into flags then i'm just going to justify all the elements to center and then i'm going to say align the enter to the center as well once i do this it's here great looking good now uh i am going to give it a bit shadow so i can just say shadow lg i guess and it's going to give it some shadow right and great so now uh let's create our use or like the fields so the fields that we are looking for are email and password at least for the login so let's do it uh i'm going to create a div and inside that div i will create a label which will hold our label so for example for start it will be email and then i'm going to create my input so actually i have created a login sign up you know ui with tailwind in the last video if you want to uh check it out i will put the link in the description but yeah i mean i already have done it somewhere so i'm just trying to get it done with so i'll just uh you know build it quickly so name email great we have that so now i'm going to give you'll not be able to see the input because by default even don't give any css to the input so now we are going to create the border so border grade 200 um 200 and border width to be two once we do it you can you will be able to see the other thing that we want to do is make this level block so once we do block uh its display will set to block which is uh you know which going to take the full width border two anything else we need i'm just going to make it rounded so once i do it rounded you can see the rounded corners and then w like width to be pull and then pad like then uh let's give because when i click on the inside the input you will be see there is no padding which is not looking good so i'm just going to give it a bit of padding adding two from all and then i'm just going to give it some height as well all right now i'm just going to go to this div and give it some padding firstly margin right so not mg just m margin and you will be able to see okay so this looks good great this email i'm just going to uh increase its bit uh not the bit but the font size so text excel and i'm going to make it bold as well and i'm going to give it some margin from bottom as well so it will look something like this okay so this looks good now i'm just going to copy this and create uh the create the password as well password type password right great and in instead of password i'm just going to like email i'm just going to say password right now we don't need this height because i'm just going to hide it according to the content so i'm just going to remove it will look something like this and now i want to create a button all right and it will look something like this so button and it will say login class name equal to so firstly i'm going to convert so i'm going to um let's save this so now we have the login so the background i'm going to give it same background color as the gradient uh maybe in like a different uh arrangement let's do that i'm just going to copy paste this here and you'll be able to see the gradient i'm going to make the text white right and i'm going to give it padding so px so px is basically padding from left and right px um maybe 5 right or maybe 10 and p y which is like you know uh top and bottom so it's like x axis and y axis so p y to be 2 i'm going to make it rounded as well and going to uh increase it font size as well and make it bold as well and bold great taste looks good to me now um maybe change its gradient from yellow instead make it orange maybe not much of a difference yeah not much of a difference so i'm just experiment with i'm just experimenting with some color here for 12. none of these are looking good yeah so i'm just going to say i'm just going to reverse it so here i'm just going to say two yellow uh 200 and i'm just going to make it from okay great so now we have the login button and i'm also going to include a button which will redirect which will redirect the user to sign up in case they don't have an account so i'm just going to say link not this link link from react router and i'm just going to say don't have an account right and i'm just going to make it spot to slash and import it can i auto import it let's see yeah right so now i'm going to reload this page and if i go here don't have an account click on this cannot read property yeah so it should it shouldn't be path it should be two let's reload the page click on this ah i have to do sign up here great reload click on uh don't have an account and it will redirect great so now let's also create the ui for the login uh not the login but the sign up so let's go here do this paste this so the ui will be similar link is not defined i'm just going to import link from react router dome right sign up and i'm just going to change this now this is fine i'm going to change this to sign up and this to don't have an account already have an account and redirect to slash right and uh the email password is great but i also want to add a username so i'm or a name not a username so i'm just going to do that email right so i'm just going to say name and here i'm just going to say name as well so now we have name email password and sign up button i already have an account click on this it will redirect login click on this and now let's create dashboard as well you know so ah go to login copy this dashboard paste it what i am doing what am i doing just paste the html now uh i don't like i don't need this thing but what i do need is a log out button here so log out and let's go to dashboard dashboard i don't need any of these so i'm just going to remove this but instead i will be needing like a p element to show user name so for now let's just put manuals there you know and we'll do something about it but let's just do it this for now all right and great great great let's put this also inside a devs great all right so now let's go to our login page uh like sign up page let's you know start integrating firebase because we already have like everything in place um now let's just start uh integrating fibers so into to integrate firebase if you don't know already you need to create a app in firebase um you know firebase console so i'm just going to bring this window here now so you'll be able to see you know this is my firebase uh in a project uh you can go ahead and create uh one i'll basically you know put down a link where you can basically see how you can create a firebase account i already have like account an app i already have created an app and in order to integrate it but you know with like any npm project like view js or vxgs we can use the firebase uh package and then this is the confliction that we have to do in our application uh and you know we'll be ready to use firebase it's so nice of uh you know google that they are like they give you this copy paste configuration you just need to copy and paste it in your application and you're good to go so i already have installed firebase you can go ahead and install it yarn add firebase and then you just need to copy this from your configuration so how can you find this configuration when you will be inside your project every overview once you create have created it you can see one app this is the web app and when you click on it you'll be able to see the npm here when you're creating the project choose to create a web app if you're going to use you know the firebase with the app app which is like the motive of this whole video and create the web app and they will let you know how to basically integrate it so and it's simple you know just install firebase copy this and paste this into your app.js i'm just going to do that here and you have to import it from the firebase app initializer and you are pretty much good to go you don't need to do this const app or whatever if you don't want to do you can just do this and yeah firebase is integrated now let's go ahead and integrate it with our sign up all right so first thing i'm going to do is i'm going to create three state variables for saving you know the form information you state there are better way to handle form states you know uh this is just the sake of for the demo you can handle the form state in more better ways like maybe user reduce or something but here this will work so email great set email right and for name we will do password right set password and inside all the use state we'll have i add this side they all will be empty now let's add them let's convert our uncontrolled input to control input and just provide the value value name and then on change i can just say e set name e dot target dot value right and then we have value and on change and i'm just going to put it here change this to email change this to email as well and [Music] do the same thing here password set password all right that sounds good you state is not defined i'm just going to import it and let's create and just go here create our sign up function and for now i'm just going to console all of these value just to see if everything is working fine name email and password go here inspect element click on console right notes click on sign up nothing happens because i haven't uh added the list now so on click equal to sign up on sign up so i think it is holder loaded let's see click on noticing all right so i'm available we are able to see the information so now let's integrate it into the firebase too so to in order to integrate this to the firebase we have to use firebase auth and we need two main functions the first thing is get auth and the second thing is create let me just do this from firebase auth and why this doesn't work is because of this it needs to be import create with email and password so we need these two things one very important thing we have to uh understand let me open my firebase again right is one thing so before uh starting to use authentication what you actually have to do is you have to go and enable the sign up method sign in methods you know so i have enabled email and password uh there are other as well but you have like by default they are disabled and if you try to use the auth and uh this geth function and all that it will not work because it say auth is disabled and all that so right so it's uh you know you have to go in this authentication tab and enable these and just click on this click on enable and that's pretty much it and once you uh be able to do you will be able to see you know the user who have signed up using your api so for now i'm just going to delete all of these i created them while testing so i'm just going to remove these all right so now on sign up what we want to do is we want to extract auth get auth and then what i'm going to do is create user with email and password sample and password i'm going to provide the auth you can see here it uh ask for auth which is this uh you know this uh configuration we get from gethot then email and the password so we have the email and the password but the strange thing is that it it will not ask for uh name because it doesn't take name so in order to save name you have to do something else which i will show you in a second so now i will go and so if it's successful like if the user is created what we are going to do is update profile which is like updating the user profile you know once the user is created we are going to say update user profile we are going to provide the current user so once the user is signed up the auth dot current user will be like updated for that user so we are saying once the user is sign up or uh get the ordered current user and then update the display name as our name you know like whatever we have put it here right and if it got succeeded dot then redirect user to login all right so um we are going to just say history dot push history.push to slash if we catch any error we are just going to con uh like alert it out you know let's just keep it simple so we'll just uh we're just going to say alert e dot message okay and we are going to do the same thing if user uh is not we are not able to create the user as well right so that's good we need history yes we need history and one other thing we need is loading right because once the user will click we'll make this api hit and then we need the loading right so loading set loading [Music] equal to use state and we are going to make it false by default and in when it's loading we are just going to say if it's loading then just say creating user dot dot or i'll say sign up right great all right so now let's and we also have to enable loading as well right so here i'm just going to say set loading to true and finally i'm going to say so finally it's like either there is an error or either there isn't a success uh finally when the promises and like returned just do this whatever i'm just going to put here which is set loading to false and okay so let's uh start doing that um [Music] so let's say manoj singh negi i'm just in the monogamous gmail.com let's keep it like this password is manoj manoj i'm just going to do let's click on sign up creating user and it's redirected to the login is the user is created or not let's see i'm going to reload this firebase console and you can see the user right justin gmail.com created night now or user id whatever right so now let's so sign up out of the way now let's try to create login all right so we're going to do this the same thing at least these three things are same let me explain you a bit what actually happened here so basically when we click on sign up we set the loading to true to like show the loading we get the odd we call the create user with email and password method of firebase and provided the auth and email and password it created the user once the user is created it updated the or the current user and using that we have updated the display name of the user with whatever the name we have provided in the form once that is succeeded we you know just redirect our user to the login page basically right here history.push and yeah if there is another it without it handling errors is like a different topic which i'm not going to cover so you can just you know for now i'm just alerting them but yeah there are much more better ways to handle them so now i'm just going to go here and do this and i'm just going to copy paste a lot of things so [Music] here is email i'm just going to go paste the same thing here and instead of set email this will be set password and this will be password as well right and you state should be right and if things are logging loading then say [Music] logging u n dot dot and i'll say login let's reload this and yeah now let's create a login function so const on login equal to a function right and for logging in what we need is we need same you know we need same get out get auth and we need get auth and the other thing that we need is sign let's import i don't know why i just keep doing him like messing importer but so firebase slash auth and i need sign sign in with email and password right so now we'll just go here const path equal to get path right and uh then i'm just going to say sign up with sign in with email and password i'm going to pass all what the email the password great now dot then and catch catch is simple just get the error and alert it out e dot message and uh if there is success so couple of things we want to do firstly we want to save the token in the local storage the reason we want to save it because once the users are authenticated we know some way or to uh basically you know uh some way to find that if user is logged in and if they are logged in you know uh don't let them access login or sign up pages so what i'm going to do is i'm going to save the token into local storage so localstorage.set item and what this you know method will return will be user credential user credentials and this user uh like user credential and then i'm just going to save it as token token user credential dot token response dot uh id token basically all right so i'm just going to save it and just i'm going to say history history.push and history.push and push it to dashboard and that's pretty much it i'm going to extract history the reason i have history because they are all route so i'm able to see the history set loading will be called here making it true and then in the finally you know making it false great uh it looks good to me um [Music] yeah let's let's see let's also define the listener on click on login right token is not defined says so now let's go to our application and you can see in the location we don't have anything now this is the user that i uh basically signed up with now let's try to login using this so log in and it redirect you to uh this page and you can see that open right so now we are able to also the login the user and you know uh basically redirect them to a dashboard but there is couple of problem the first thing is this is a dummy name so we need the name which we provide to the user the other thing is you know if i go to login page it will let me uh go to the login page which is not idle because we are not the login but like uh it will not let uh like you know it will not redirect me to dashboard i'm already logging but it will not uh redirecting it me to the dashboard so in order to do that what i'm going to do is simple i'm going to say use effect so on all the compo like mounting whenever there is a mounting i'm just going to say only for the first time i'm going to extract the token local storage dot get item which is token so by default this will be null right so what i'm going to say is if token so if token is present then history.push the user to slash dashboard and that's pretty much it you know so if there is token if i reload this page now it will redirect me to the dashboard so if i go here remove this try to go through it will always redirect me to the dashboard but there is another problem which is if i go to sign a page it will still let me see the signup page and i'm just going to copy this and paste the same thing here so one thing to note is because we are like we don't have to copy paste it we can create it as a custom hook and then use it here but yeah i mean i'm just doing it for the sake of the video so sign up and yeah so it will always redirect until and unless the token is removed which we will do in on the logout so now we'll go to the dashboard page so our login and sign up is working now so we'll go to the dashboard page and we are going to say um yeah const logout history dot push slash right and that's it for the log out right you just have to push the user to the history uh like to the login page but after removing the token so local storage dot remove item token and once removed you can push it to the slash and it will work as fine right so slash we'll just say on click log out and let's reload this now once i click log out you can see the token getting removed and now i'm in the login and even uh if i reload the page it still will stay in the login because i'm logged out but there is one other problem and that is that that is the opposite of what we are facing with dashboard so if i go to the dashboard now it will let me see the dashboard which is not correct right because i'm not logged in it should not be it should not let me see the dashboard so for that what we are going to do is we are going to copy this and reverse the condition so copy this dashboard go here paste it and just say not and login so now we are seeing if we are loading the dashboard and there is no uh there is the uh the token is null then it to the login because the user is logged out so i'm just going to import use effect auto import it and reload now you can see i'm not able to go to the dashboard so slash dashboard yeah it's not uh you know it's loading for the first time but yeah then it's not really letting me see anything still uh we have one problem that this thing it's not um you know it's not dynamic so what we're going to do for that is we have so there are a couple of things in we can actually access user by doing something like this so what we have to do is we just have to say const auth equal to get auth firebase authrite and just say const user const user equal to current not current but like r dot current user so this will give me like the current user and then i'm just going to i can just say if user because sometimes null user dot display name you know i just want to show the display name okay so let's go here below the page and let's try to login and you can see now so dynamically we are able to load the name right so now let's create another user and we're just going to say like robin hood robin heard at gmail uh let's not do a gmail but your mail and password to be robin good click on sign up right and and just say robinhood at yopomail.com and just say robin login so it's the wrong password uh i don't know what was the password okay i forgot what i put there all right let's create let me create a new uh account open up to the app mail i'm just going to keep a simple password right now click it robin you mail and password click on login and you can see robin up but there is still one problem which isn't like this if i reload this page then you'll not be able to see the name the reason being whenever you reload uh the instance of the firebase also go get reloaded and then it doesn't have the you know the current user so in order to do that what we have to do is we have to fetch that user which is signed up like which is logged in right now it's still logging in the browser so we what we can do in order to do that we have to create uh basically a login state listener with what fireworks call it um so what we are going to do simply is what we have to do we have to on use effect called on auth state changed you have to provide the auth so we have to like get the auth as well so const article to get auth right auth and then you have to provide the callback right which is going to do whatever uh you know you want to do with the user but for now let's uh just say it you know let's set the user you know we don't need anything else just set it we're not going to use it it just uh you know we have to provide a callback so i'm just going to do this so const user set user equal to use state so get auth is not defined so we uh basically what happens right now is uh whenever you know we load the whenever we load the page for the first time it's going to basically you know add this listener and it's basically going to make that ipa hit to get the current logged in user and you now you can see the robinhood here even if i reload the page it's going to take some time to load the user but then you'll be able to access it from anywhere using uh this you know or that current user i think the ideal way to do is like maybe set up a reducer and update the reducer according to this but yeah for now i'm just going to use the ordered current user and now because it works like this on logout redirecting is is not the answer because the user is all still logged in in the browser in the cookie you know but firebase already have like saved uh or you know internally firebase the robinhood is still uh logged in even if i just remove the token and uh like just push it so in order to completely um fix this firebase provide a sign out method so you can just say sign out right and it takes the auth that dot then and inside the dot then i'm going to do uh whatever we were doing like removing the token instru.push and inside the catch i'm just going to say alert e dot message all right and here and i'm just going to reload the page so you can see the robin hood if i click on logout then uh yeah let let me uh design uh experiment for you guys so if i go to login.js i can or in the app.js maybe in the login let's do in the login.js so now whenever the login.js is loading i can just get the auth right and just get its current user and console them so if i reload it now it it will show null now if i log in right it will show this uh user right and if i log out again then it will show null again because you know the user is obviously logged out right so so basically what we have built you know we have built a login form and uh firebase uh basically allows you to let the user login using this method called sign in with email and password there is a sign up for signup you can do create user with email and password and if you want to update any other information you can use update profile method to you know update the name and other stuff as well like profile picture as well right and then we also have built this dashboard uh thing you know where we basically use the current user to show the display name also use the logout button to you know destroy the current session using the sign out method provided by firebase and yeah that's pretty much it guys uh and for the errors we are doing alert but yeah you know you can maybe show some better error messages like toast and something but yeah from today's video this is pretty much it i hope i really hope that you like this video please let me know what kind of videos do you want me to do i am you know i'm going to do the live stream not on saturdays now on sundays uh from now on but yeah right if you really like this video please share it with other people as well uh you know who will find it useful and uh until sunday you know have fun

Channel: Recraft Relic

Views: 242

Rating: 5 out of 5

Keywords:

Id: VQrRG-DH2ow

Length: 53min 15sec (3195 seconds)

Published: Sun Sep 05 2021