How to build Authentication/Login/Signup with ReactJS, Redux and Firebase (Instagram Clone)

this video we are going to create a user authentication system in our react Instagram clone that we'll build in the last video that I uploaded on my channel it was a really nice tutorial we created an Instagram clone using a react.js and if you want to learn about it you can just go to the latest video on my Channel or you can click the card that it will show in the video right now you can just follow that video that will show you how to create step-by-step Instagram clone and on this video today we are going to create the authentication system like we will create the login sign up components we will create a page where the users are going to log in and we are also going to use redox which is a state management system that we can create to save the user in the state globally and also we will learn about the use effect and use State hooks on react and also we'll learn about Firebase because we'll use Firebase to create the users which is a system that is a system that is created by Google and you can use it to to save data to create users and do anything you want it's going to be a little long tutorial because us will code it step by step but it's going to be very funny and you'll learn a lot so let's get started in this video right now so the first thing you have to do is just to go to the GitHub if you haven't the code of the Instagram clone that you created last time you can just go to my GitHub in this repository you can find the link in the description and you can clone you can clone this code so let's go ahead and clone this in our computer so click on code and copy click on copy the link and then what you have to do is to open a terminal or a command line if you are on windows so here on Terminal you just have to move where you want so I'll move inside the desktop because I want to save it here and also will clone the project so git clone and paste the link and it will clone the project and now CD inside this project with CD react Instagram Dash instagram Dash clone and now we are inside this project and to open vs code I'll use again vs code you can just type code and Dot code Dot and this will open the project on the vs code and here you can directly code it so I'll make it a little more large but if you haven't that command you can just click on file and open folder and you can open the folder from the desktop so here we have the uh the project that we have here that we created last time and now we can just install the requirements and start the server so just open new terminal click on Terminal and new terminal here and just type this command yarn so just type yarn and this will install the requirements for this project and if you have if you don't have yarn or node.js or npm in your uh in your terminal you can just go to Google and search for node.js and you have to download it so after you have all the requirements installed you can just type yarn start and this will start the project in the browser here we have of the project that we created last time is just a simple Instagram clone we have the website here and the the nav bar the post and some suggestions so in this video today we are going to create the login and sign up components and it will also create users and connect that with Firebase so let's get started with the video I will put the vs code here on the side okay so I have the project and vs code on the same time now let's get started with the coding so the first thing you have to do is just to go to Firebase and log in and create a new account so just open a Firebase go to Google and search for Firebase on Google and you have to create a new account you can use just your Google account to do that and it's very easy and after you have created your account just click go to console and if you go to console you just have to create a new project so click on ADD project and you can type the name of the project I'm just I will just type Instagram Dash clone and click on continue then you can just turn off Google analytics because we don't need it and create project this will create a Firebase project and it will use Firebase to create users in our uh system so go to vs code while the Firebase is creating and here on the main in Source just click right click and create new file and name this file firebase.js now inside this file we'll put some credentials that we'll get from a Firebase so go to Firebase and click on continue and now what you have to do is to go to Project settings click on this icon project settings then scroll down and here you have to click this icon here the web icon because we want to create a new project for web development so click on that and this will create ask you for app name I'll type again Instagram Dash clone click on register app and here you have to install it shows you that you have to install Firebase so go to uh the vs code and here I'll create a new terminal by clicking the plus button and here I have two terminals one is for the server and one where I can install the requirements so now to install Firebase is type yarn uh install or yarn add I'm sorry and then Firebase press enter and this will install Firebase in your project then here is the credentials that we need so click on copy and then go to Firebase and save them paste them here and save the file here I have the requirements and I can delete these comments because I don't need them so delete all these comments here I have the file of the Firebase then click on continue to console and we created the project here and here I have everything I need so now what you have to do is to create the auth here on inside the Firebase file so uh but before doing that just go to we have to enable authentication so go to project overview and here we'll see authentication click on authentication and click on get started then this will turn on authentication in our Firebase project and we need email and password provider because we are creating the users by email and password so click on your mail and password click enable and Save and this will save a net turn on this provider and then go to vs code and we'll import here of so click on a type import auth inside garlic brackets because uh we need to import auth from a Firebase so type Firebase slash auth now we got auth here and we'll create another variable here but we want to export it too because we'll use it inside all the our other files so just type export const auth equal to get off and actually this I I made it the the wrong import because here on top you have to type get off not off so get off and this is the import that you have to do and we get the auth and we save it in a variable and we are exporting it so this is all we have to do with the the Firebase file so you can close it now because we don't need it anymore and now what you have to do is to create some components so let's create the login uh page or the login and sign up component so let's get started with this in the source file just right click and create new folder for authentication so just type Authentication and inside this folder just create a new file and I'll call it login now actually it's Authentication .js and another file new file Authentication dot CSS and inside the authentication.js you can just type rfce which is a shortcut that I'll show you in the last video and just press enter and this will create the component for you but if this is not working what you have to do is to go to extensions and install es7 or react just install react and this will help you help you it's as7 plus react and just install this extension it will help you to create the with rfce command so now we have this uh file and let's import the CSS file import dot slash Authentication dot CSS here we have it and inside this div I'll create a class name and call it Authentication okay so we have the authentication file and inside this file we'll put login and sign up components that will show every time the user authenticates so before doing that we'll create the the two other components which is the login component and the the sign up component so right click on the authentication folder quick new file and login.js and also new file login dot CSS and also you create two other files sign up.js and sign up the CSS okay so we have these files we'll create the RFC commands and import the CSS login.css and also put a class name again and here in all in sign up dot jsrfce again and import the CSS and also put a class name for this too okay so we have these two components and we'll import both of them in the authentication file but first uh I will I will return or I'll show this authentication component in the app so if I go to right now if I go to in my project here instead of this we'll show the login and sign up first but and if you go to instagram.com and below here we are logged out and this will we will create first this is the our authentication component that we created and here we are going to have an image this is going to be an image and here on the right side we'll create the sign up and login and every time we click don't have an account or you have an account and we'll show different components in this part of the page so let's go to authentication and create the authentication page so we are going to have first let's uh now first let's show the authentication in the app so go to app.js and instead of this I will comment it so comment this and instead of home page let's show authentication so if you just type authentication here and here it is authentication and you click on it it will automatically import it on top but if it doesn't you can just type this yourself so import from authentication slash authentication and here close this component and if we save it and go to our project it will show you this page just authentication so let's go ahead and create this page so we are going to have two parts as I said before as in Instagram we have the left part and the right part so let's go to authentication and create these so inside this just type Dot and of double underscore left enter and this will create a div and also another div of right so inside the first off left what you have to do here it will put an image this this is the image and I will just grab and I'll just put an image here and inside this Source I'll type a link of the image that I have here and it's exact the the image but you can just type it too so https slash slash I Dot imgur.com slash P three V M1 KQ dot PNG so this is a link for this image so just save it and if you go here on the react project it will show you this big image here but it will fix it in a second so uh let's go back and here on the right side we'll have the login or sign up component for showing a login or signed up will create also a more uh it's a more part where it will show you don't have account or you don't or you have one so this is the more part that it will create and to create this just type dot uh off more enter and this will here we'll put if you have an account or if you don't have so for now I'll just type inside the span I'll just type don't have an account and it will create a button and in this button we'll type sign up so if you don't have an account we'll type sign up and then uh otherwise it'll it will show you how have an account and then you can log in but it will do that later so for now if you go here on the project it will show you here below but we'll fix it later so uh here inside this part right before the auth more we'll put one of a components so for now let's just put login component it will automatically import on top so import login from login and save it so it will show nothing or just it should log in here but it will type the login component now so uh before doing that let's go to authentication.css because we'll put some style to make it look good so uh go here and it will go to authenticate.authentication.authentication class and for this class we'll put display Flags because when we want to use a Flags box to make it look uh to to make it to separate it in two parts so Flex direction is going to be a row and also we want align items Center and the margin let's add some margin too margin is going to be 0px 50px zero PX4 right and 50px okay so now if you go to uh our page it will show you two parts so the the left part is here and the other part is here and the right so we'll also put the percentage for each of them so let's go to a Dot off dot off left that auth left is going to have a flex and the flex shows how how many percent you want that page to show so 0.5 means 50 percent and also text align will make it Center because we want to be the image on Center and also we want to grab the auth right right and also we want Flex to be 50 so other 50 is going to be for right so I won't basically want to separate the page in two parts so save it and here we have 50 for that and fifty percent for others but the image is too big but we'll fix it right now so dot auth image left and want to get the image and we'll put a width about uh 400. so for 100 PX and it's good as you can see it's not looking better and uh also we want margin top margin top 40px here it looks a lot better so now uh in off more dot off more which is the part that shows don't have an account we'll put a border because Instagram has a border if you can see here it's a border and border is going to be one PX 1px solid Gray and if you save it here she will show the border and else we need padding because it's too stretched so padding 20px now good and also we want margin right margin right is going to be 13px margin left to 30px so let's just copy this left and also want to text align Center so I want to Center the text okay this looks a lot better now and what else we have is off Marsh span which is this if you go to authentication the JS here is the span which is the text so we put this on span and we have done have an account and let's go back Dot off more want to get the span tag and and the span tag is going to have a font weight so we want to make it a little Bolder so we put font weight is 500. is Boulder now and we will also want the font size the font size is 14px so it's good it just looks like Instagram now so now we want to get this button to sign up button and we want to remove that background and stuff so just type uh off more dot othmore we want to go to span and inside span we have the button so get the button from here and in this class we'll put background zero we don't have the background and it shows nothing now but we'll put the border the color let's make the color the color is going to be is it's kind of it's like blue but we'll show you the the hexadecimal code so it's zero zero nine five and F6 this is the blue and also we want font way to be bolder font weight Boulder and we want border zero because it doesn't have any border border zero and look it looks a lot better and also what we overheard it it shows is not showing the pointer Mouse so we want to do that so just copy this class paste it below and the column hover this will create the hover effect and cursor is going to be pointer so now when we over it it shows pointer it looks just like a button a normal button so now we finished with the auth and authentication so we just have to create the login and sign up which it will show here so let's go back to login.js so login.js on here in this file we'll put some inputs and also an icon which is the Instagram icon this here so first let's inside this we'll put an image which is the icon and to get this uh Instagram icon you can just find this icon in the sidebar component so if you go to navigation to sitenav.js this logo here here on image you can just copy this link copy this link and close it because we don't need any more and paste it and paste it inside source so save it and if you go here it will show very very big but we'll fix it so now we have the image and we need two inputs now so input one is going to be for uh email and also it will put a placeholder placeholder it will be email and we want another input and now it's going to be for password and placeholder is password okay we have two inputs and the image and another thing is the login button so below them just type button and log in okay so we have all what we need and we'll also use to save the the data of the input we'll use the react hooks like a use state but we'll explain it later after we design this component so let's go to uh to the login.css and here we'll put some code for our design so uh here on logins type Dot Login class and we want to have display Flex we'll use Flags box 2. and it Flex direction is column and also if you save it here it will show you on a column and now another thing is border where we want to add symbol or first let's make this image a little smaller so Dot Login image and put a width 200 PX and now it looks a lot smaller so you can easily see too so also we want to um put margin Auto margin left and right is going to be Auto so left Auto and also margin right is Auto and what this is going to do these two commands will make it to put on Center because we want Auto in the left and Auto in the right so it will put the image on the center and now also let's add some on bottom so margin bottom will make it 40px okay so we have it for DPX and it looks good now so here on a Dot Login let's add some border so border is going to be 1px solid Gray we added the border and add some padding padding 50px 50px not 5 50 PX good and now margin left and right is going to be 30 so margin margin left 30px and margin right 30px okay now it looks almost exactly like Instagram so now uh let's uh fix the inputs so that login Dot Login we want to get the input tag and inside this tag we want to put the background color to be it's an hexadecimal code so make it it's about six fifths so FF f f 24. yes this is It's a transparent color so it's good it's background and now it's it's not showing the ground because it has put some data so let's remove these datas and it will show you that background so let's also put a border a border is going to be one PX solid Gray solid Gray and Border radius or the radio radius radius is 3px we have border radius and we save it it will change and now just put padding padding will make the huge change here yes it did it and now we want to add margin bottom because we have them stick to each other so put margin bottom 220 20px 20px okay it looks a lot better now and color the text color if you type here it'll show black and it'll show nothing so we want it to be color White so we White now if we type it's good okay so now we'll fix something so if you go to Instagram and when you click on the input it's not showing that blue Focus border so if you show here every time you click it show this blue border as you can see but we will remove this so to remove the Border when we're that when the component is is in Focus we just can type a login input and column Focus column Focus and here we'll type outline outline and we can put anything you want so for now we'll put 1px 1px solid Gray because this is how it is Instagram so and now if as you can see it's not showing that blue but it shows on light gray so it's looking a lot better okay so we remove the focus and now let's fix the button so the last thing is the button and the button is going to have the login button the button is going to have some padding 12px now it's good and Border radius where the radius is 8 PX and also we want the Border zero we don't want border border zero most border radius here okay it feels better and color is going to be white White now it's disappeared the text but will fix it so background color is a blue but we'll show you the hexadecimal code so it's zero zero nine five F6 if we save it it looks good and something else we can do is can add some font weight to look a lot better so font weight is bolder and here we have it it looks good but when we over the mouse again it's not showing the cursor pointer so let's do that too copy this class and type colon hover and cursor is going to be pointer save it now it's pointing and it looks really really good two parts are stick to each other so we can fix this by going to authentication.css and here on more in the more part of more we can add margin on top so margin top we can add like about 10 PX yes this is good or maybe 15. okay it looks a lot better so as you can see it looks almost like Instagram and and it looks really really good so yep if you go to Instagram is here is the change so let's now we created a login we've created the style for login and it looks good so now we'll create for sign up so we can close the login as CSS and here is for sign up and here on sign up page let's put some uh Parts first but to show the sign up we'll go to authentication.js and instead of login we can replace it with sign up and press enter make sure to press enter to Auto Import or you can type it import on top so save it and here is sign up it's empty so go to signup.js and here we'll run the code for signing out so sign up is going to be almost same as login so we can just go ahead and copy this part here from image to the inputs so copy and go to sign up.js paste it here save it will show really really big but we'll also need something else here on the sign up and what we need here is username So Below email you can type an input for username so type is text and placeholder is username so we have three of them and here replace it with sign up okay and also no everything looks good so also the CSS file is going to be the same so go to login.css copy all of this go to signup.css and paste it and here instead of login you can just double click on the login and then just type just press command D and this will multi-select so command D command D command D again until we finish so we have all of these selected and then we can edit them so just type DOT sign up then just save it and this will fix it as you can see we have the email field the username field and password field and the sign up button here so we will created the sign up component 2 and looks really really good now what we'll do now is to uh to fix something like when you sign when you click on sign up it will show the sign up page when you click on login it will show the login page so to do this we'll use use of use state so we'll use a use state to save a temporary variable that will show us which of them is active so go to authentication.js and here we'll have to import use state so here on top in curly brackets yeah curly brackets just type use state and now it's imported and below here on below the function this type const and in square brackets just type active so we'll create active variable active and set active this will go is going to be equal to use State and inside the state we want to save which of them is active so here we'll have two options so it is going to be signed up or login so as default I will leave login so the first time it shows it'll show login page so here is going to be a login and now when we click here on the auth more every time we want to click we'll change the the use state so to do that we'll first check which of them is active so for now type curly brackets and we'll do an if statement and in an if statement on jsx or in the es7 is like this so just type the variable active active and is if active is equal to with three equal signs equal to login if equal to login now put a question mark so this question amongst means if so if this is true we'll do this so we'll put we'll return something on these square brackets and uh in this bracket so then else else we do else in this syntax by putting column else do this so here is if it's true we'll return something inside here else will return something else so for here what we have to do is to return the span so actually let's copy all of this and put it inside this pen so and inside this brackets what you have to do is just type this syntax that I will show you here and inside it we'll put the dance hang up uh word so copy all of this with a button two and put it inside so if the if the login so if the we are clicking on login it will show don't have an account and sign up so else what we have to do is to do again the same thing else and we'll also pay copy this let's just copy it so we can run type it double it so we can type it two times so copy and put it inside so else we have to show we have to show have an account and we have in the button and the button is going to be login so login so otherwise log in and here is the syntax I know it's kind of confusing but we'll understand it later too so I'll explain again so if active is equal to login it will show you don't have an account and sign up so else if it's signed up it will show you have an account login so here is how you can do it and for now it is login and it will show you this but if you change it here on the state and we'll put it signed up it will show you have an account login so it's very very simple and let's put it again back to login and now instead using this state will show the two components too so you're not going to show this sign up here so we're going to check again so let's just create again that that syntax or that if statement and put active if active equal to login we will show the login component which is this login otherwise else we want to show the sign up component so we're going to remove this sign up and here we go so if you change again if you make it sign up and save it it will show sign up if we log in login so here is how it works so now when we click on this we will change it to sign up and log in but to do this we'll edit the state and to edit the state you have just to to put a function in the buttons so now here on on click type on click on the first button in the sign up button so on click on click is going to be a function handle change that I will create in the moment and also copy this on click and put it on the login button too so here we have and it'll show you that it is it doesn't exist this uh this function doesn't exist but it will create it right now so before below this uh this you state here you have to create the functions of const handle change handle change not handed handle change let's edit it okay handle change cons handle change equal to function here's a function I'm assuming in this video I'm assuming that you know es6 or the new syntax of the JavaScript so like this so we create easily a function on this way and we don't type function and like we do in the old JavaScript so it's easier and here on handle change the function is going to set the active variable to different uh to the opposite so if it's login you'll put it signed up and if it's signed up it'll put it login so here just type set active so we'll use this function here set active and SEC active we are going to check if active is equal to login so if you have it login we'll put it to if it's login we'll make it sign up so sign up else we'll put it login so we're doing the reverse and if we save it and now if we click on sign up it will show the sign up component else if we click again on login it will so it will show the login component so this is really exciting as you can see it's working so sign up login and I explain again so we created a function and we're setting active so if active is login we'll put a sign up and if if sign up we'll put it login and here I'm handling the function in inside the buttons so here's how you can do it how you can put different functions so I think we finish with the authentication page and now we we can just go to login component and sign up component because we'll get the inputs from both of these so let's go to login.js here is logan.js and we'll get the information that user puts on the input input Fields so to get this information we'll use also we'll use the use state to save the the information for the moment and then we'll get this information and put it on Firebase and create a user and do everything that we'll do later so now let's just create uh two variables or two use States so the first one is going to be const uh email so we'll save email here and set email use state here inside you state is going to be an empty string and also copy this and do the same thing for password so password and set password here on this use States we will save the password the con password and the email for the for the input fields and now in the input Fields what you have to do is just to type on change so every time user types something we want to use the e or event so we'll put an e so event will get the the value so here uh using the e or event we'll set email set email to the E dot Target dot value so we'll get the value of the input that user Types on the input box and it will put it inside the set the email variable here that is in a use State and also will do the same thing copy this we'll do the same thing for the password so every time on change but instead of this we want to put set password so now we are setting the password and also if you type right now if you try to type something in the input box it will save it on State every time but also want to show the value of the state on this is in this input so we want to be the input value of the input is going to be email and also value here is going to be password okay so now okay and to show you that this is working and this is updating the the email here I will just cancel log so if I type console log here and it will if I console log email for example email if I type and I save it if I go to my react project and right click and open inspect and go to console so every time I type every time I type on the email box so as you can see it will update the status printing here is printing the state and if I type it it'll show you the state so it's updating on real time and we can use this value that is inside this state to log in and to do more functions so let's go back to the code and I can remove this console log and here we go so I will also do the same thing for uh for the sign up component so I will just copy these two states and go to sign up.js and paste them here and also we will need the username so const a username said username is going to be equal to use state and also we want to import this use state so here on react in curly brackets use state save it and now we have username and here on change on change equal to E and this e will set email email to e.target dot value copy this on change paste it paste it and then it will change it to set username and here set password set password save all this and we got all the components that we need so if I click on sign up here we'll save all the fields and everything information is put it on the box of input it will save them on the state but also want to put the value for each of them so value is email for the first one value for the second one is username and the third password so value password okay so we got all of them on State and everything looks great so uh before uh now we got everything working and it looks good so now we have to create the users but after creating a user we will put that on a global State because we want to use it to log in and to use Global state to save something globally so I want to save the user globally and show it every in every page of the website we will use a Redux which is a tool that can help us to save things globally and to use Redux what you can do is to First install Redux then we'll send set up some code it's going to be very confusing Redux on the first of time but I promise you it's not that hard so let's go ahead and create Redux so first we have to install some requirements so here on Terminal just type yarn add react redox Dash Redux Redux and also we want to add to install the Redux so just type this and click on ADD and this will install Redux on your project then what you can do is here on sources we'll create a one for two folders actually one folder is going to be app and another folder is going to be features features and here on app inside the app we'll create a store so I will explain you what a store is and a store is something that will store variables globally so so here's how a redox works is is a store it's some reducers inside your reducers we have slices so slices are have some information what uh what others are the states what are the variables that will state will save and what are the actions that we'll do with them and what we can do so then we put the slice inside reducer and then reducer we put it inside the the main store and also store we put the store in the main index.js file so let's go ahead and create the store first so let's create two files here inside the app just type store.js and another file is a reducer reducers.js so inside the store we have to import two things so type import brackets con figure store and this is going to be from react.js redox Js so Redux JS and also it's going to be at redox JS toolkit slash tool kit and another import is going to be import root reduce now actually we have to create the root reducer later so here we'll use export this Creator variable that will export it so export cons store and inside the store we'll put configure store and this store is going to have an object with reducer so reducer reducer and in this reducer is going to contain an object with data so data data will have the root reducer inside so reduce is going to have the reducer so it's the main reducer but for now we'll just type some text just root for example and now and you have to go to index.js and here we'll check where index.js is is here so here you know on index.js you have to put the provider and to put the store on the main app so you can remove this react strict mode because we don't need it and here first we have to import the provider so just type import in curly brackets provider and provider is going to be imported from react Redux so react slash Redux now we got the provider and we'll put the provider here provider we'll close it and inside provider we copy app and paste it here and also provide is going to have a store attribute and store will inside the store will put the store file that we created so just type store and if you click on this the first option here it will automatically import so here's the import file and here we save it and we have the store so here we'll show you that redox JS toolkit is not found so let's install this so go to yarn and yarn add paste re-ed at redox JS toolkit okay now it's installed redox and then here on store we created the store and now what you have to do is to create reducer so the root reducer go to reducer.js and here you have two uh import or combine reducer and also we have to import the slices that we create but for now we don't have any slice so we have to set up a lot of code and Redux but then it will everything will make sense so just type here combine reducer combine or you can import from here combine reducers and we'll import it from Redux and here we'll create another file export const root reducer root reducer equal to combine reducers and here is going to be an object with the reducers we want so we want to a reducer for our user because we want to save the file and we want to save the information of the user in that uh on that state so we'll create a state for reducer so a slice for reducer so here we're going to have user and here we will put the slice so for now I'll put a text to so it just slice and save this and now we'll use this root reducer to import it on store.js so here on top import root reducer if you type enter here is the import root reducer and instead of this data here we'll just type root reducer so here we are using so we finished with with store.js we can close it and now we have to create some slices and put it here on the inside the the reducer.js so to create the slices it will create the slices inside the features dot uh in the features folder so go to Features folder that we created and here we have features folder and right click on it and create new file and we need the slides for a user so we'll type user slice dot Js enter and now here is the main part of our state so here we'll create the slides so the initial State the states that will say everything we want to save on this slides or on this state that we created and then we'll put also some actions what to do with some function some functions that we can interact with that state so now here let's import create slides so import or you can just type create lies press enter that it will import it and now we need an initial state so const init in initial state equal to an object and here we'll create user so user by default user is going to be null so just type null because we don't need we don't know the user and then we'll also use is loading which is something that will use it to to check if the user is loading while login or is not so just type is loading variable is loading into equal to true because by default is loading so now we created the initial State and Below we'll create the slide so export const uh user slice equal to create slice and inside this uh this function create slice is an object and this will contain name and name is going to be user user then we have initial state and then we have initial State and others we have reducers reducers so here we'll create reducers and is going to be an object and inside this object we'll create different functions or reducers that we can interact with this state so first thing is going to be a login user so we want a function for to log in the user so login user colon and here we'll use two things the state and action so just type state action and it will use these two to we'll use these two variables to put this to get this user from state so from State we get users.state.user is going to be equal to action.payload so payload is the data that we'll put from so every time is I know it's very complicated but every time we run this function login user you can put some information inside this function I will pass it in this code here or in the state of user or or inside the user and this action or this information is called the payload so we want the payload to put it inside the user and also we want another function is going to be log out log out and also here we don't need the action we need only the state so state and state DOT user equal to null and this is equal to null because every time you log out we want to to turn it on the on the current state so it's going to be null and also we want to earn a function for set loading set loading and set loading is going to have state and action and set loading we want to state DOT is loading equal to action.payload so now we created the reducers and what we can do now is just to export them so we want to export these so we can use so export const and we have multiple of them so we'll type login login user log out and let's type logout user log out user so we have logout user and set loading set loading and this is going to be equal to user slice dot reducers.actions I'm sorry actions because these are called actions so here we created the slides and everything it should be good instead of this user slice equal here equal to create slice and it's good so now we'll use this slice to put it on in our reducers.js so go to reducers.js and we have to import this user slice so just type user slice and it will this will automatically import and instead of this uh text here or the string we just have to type user slice now we finished with reducers and we can close it now we have the slice and we can close it it's good perfect so here we can close the index.js too okay guys now we finished with the Redux and we created everything we need at the state the global state of the user and to to test it you can just go to Google and install an extension for Redux too so just search on Google for Redux redox extension and if you go here is Google Dev tools is Redux Dev tools just install it I have already installed it and refresh it and here we have Redux Dev tool and if you click on this icon here it will show you a state with some datas and here is the state and actions but we haven't finished with it yet so we'll go ahead so in here on this project we can use the the state or the main State the reducers and the store in our project by using the hook use selector and now if you go to app.js as you can see I'm showing home page I'm showing authentication page for now but if I want I can check first if the user exists or if is if it is a user then want to show the login the home page if it isn't a user we want to show the authentication page so to do that you have to first get the user so to get the user just type const and user equal to use selector you selected the second one it will import it on top and inside this we want to check the state and state is going to have state DOT data dot user and also there's going to be dot user again because we've put user inside the user so if we save it it will show you a problem that is read properties on undefined reading user so here user okay let's try to console log this uh object is this a variable so console log inside this we put user and if you right click and go to console it's going to be undefined and this is being undefined because we actually did have a problem if you go to reducers.js we are putting here user in the user we are putting user slides but actually we want to put the reducers on this from user slides we want to put the read users not the the user slice itself so just type user dot read users reducer and save it and now it will show you the user so here is in the console as you can see it's an object and this object contains user is null and is loading through so also if you click on the and the Redux death toll you can see here we have on the state inside data we have user and is null and is also is loading is true so now we can use this variable and here on app.js we can just type here on state.data.user dot user we want to we can remove this console log and now we want to check if a user is exists so if a user exists will show a home page else will show authentication page so here in curly brackets this type user so if user if we have a user then we want to return this else we want to return this so here inside the first thing so if you have a user we'll put a home page then if we don't we'll put authentication page we can remove this and Save so now it show it's still showing the authentication page because the user is null but if you go to user slice here on features user slice and we put something here just an object with a username radian for example and we save it now it'll show you the home page and this is showing home page because it already exists a user here on on um on the on the state on the redox state but still we will leave this null because we don't want to have a user here because we will create this user using Firebase as we told you before and then we'll save it here on this state so let's go ahead now and create the sign up function that will create a user in the Firebase and to do that what you can do is first to go to signup.js and here is sign up let me see where sign up is in authentication sign up so here we have signed up.js and every time we click sign up button we want to run a function here so here let's type on click on click equal to handle handle sign up so here we'll create the function on top below the states here create a function const handle sign up equal to a function and this function is going to create a user so to create a user will use the function from Firebase that will automatically automatically import and it's going to have this function is called create user with username and password and we we just have installed before redoxing our component in our project and then we can use this function so type import and in curly brackets put this function create user with email and password and this will be imported from a Firebase slash off save it and if you can see expected assignment of okay so we have just we are not running the function yet so okay here we imported the the sign the create a user with email and password and now we have to create the user but first we also need the auth so import auth and here on top type import uh in curly brackets off from Firebase so dot Firebase file that we created so if you go to firebase.js that we have created before in the beginning of the video so here's Firebase we have created an auth uh all variable and it will import it imported from this file so from dot slash is going to be also two dots because we have it Wonder directory away so dot slash dot dot slash Firebase so save it and we have all so now in inside this function first thing we have to put is alt then another thing is email and then password so just type email we get from the state and then password so here is the function create email with and password and after creating this this is going to return a promise and after creating this what we have to do is to sign in the user immediately after creating a user we want to sign in so language just type dot then dot then so inside this then what we want to do is to sign in this user so uh to sign in just type a function sign in sign in with email and password Here is the option so just click on it and this will automatically on import it on top so here is imported wait let me make this larger okay so it's imported on top sign in with email and password and then after we sign in after we have this function and again we have to put auth and then we want email and password pass email and password on this function and then it is going to sign in the user and offer sign in after signing in this user what we want to do is to get the username and put it on this user in this current user so to to put the username on this data on the on this object of the user we can use update profile function and again update profile is the function that we can import from uh for Firebase auth so here we can import update update profile so update profile and then after we do that that function the signing function you can type dot then we want to update profile and this functions again is going to have we want to get the current user that is signed in so auth dot current user and then a comma and we here we have the object that what we want to update so I want to update username to put a username so username is in Firebase is called display name so just type display name and display name is going to be column to username and then we have updated so if I save it and here is all the code as you can see it's it looks better now because it was too long so first let me explain again so we have a function that runs every time we click the sign up button and the first thing is going to create the user with a mail and password so you put it off email and password that then we want to sign in this user with sign in with email and password and then after signing in we want to update his profile and put a username for him so we want to put a username like use for this current user we want to put the display name to be the username so then we have created everything and we have the display name and then one just to catch any error so if any error happens after creating the user we can remove this column here and type dot catch so if any error happens we want to for now let's alert let's just alert this error so error and we want to alert error so every time it's going to alert this error okay so we have this function and I think is good so what we can do now okay so what we can do now is to put this function inside the button so we already did it so yes it should it should be good okay so now every time we click sign up it's going to create a user and now let's test this function so if we go to Firebase here is Firebase that we have and if you click on users as you can see there it shows no users for this project yet but if you go to our project and here is our project and here we just type an email so a random email and here for username just put my name and put a password one two three four five six and if you click sign up it's not going to show anything or something but if you go to uh to the Firebase and refresh let's see if it worked yes it worked as you can see it shows a new user with this email and this provider and it shows where when it's created and the user ID so it's working perfect it's creating our user so the sign up function works perfect what we can do now is to go if we go to app.js here what we have to do is every time the our website loads we want to check if a user exists so if a user exists in the Firebase or if a user is logged in more exactly we want to get this user and put it inside the Redux State and then use the Redux state for anything we want in our website so to do that what we can do is to go to app.js and here to check every time the component load or the website load we can use I use a hook a react hook that is called use effect so now we can just import use effect so import use effect in on top of the here on app.js we have to import use effect so here just type use effect and here on the second one just press it and it'll automatically important top the use effect from react and here use effect contains two things one is a function and other is some dependencies and let's create a function so it's going to be this function and also comma is dependencies on curly brackets so dependency is when we want to run this effect only when a component loads but we won't we don't want that so if you leave it empty it will run every time the whole page reloads or all page runs so inside this function we want to uh check if a user exists so if or if a use more exactly if a user is signed in and to do that first let's uh let's import auth so all if you type auth and it click it it will import auth from Firebase so it's imported and now we want to use auth auth to check if a user exists or to do that you can just type dot auth on auth state changed so all on state change so inside this function is going to return on the user so of user and we can use this user and you can use this user to put it in our Redux uh so if a user exists we want to put it in our Redux state so first let's check if alt users so if this user exists then we want to put it inside redox and to do that to put inside redox we can use dispatch and first let them let's create this patch so const dispatch equal to use dispatch this is another hook for a Redux so we'll use this patch if you click the first one it will import it on top so here is imported use this patch make sure to import it too and use this patch so close this and here we have dispatch and to put the data or the user in insta in this dispatch on our Redux we can use this dispatch and just type dispatch and this is going to uh to get the payload or the the action the action is going to be a login user so we want to log in this user so if a user exists in a Firebase we want to log in it on our website too so now we can import the login function with that we have from uh from Redux and just type login user here is the first option press it and here is automatically import login user from features and from user slice that we created on Redux and now it's this you this user login user is going to get a payload or the information so for information you want to put an object with the user information so user information is going to be user ID so we want user ID and to get user ID just type of user Dot uid uid then we want username we want to create a username and to get the username just type of user dot display name so display name is the username and also we want email so email email and the email is going to be off user dot email okay we got the email too and we put them all inside so after the uh yeah after the the we get the email and we get the information and the payload and we put it inside the Redux we also want to turn off loading so it's not loading anymore which means it was loading before but now it successfully load so to use that we can run this patch again before below this function we can run dispatch and inside this dispatch we want to set a set loading set loading function so click on that it will import it on top set loading and inside this is going to get a payload and the payload is going to be false so it's not loading anymore so it's false and uh yep so we got it and else so else so if it's not a user we can just console log a user is not logged in okay so we save this and I think yes I think we should be good yeah we should be good but let's let's also get this use effect and put it on top actually so copy and put it just below the app or maybe just just below the yes it's below the app but also we want to put the dispatch on the top so put it on top okay this is better I think okay so let's see uh if we refresh our Redux and okay yeah I think it's working because as you can see it's showing us home page and this means that we have a user so if you click on the Redux tool in the extension and if you go to State and data you can see that we have user and it's showing user information so user ID username and the email okay so we are getting this we are putting the user email and stuff and is not loading it's full so it's it successfully got this so I think it's working fine because we it's showing us home page and if we refresh it's a problem but it will show it will fix it uh later now we are authenticated we currently authenticate it and we have to log out we have to create an option to log out and to create this option to log out we'll create a link on the nav bar a button on navbar that is a log out button and for this uh log out every time you click want to log out the user and Okay so let's go to side nav because we have we have to go to navigation side nav.js and here below below create button now actually we'll create a button so let's copy this button and paste it one more time and this button is going to have an avatar so here is type Avatar Avatar click enter this will automatically import it and you can close this component and for now I'll just put an A on it and below in this pan we want to have username user.username but uh okay so we want here we want to put the user.username but to get the user we can go on top and get the user from Redux so here in the site nav we want to get the user so this type const user equal to use selector so to get a something from Redux we use the use selector so you select or click on this and will automatically import and want to get state so state dot data dot user dot user so here it will get the user and the user here now we got the user and his in this span in curly brackets we want to to show the user username or email maybe so this type user dot email and below this this user.email we want a button for logout so just click just create a new button button and it will put a class name for this angle class name is going to be log out button and here is maybe log out log out and if you go here it will show you uh in our page it will show you this new button and it show you email of the user and the logout button so username okay so here we want to actually show username not email but uh let's oh let's go ahead and design this button so it is showing very ugly right now but we will design it so let's go to sitenav.css and for this logout logout button dot logout button we want to put some style so style is going to be font wait let me show you the browser I hope you can see it as is not hidden okay so here we have the log out button and logout button is going to have font size font size font size is 15px and Border radius is uh border radius radius is 10 PX we want the font way to be bold bold and we we want color white color white and background color background color is going to be an rgba our rgba and we'll show you the numbers is 2 5 5 3 times one more time no and this and the transparency is going to be 0.211 and if you save it it will show you like this and then we want to add some padding padding is 10px and also want some border border is going to be zero so here it is and actually border radius is not working I don't understand why border radius 10 PX oh it's 10x 10px okay now it looks better and also we want to copy this uh this class and we want to make the hover effect which is a cursor pointer so over cursor is going to be pointer and also want to change the background to look a little better so background color RGB rgba and is two five five three times and also we have a transparency 0.21 0.2424 okay so now as you can see it looks better and now every time we click log out we want to log out the user from Firebase and also it will remove the user from the Redux from our Redux state so let's go ahead and create the function so if I go to side sitenav.js and we create a function here on top below user const handle log out and the logout is going to be a function and this function is going to have is going to be very very simple actually because it's a ready-made function from a re from Firebase and this function is called just a sign out and inside it is going to have oauth so let's import auth if I type auth here and press enter it will automatically import here is auth and uh we also want this patch because we want to remove the logout user from Redux so we want to use dispatch so just uh here a below user this type const dispatch equal to use dispatch use dispatch enter this will automatically import and here we want to use this dispatch so every time we run this function handle log out we want to dispatch to logout the user from Redux to do this you just type dispatch and inside this is going to have the action which is log out okay let's import it first log out actually let's just log out let me see here on features and user slides we exporting is called logout user but it's a problem here because we type log out so make sure to be log out user is going to be the same as the action here so log out user log out user save this and if you go to sitemap.js remove this import and log log out user enter this will import it and now we got log out and inside this dispatch we type log out log out user and this uh this is going to have nothing actually just a function with empty parameters because we are not we not need any anything that every time this function is going to run it's just going to return the user to null so then after creating after returning it to null from the Redux we want to also sign up sign out from Firebase so just type sign out and this is the function press enter this will import it from the Firebase auth and this is going to contain inside of so just type off and save it so here we have a function is very simple and now we have to put this function inside the button log out button so where is the button here we got the log out button and on click of this button on click we want to run this function handle log out so save it and now let's just test it in our project so here is our website and I can refresh a page here we are logged in here is the user and if I click log out it's going to allow to log out and show me the login page so is this is very fantastic it's working perfect so now we can create a user we fix the function for creating users to sign up a user but we can't log in because we haven't made this function yet so it's going to be very very simple to log in I will show you right now how to login so let's go to the code and go to uh go to login.js so we can close all of these let's close all these Tabs go to authentication login.js so here on login.js we'll create a function that will run every time we click login so here below let's create a function const handle login and it's going to be very simple actually so handle login equal to a function and this function is going to contain only one function that is made by by Firebase so first we have to import it on top so import types import curly brackets and here is going to be sync in with email and password this is the function and it's going to be imported from Firebase slash of okay so save it here is the function is a very long function and now inside this function handle login will run this function so again with email and password and here what we want is to to inside this function it will take off an email and password so let's import auth import auth of from our Firebase file so it file Firebase here and put oauth inside of and then we want we it will require email and password too so email and password that we use from the state so save it and it's not and okay so this is not the default import so we have to put it inside curly brackets so save it and now it's good it should be good so and it should work now but wait let first we have to put this function inside the login button so here's the button and on click of this button we want to run handle login so save it and here we should work so let's see if this is going to work first I'm going to create a user so let's put in email ready one at gmail.com ready one and the password is going to be one two three four five six click on sign up this is going to log me in and here now I can click log out and it will show you the login page so here's login and let's put the email ready one at gmail.com and the password one two three four five six login and we are logged in okay guys it's working perfect as you can see it it is logged in actually here on this icon here on the nav bar in this Avatar I want to show instead of this a that this is showing every time I want to show the first letter of the username so to do that you just can go to sitenav to navigation go to navigation sitemap.js and to show that a first letter here on the icon in the in the yes in Avatar we can just get the first letter of the username so to get the first letter of the username we can just first check if it's a user so first check if the U is a user then if it is a user or if it is a user.username then I want to get the user dot username and then I want to get the first letter which is Char at zero so character number one and Dot to uppercase two per case function and this will get the function else I want to just return a wait not inside this but outside I want to return a so here it will check if it exists a username if a username exists you want to get the first letter and want to convert it to uppercase otherwise we want to put just the a so we save it if I log out and I create another user ready to gmail.com let's put let's put ready two and the password one two three four five six and if we refresh it okay so now it shows r with capital ready to username and also log out button okay so now there is a problem that I want to fix so as you can see every time you refresh the page so every time we refresh it shows a little bit a millisecond the the login page and then it shows the home page this is happening because it takes some times for from here on this function if I go to app.js let me explain you so here on use effect it takes some times to run this function on auth change which is a an API function that runs with Firebase and it takes some milliseconds to load the user so and then it puts it on the Redux state but to during this time we can use is loading variable to show a loader on the screen and then after that the user is fetched from the thermal Firebase we can remove the loader and show the home page so to do this we can just go to app.js as we are here and we can create a loader on a on here so it will check if it's loading so if it is loading we'll we'll put a loader then we'll uh then otherwise we'll show the home page so so let's go ahead and here in the app actually let's go to chat GPT to generate a loader so I'll open chat GPT I don't want to code this loader myself so I'll ask chargpt so just has chat gpt4 create a loader in the middle of the page for my react project now it's generating the the components so it's going to first create the loader it's actually creating a component but we want just the the div and what's inside the div and also the CSS file so here copy this div these two divs and go here and paste them and then we want it will generate also the CSS file okay now the css's code is generated and just click on copy and then just you can just paste it on the app.js so paste it and save it and now if I go to react it'll show you this loader here but we want to show this loader uh when will the the loading state is true so here we have to check if inside the app if you have to check if it's loading so if is loading but first we have to get this is loading variable from uh yes from Redux so const is loading equal to use selector just like we got the user we can get the is loading variable state and date dot data dot user dot is loading so here is how we we can get it and now inside here if is loading is true then we want to return this otherwise we want to return this so copy the loader so if it's loading we put it on the first brackets so we put the login and then otherwise we want to show the user so the the other Pages like home page or the home page or the the authentication page and actually this is showing an error because we have to put it inside the jsx so jsx is this so copy and paste it inside this jsx component so now save it and it's good so every time we refresh it now it's not showing the home page so it's good it's not showing the login page so it should be good now and if you log out it shows login and we can put my email already to gmail.com and password login and it will log in so here we go guys we created all the authentication system for our project and it was a really long video actually we make we used Redux we use Firebase and we log in and log out successfully create a user and also we put it a loader so every time it's loading it show loader and then it will show uh the uh the page the authentication page or the home page if if the user is logged in so this is the video for the day guys in the next video or in the next videos in this channel I will put another video on how to continue a video about this uh this Instagram clone where we'll create another functions or another features for this project and we'll create the posts so user can create a post you can post a photo can post something or it can follow someone or can like another post or something so this is how you can create this authentication system this was very long video I see you in the next videos make sure make sure to like subscribe to the channel and I see you in the next videos peace

Channel: TopNotch Programmer

Views: 9,432

Keywords: redian marku, tnp, topnotchprogrammer, Instagram clone, react instagram clone, react, reactjs, redux, firebase, tutorial, coding, programming, cloning instagram, instagram login code, instagram register code, react instagram authentication, clone instagram, react clone, login, signup, react login, build login with react, build login with firebase, clever programmer

Id: Six5YwldzPM

Length: 100min 21sec (6021 seconds)

Published: Mon Mar 27 2023