React Context Api with user Auth Project | useContext hook | React Project

hello everyone welcome back to the channel I hope you all are doing absolutely well so guys in this video we are going to create a project that is for user authentication and the major logic that we are going to use in this video is of context API so the main aim of creating this project is that we learn the concept of context API in this video so before starting the video if you're new to the channel make sure to subscribe to the channel as I regularly upload these kinds of helpful Tech videos so let us now look at what we are going to build in today's video so first of all if you you see I have a component on my screen that is login page now this login page has two feeds that is username and password and a login button so if I enter my username okay here and if I enter some password and if I click on login it takes me to another component which is welcome page and it displays the username which I have put over there next thing is log out button so when I click on this log out button it takes me back to the login page so guys we are going to start from scratch I have created a new app using the npx create react app okay and I have removed everything from my app.js now I have written a basic H1 with a Hello statement in it I have also added some basic CSS because the main aim of our this video and to learn this project is to learn the concepts of context API and not to dive more into CSS part so let us now start so if I show you my app on the screen uh this is how it looks because I have given some stylings so as we discussed we initially want two components first one is our login page component and second one is is our private page component okay so login page component is the one that will be displayed initially and then once we login then that private page component will be displayed so let us first of all start by creating our components so I will create two components that is login page and another component that I'm going to create is our private page so I have created both the components now now the next thing that we want to do is we have to write some basic code using the rafc SED now let us import these both the components into our app.js so in our app.js let's import these both the components let's Now display both these components so here I'm going to write login and next we are going to write private page let us save and see it on the screen so if you see we have got both the components login page and private page okay so let's now start building our basic structure for both these components then we will start writing our functionality so for our login page component we know that what we need is first of all we need a H1 which is going to say login page then we need two inputs basically one for getting the username and one for getting the password password then we need a button which will display login so if you see we have got all these things now let us write some more things first of all Let me give some placeholders in my input buttons so here I'm going to write enter username and then in the second one we are going to write enter password now we have the placeholders let us also bring them on new lines for that I'm just going to give some breaks so now we have the structure of our login page ready with us now let us prepare the structure for our private page so in private page what I want is first of all I want to display a message welcome page and then here I want to display hello and the username okay so whatever the username that we are typing on the login page we want to display that username so for now I'm just giving a static text and later on we will make it Dynamic using our state value so if you see we also have our private page structure ready with us we also want a log out button on our private page so here let me add a logout button so if you see we have got our log out button also see we have got both our components that is login page and our welcome page component now what we want the next thing is we don't want to display both the components on the same time okay we only want to display one component at a time but for now let us keep it like this and later on we are going to make use of conditional rendering to only display one component at a time but before moving forward let us see we have created these two inputs right so in order to gather these values okay we need two states basically so instead of creating the states in this component itself what we are going to do is we are going to create all of our States into our context so that we can get those values or States from our context okay so the next thing that we are going to do is we are going to create a file for our context so the file that I'm going to create is au context. JS so you can give any name but try to give some meaningful name so that it is understandable now let us do the first step which is creating our context so const so const o context now we are going to make use of create context method from that we get from react now we have successfully created our context now also let me export it so that we can use this in our component files also let us create our provider here so export con Au provider is the name of our provider so here we need to write children because we need to WRA our provider with children components and here we are going to write Au context. provider and inside o context. provider we are going to wrap all of our children so once this is done the next thing that we want to do is we want to create our states so as I mentioned we want two states basically one for our username and one for our password so now I have created both the states that is username and password The Next Step that we want to do is we want to pass these values okay to our provider so then only we can use or consume those values in our components so here I'm going to write value and in this we are going to pass these values as an object so username I want to pass username and then we also want to pass set username function and then password and then set password function okay let me give it a capital P to set password and let's do the change here also so now we have created our context we have we have also created our provider the next thing that we want to do is we want to wrap our main component with the provider so then only we can consume these values so let's go to our index.js and here we are going to import our provider import o provider and then what we are going to do is we are going to wrap our app component with this o provider so now we have wrapped our comp app component with our o provider so by doing this what will happen is all of our app component uh and the children components will get access to these context values the next thing that we want to to do is the username and password we want to set it as a value to our inputs so let's go to our login page and first of all let's get those username and password values so how do we get those values or consume those values for that we have a hook called as use context so let us write const what we want is username password set username and set password and then we want all this from by using the use context hook so just make sure that your use context Hook is imported from react and then we also want to mention our context name so our context name is au context now we have get all these values now let us set this values so I'm going to write value here and this value is going to be username and also we are going to write a onchange event handler which is going to set the value of username Whenever there is an update in the value so now in the similar way we are also going to do the same thing for password so let's set the value for the password and also let's say write the onchange event handler so let me correct the spelling for password first and we are going to set the value to the password password and let's write the onchange event handler so now we have done both the things what we are doing now is we are capturing the value of our input inside this username and then the password value inside our password there is a small typo let me correct the typo here so on change and now if you see when I'm typing any value it is getting typed in which means that our these values of username and password are getting stored in our state values over here okay uh in this States so let's now move forward and what is the logic that we want to implement is we want to create a user State okay so let's first of all create a user state so we have created a user state which is going to store our user value okay so basically what is happening is uh whenever I enter any value in my username so that value is going to be stored in my user State and then we are going to make use of this user state in our login page component and our private page component to display this user value okay so for because for now if you see this user is a static value okay so what we want is whatever the value that I'm typing over here and then when I click on login this value should display here right so for that purpose we have created this state so let us also now pass these values so that we can get those values in our components so now let's go to our private page component let's get that user value so I'm going to write const user and set user and then here we need use context and then our context name so context once this is done we have got our user value so instead of displaying this user I'm going to display my user value that we have so in as as of now if you see there is no difference because our user value initially is null okay here we have set the user value as null so we want to change this user value and how this user value is going to change basically when we click on this button we need to invoke an function and what that function will do is basically it will set our user with the value that we have in our username so let's do that so so for that purpose I'm going to create a function here itself const login and here what we are going to do is we are going to set user with our username value that we have so here I'm going to enter my username value and first of all let me send this login as a value and then let us grab this value from our login page now what I want is when I click on this button that function should be called right so let me write on click event handler and then login so now let us see if this is working or not so I'm writing my name over here and any D text in my password when I click on login if you see my user value is coming over here so in this way what we are doing first of all we are setting the value to our context and then from Context we are getting that value to our private page component okay also let me set this to a password value because currently the type of it is text anyway password is like a dummy value as of now we are not making use of password anywhere we are just doing the authentication using name so now the next thing that we want to do is we don't want to display both of these components at the same time because right now if you see both the components are displaying at the same time we want that initially our login page should display if there is no user that is authenticated till now and if there is an entry for a user that is authenticated then only take me to the private page so for that what we are going to do is we are going to write is authenticated function and that function also we are going to write here itself so let us write the function is authenticated and now in this function what we want to do is basically I want to check if my user is not equals to null I'm going to return a True Value else I'm going to return a false value now why we are doing this we are just checking if our user is currently signed logged in or not okay so user is not equal to null means user is currently signed in or logged in that is why we are returning true and whenever we return true we want that our private page component should show okay so now basically we have just created a function now we are just going to pass this value and we are going to write uh conditional rendering based on this function so in our app.js we are displaying both these components so first of all let's get that value so const is authenticated and here we are again going to make use of use context and our context that is au context so what we want is if this value is true then it means that the user is already logged in okay so instead of login page I want to show my private page if my is authenticated returns false then show login page so now I hope you must have got the logic behind this so if is authenticated is true which means that user already has a entry present which means that he is authenticated in so that is why we are showing him the private page and if this returns false then we are showing him the default page which is login page let us see if this is working fine so if you see right now uh on our screen it is showing login page because currently the value of user is null so that is why it is considering that there is no user that is logged in so let's now try to log Lo in I'm entering my name and password when I loog click on login it is taking me to the private page and it is showing my name also so you see we have done both the Logics that is we have done the conditional rendering also we have uh we are displaying our user value on our login page now the next thing that we want to do is when I click on this log out button it should take me back to our uh login page so for that what we are going to do is we are going to write another function which is log out function so const log out now here what we want to do is the logic that is we want to set the user to null okay because what what we are trying to achieve is I want that whenever I click on this button that is the log out button my user should be set to null and if my user is null again I will be redirected to my homepage also I want to pass this value of log out here I'll be passing that value and also we need to get this log out Val function value in our private page component and I'm going to write on click event handler on this button which will basically call this function so let's see if it is working now here I'm going to enter my name and any dummy password when I click on login it is taking me to the private page let us click on log out and it is taking back us to the login page so how it is working I hope you must have got the logic so if you see in logout component what is what we are doing is basically we are setting our user to null and as soon as our user gets null it will uh this is authenticated function we'll again check if it if our user is null then it will return false then in our app.js component our login page will display so this is how it is working so now next one important thing if you notice is even though if you are getting redirected to our login page the values that we have entered previously are not getting uh cleared out so in order to do that what we can do is when we click on that log out button we want that these values should get cleared out so here in our o context log out function what I can do is I can set my username and password to empty values because I know that now I have logged out so I don't need to store any values for my previous user so I'm just clearing out the values so let us see now if I enter my name and if I enter any password let's click on logged out and if you see now our values are not getting pre-filled so this is how we can clear out the input values so now we have achieved all of the functionalities now you know in this video we have just understood the logic of user authentication using context API because our main aim in this project was to understand how context API works so what we have done is we have created a common context and then in our different components that is in our app.js component we are using those different values that we have in our context okay and similarly in our login page component also we are using different values and in the same way we in our private page component also we are using some values now important point to note over here is we are not actually writing any validation checks for our login for example if you see when I don't enter anything and when I click on login it is also taking me to the log private page okay so one example let's see how do we usually set the validation for example in this login function what we want is when I click on this login function I want that for a specific user only I want to let him in okay for let us consider that for my username Rahul there is already an entry in the database and for that user only I want to provide the access to our private page so we can write a condition like this if our username okay is equals to Rahul then only set our user okay in any other case don't set the user so let us now see how it will work so let me give some any dummy name for example let me give some name as Sam and let me enter a password and click on login so if you see it is not finding that the value of the username is Rahul so it won't let me in okay so if I enter the exact name then only it will let me in okay so in this way we can apply validations also but as I told in this video our main aim was to understand context API and not the actual validation checks of user authentication so I hope you must have got some idea of how to implement user authentication using context API if you found this video helpful please make sure to subscribe to the channel and please share your valuable feedback in the comment section so that's all for this video and I will see you in next video

Channel: The Humble coder

Views: 176

Keywords: usecontext, usecontext hook, react usecontext, usecontext tutorial, usecontext hook in react, usecontext react hooks, usecontext react, react js usecontext, react usecontext hook, learn react usecontext, react hooks usecontext tutorial, reactjs usecontext, react hooks usecontext, usecontext typescript, usecontext hook in react js, react js usecontext tutorial, learn usecontext in 10 minutes, usecontext user, hooks usecontext, react usecontext js, usecontext vs redux

Id: iHrO8aK3ydQ

Length: 16min 12sec (972 seconds)

Published: Mon May 06 2024