React JWT Authentication App using RTK Query | RTK Query Auth | Redux-Toolkit | React TypeScript

hey guys what's up what's going on welcome to my youtube channel so i am back with another video on topic rdk query so in today's video we are going to learn how we can perform jwt authentication with the help of artik query in react using typescript and in this video we are not going to create any rest api for our sign in and sign up feature we will be using existing production level api which is already deployed on heroku and if you are interested to learn how to create risk api for authentication then i will provide particular video link in description so let's have a quick demo of this application so we have already some user in our database so i'm going to login with john doe and let's click on login so now you can see that we are successfully able to login in this application and we land on the dashboard page so we have some basic information about this user so we are just showing the name and we have one logout button and if you click on logout so you will navigate back to the login page okay and we have also registration functionality so if you click on sign up so we are going to have this registration form so i'm going to add new user so let's give it john cena [Music] john cena gmail.com let's keep password one two three four five six let's click on register so now you can see that we have successfully able to register this user and we land on dashboard page okay so we are showing this name and if you click on logout then you will basically navigate back to the login page and we are also going to handle the error as well with the help of rtk query so if you try to login with the user that doesn't exist so let's give some user here so we are also going to handle the error with the help of article query so we are getting all this error message from our backend api which is deployed on heroku so we will be using production level api so we are not going to work on the backend side like node express and mongodb in this application so i have already created a api for login and registration functionality so we will use that api in this application which is deployed on heroboo and if you try to login with correct email and if you give wrong password so let's keep some random password in that case also we are going to show a error message like invalid credential and you can always switch between login and registration form by clicking on this sign up and if you click on sign in you will navigate back to the login page so this is the overall application that we are going to build in today's video with the help of artik query in react using task script and before we start working on this application if you haven't subscribed this channel then please do subscribe this channel and like the video as well if you find out that it's helpful so before we start working on our application so first we are going to test the api that we are going to use in this application so we are going to use here production api that deployed on heroku so we are going to use this api to perform the sign-in operation so i have already some user in my database so i am going to login with existing user that i have in my database so i have one user here like john wick and then it gmail.com and password we have here one two three four five six okay and let's click on send so you can see that we have got two thing that is result in which we have name email and password so password is hash over here and we got token so this is the api we are going to use to perform the sign in operation and if the email is incorrect so we will get error message like the user does not exist so we are also going to show this error message as well in our application and if you provide incorrect password so we are going to have different error message okay so let's click on send here so now you can see that we got message like invalid credential okay so this is for signing now let's perform the sign up so for sign up we are going to have here sign up so this api we are going to use to perform the sign up operation and first i am going to try with the same email that we have in our database and here i am going to give first name so we have to add this additional field as well so first name lets give john week okay sorry john and let's give last name so we have last name as well so overall we have to provide the four value in order to sign up in this application so let's give here a week so this email is already exist in our database so if you click on send you will get a message like user already exist so we cannot register with this email okay now let's give new email here so i'm just going to change this name from john to john mayer okay let's give here john mayer and let's click on send so this time it should register successfully in our db now you can see that with this email we have successfully able to register in our database and we have got the token as well so this two api we are going to use in this application to build our full authentication with the help of rtk query so i will see you in the next video where we are going to do our project setup so let's see you in next video so now we are going to do a project setup so in this project we are going to use redux type script template so i am just going to copy this command and i'm going into my directory and here i'm going to open a command prompt and let's paste that command and i'm going to give a project name here like auth rtk jwt because we are going to perform authentication with jwt so let's hit enter and it will take around two to three minutes to install the necessary dependency so i will be back once project setup got complete so our project setup got completed over here so first let's go into this directory that is auth rtk jwt and before we do npm start we need to install some packages in this project so i'm going to install package like mdb react ui kit and i need to install package one more like react router dom and one package related to notification so react justify we need to install so let's install all these packages so it's look like our package got installed okay so let's verify this one whether our package got installed or not so as you can see that project is already open in my vs code so we have installed this three additional dependency for this project and let's do npm start first so our development server got started so our application will load into the browser so as you can see that our application is successfully loaded into the browser so let's first go into vs code and we need to do some cleanup okay so we don't need this counter folder so i'm just going to delete this one so let's delete this counter and let's go to this store.ts file and and since we have removed the counter folder so we need to remove this one otherwise we will get error okay let's save this file and let's go to this app.tsx file and i'm just going to remove all the content that we have inside this div so let's remove this one and i'm going to give heading here auth jwt okay and this imported statement we need to remove because that folder is deleted and let's delete this to import statement as well let's save this file and let's see terminal whether we have any issue or not so we don't have any issue so let's go back to browser so now we have got our heading like our jwt so in this project as you can see that we are using material design bootstrap to build our component so we need css file as well for this material design bootstrap so we have already installed the package we just need to bring the css file so what you can do for that so you can just copy this import statement and let's go back to vs code and in this index.jss file you can just paste it over here that import statement save this file and let's go into the browser so now you can see that this heading got changed so the styling got applied related to material design bootstrap in this project that means we have successfully configured material design bootstrap in this project so now after we are going to basically do a folder structure in this project okay so we are going to create couple of folder and file so the first folder i am going to create for component so we are going to have some components and then we are going to have folder for pages then we are going to have one folder for service okay i think that's it now we are going to have two files inside this pages so we are going to have one file for auth and in this file we are going to have both login and register form so for now i'm just going to generate a snippet over here okay and let's create one more file that is dashboard so once user successfully login into application so we wanted to basically navigate towards one dashboard page so let's generate snippet again over here and let's save this one and now i'm going to configure routing in this application so let's bring some component from our react router dom so we need browser router routes route and we also need navigate okay now here after that what we have to do let's remove this one and we are going to have browser router inside that we are going to have our routes okay and inside route we are going to have our individual route so first i'm going to define home route and since we are going to have only two route that is auth and dashboard and for home route we don't have any component so what we can do so so here we can basically navigate towards the auth route okay so whenever user basically try to navigate towards the home page so he will basically redirect to the authors so here we can define this route or and we can just specify here replace okay now we are going to have here author out okay and this will be path not to okay and we are going to have one more route and this time we are going to have path auth okay because we have with specify here path so whenever you visit on home route so you will automatically redirect to this earth route okay so here we are going to have our auth component so let's bring that auth component that is our page so vs code should automatically import this r okay so you can see that vs code import pause page automatically now we are going to have dashboard page so once user successfully login into our application he will basically navigate towards the dashboard page and this dashboard page is going to wrap with the private route so we will create that component later for now just render this dashboard so let's save this file first and we can verify this one whether this route is working or not so you can see that auth is coming here and if you try to navigate to a dashboard then dashboard page will get rendered and if you try to visit home route so you will redirect to auth okay you can see that even if you try to go to home page so we don't have any component on the home page so we are just redirecting back to auth okay so this is working now we are going to configure uh justify in this application first before we start working on component so what i can do over here so i am just going to bring to import statement related to react 25 and here i can use post container so that we can able to use tool notification on our login and register form so this is also we have configured successfully now after that what we have to do so first i am going to start working on our form page okay so first we will be basically working on our login and the register form so i am going to start with the login and register form and on the same page we are going to have both form so we are not going to have a separate route for login and register so in the same route we are going to have both form that is login and register so let us start working on our login and register form so we need to bring some hooks first so from react we need use state and use effect we're gonna also need uh use navigate from react router dom so let's bring that on as well use navigate and we also need to bring one component from our mdb react ui kit that is that is mdb input okay and here outside i am going to define the initial state of our form so let's have those states so we're gonna have first name then we're gonna have last name email and let's keep password and we're gonna have one more confirm password but we are not going to send this confirm password we are only just so we are just going to send first name last name email and password for sign up and for login we are just going to send email and password so let's define this one after that we are going to define one state so form value set form value use state let pass your initial state after that we are going to have one more state because we are going to have both form on the same page that is login and register so we gonna have a state like so register set so register use state and it will be false okay and after that let's work on this return part so what we can do over here so let's remove this tip and we are going to have section and here i am going to have class name with vh100 so this is bootstrap class name we are using here and let's give one class name gradient custom so we need to define the styling for this gradient custom so what i can do here so let's put this index.css file and i'm going to paste the styling for that class name so this is styling we have to add for this class name gradient custom so let's go back to this auth.tsx file and inside this we are going to have div with the class name container and py hyphen 4 dot hyphen hundred inside this tip we are going to have one more div with the class name row then we are going to have class name here d hyphen flex then we are going to have justify content center and after that we are going to have one more class name align items center then h iphone 100 so here we are using a booster class name again and inside tips we are going to have one more class name so here we are going to define basically column so column hyphen 12 then call hyphen md so it will be basically responsive so that's why i am defining this class name call hyphen lg iphone 6 then call excel hyphen excel iphone 5 inside this tip we are going to have one more class name for the card so card then bg hyphen dark so the color of card will be the black so the background color of card will be the black then text hyphen white and here we have to give one inline styling so i'm just going to give here border radius one rim inside this stiff we are going to have one more div with the class name card hyphen body then p hyphen 4 then text center inside this we are going to have one more div with the class name mb hyphen md iphone 5 then empty hyphen md iphone 4 then pb iphone 5 okay and inside this we are going to have h2 tag with the class name f w hyphen bold then mb hyphen 2 and it will be uppercase so text uppercase and inside this h2 tag so we're gonna check so if you're in login page then we have to show the heading like login okay so if you click on sign up so this will become true so for now it will be login okay and this will be question mark and else we it will be the register so so rejecter will be false initially so that means we are in login page and if it's true that means we are in register page okay now let's format this one for now okay and we can check this one so let's go into the browser first so now you can see that we have got our card and we got our heading login after that we gonna have p tag with the class name text hyphen white 50 dot mb hyphen 4 okay and inside this again we have to check if you're in login page then we can give here live please enter your email and password okay else it means we are in register page so we can just give you like please enter user detail okay let's format this one now after this p tag we are going to have some input field so first i'm going to basically define for our login form so first i'm going to have two input field for our login form so i'm going to have one day here with the class name form outline and we are going to have one more class name form white mb hyphen 4 ok and inside this tip i am going to use mdb input component okay and type will be the text and after that name so name i'm going to give over here email and type let's also give email because it is the email input field and let's give here value so we have already defined the state for this one so it will be email i think we haven't destructure uh this all values so let's destructure from our form value so it will be first name last name email password and confirm password okay so email we have already used after that we're gonna having a on change method okay so let's give your handle change okay and let's define this method outside otherwise we will get error message let's keep continue working on our form component after that let's give here label so label will be email then we are going to have one class name form control form control hyphen lg okay let's save this one and we can verify this one whether we are able to see any input field or not so we got one input field here so for the other input field we can just copy this div okay let's copy this one and let's just change this one from email to password name will be password this will be also password let's give label password so we got to input field our login form you can see that here now we need button so after this div what we can do so here again we can check here like if so register is false that means it will become true that means we are in login page so we're gonna have button here so button with the class name here btn btn outline hyphen light then vtn hyphen lg and then px iphone 5 okay and this will having a login okay so value button will be the login and let's give type here button only okay and for else also we're gonna have that one so i'm just going to copy this one and i'm just going to paste it over here so this will be register okay so let's go into the browser now we have got our nice login button over here after that we have to give some kind of message like if you don't have any account then you have to basically click on sign up okay so this kind of message we have to give so let's keep that message below this login button so again what we can do over here so here we can have one div and inside this thing we are going to have h5 tag with the class name mb iphone 0 okay and here we can check if so register fall that means we are in login page and in that case we can check here like if you don't have account then you can basically click on sign up so we can give something like that message so you can give don't have an account okay so here we are going to have one p tag with the class name text white okay iphone 50 then fw hyphen bold and inside this p type we are going to have sign up okay and in the else part that means if you are in the register page so in that case we wanted to show a method like already have an account then please sign in something like that we can give message so here we can give the message like already have an account so have an account so let's put inside a fragment first so let's remove this one and here we can give like already have an account then you can basically directly login into our application so again i'm just going to copy this one and i'm going and i'm just going to paste it over here so it will be sign in okay and let's give some line styling here that is cursor pointer okay and here we are going to have one click method and it will be set to register so it will become now true so once you click on sign up so so register will become true and you will basically land on the register page so if you are already on register page and if you have already credentialed to log into application so you can also sign in so in that case we can just copy this one and we can just paste it over here and this will we have to make false okay let's save this one and let's verify this one in browser so let's go into the browser okay so you can see that we have got this one don't have an account and sign up but but this should be uh at bottom so let's fix that one so we did one small mistake so here after this button we're gonna close this div okay and let's remove one div okay let's save this one now let's go to the browser so now you can see that we have got this message like if you don't have it on then you can click on this sign up so if you click on sign up then this button value got changed and this heading also got changed and this message also got changed so in case of register we have to add three more input field that is first name last name and confirm password and if you click on sign in then you will basically navigate towards the login page okay so you can see that this is working so now let's work on this register form so let's go back to vs board so now we are going to work on our register form so we have to add three more input field for first name last name and confirm password so this field we have to show based on the so register flag so if it's true that means we are in resistor form so let's add those input field for our register form so we are going to use this same flag to add additional input field so here what i can do so here we can use that same so register flag so if it's true then i'm going to add two additional input field first here that is first name and last name so here i'm going to add those two input fields so i'm going to use your fragment first and i can just copy this to div okay let's copy this one and let's paste it over here so it will be text okay name will be the first name this will be first name this will be first name this will be text name will be the last name this will be last name and this will be last name and we are going to have one more input field for confirm password so that we gonna add after this password field so here again we can check if so register is true then we are going to show that confirm password so i can just copy this div let's paste it over here it will be also type password name let's give confirm password value will be confirmed password let's give level confirm password okay so let's first verify uh this input field in our browser so now you can see that we have got additional input field for the register and if you click on sign in then we will have only two input fields that is email and password if you click on sign up then we want to have first name last name email password and confirm password so this is all working so let's quickly work on this handle change as well so we have already defined this function outside this outside this return so here it's gonna receive an event and here we are using typescript so we have to give here event and it could be any and here we have to set the form value and we can just give like form value and here a dot target dot name e dot target dot value okay so let's save this one and let's see and let's see whether we are able to type in our input field or not so this is all working you can see that so we have completed our both login and register form here now we have to write logic to perform login and register functionality so first i am going to perform the login functionality so before that uh we have to configure uh articulate query in this application so let's do that one first so in order to perform login and register functionality in this application first we have to configure the rtk query okay so in this service folder we are going to have one file that is called auth api dot ts okay and inside this file we need to bring create api and phase base query from redux toolkit so we have to go to one more level that is query and react okay and from this we need to bring create api so with the help of create api we basically create a series of endpoint so in order to define the series of endpoint we have to use create api after that let's define here export call auth api create api and we have to define reducer path because we have to connect this service to our store so we have to specify a reducer path so i am going to give here auth api only and after this we have to give your base query inside that i am going to use phase based query and here we have to specify the base url so our base url is http ps test tool app dot hiroku app so we are using production api in this application so we are done with this base query after that we have to define endpoint so in this project we are just going to have two endpoint for login and register so let's define for login because this is the first functionality that we are going to perform in this application so here we have to write builder pattern and inside that we have to specify login user so first we are going to perform login operation and this will be builder dot mutation okay because we have to make a post request so we have to write here mutation if it is get request then we basically write builder dot query since here we have to pass email and password so we have to make a post request and in order to make post request we have to write mutation here okay so under this we're gonna have query okay and we are going to receive email and password in a body so email and it will be string let's define for password as well it will be also string so let's keep it small only okay after that we are going to return so url so we have to perform the login operation so it will be sign in method we have to specify method so it will be post request and we have to pass this entire body which contain email and password that we are going to receive from our component okay so let's format this one and after this so this basically uh exposed a new hook so what we can do export cons api and this login user basically export a new hook so it will be like use login user mutation so whatever the name you are going to give here it will generate according to that okay so we have login user so it's going to generate use login user mutation okay so based on the name provided over here so it's going to expose hook according to this name i hope it's clear for you so let's save this one and let's go to our store dot ts file and here what we can do so here we don't need this thunk action and action here we can bring auth api from our service folder so auth api we have to bring and we have to also bring a setup listener so what we can do over here we can just copy this one and we can paste it over here because we need to bring from the same path so it will be set up listener and inside reducer it will be auth api dot reducer path auth api dot reducer okay after that we're gonna need middleware as well so get default middleware and it will be get default middleware dot concur and we are going to contact this auth api middleware the auth api dot middleware and here we can remove this one so let's remove entire stuff and here we can just do setup listener and we can do store dot dispatch okay and the rest of the thing will stay as it is so let's save this file and first we can verify whether our rtk query is successfully configured or not in this application so let's go into the browser first refresh this one so we don't have any issue in this application after doing this rtk configuration in this application now here we can open our redux dev tool so you can see that we have successfully configured our rtk query in this application so you can see that we have over here auth api so this is the service that we have created in our vs code you can see that if you go back to vs code so in service folder we have auth api okay so this is the same auth api it's showing here so that means we have successfully configured artik query in this application so now we are going to perform login functionality in this application because our first endpoint is ready you can see that here and before we perform login functionality so we have to adjust this url so it will be uh users okay so let's make change this one and after that let's go to our pages or tsx file so on login button let's define one on click method first that will be handle login okay after that let's copy this one and let's define here and we have already write uh this service so we can bring this use login user mutation in our tsx file so let's bring that one so we need to go to service auth api and let's bring this use login user mutation and after that what we can do over here use login user mutation and here we're going to have login user because we have already defined this login user so this login user basically will accept email and password so after that we are going to restructure the property so those property will generate after the successful api request so it's gonna have data and you can also see all the property by just doing like control space so you are going to see all this property that is going to be d structure so we are not going to use all this property we just need data and we gonna need each success each error and error okay and we have to rename each property here because we are going to use one more mutation for a registration so in that case it will create a conflict so let's rename here so let's change to login data this will like is login success okay so i'm just renaming here if you're using only one mutation then no need to change this one but later we are going to use one more mutation for registration so we need to rename this one otherwise it will create an three conflict so each login error we can give here and this will be login error okay so let's forward this one so now you can see that we have renamed this one and in handle login we have to first check if user has provided both value into email and password fill then i am going to basically use this login user after this we have to basically convert this one i think of it let's use erasing and of it and here we can use login user and we have to pass in the object so let's pass email password and if user basically left any input field so in that case we wanted to show a notification so toast dot error and we can give a message like please fill all input filled okay after this what we have to do so we have to write one use effect okay so this huge effect will only run once each login success become true okay so if each login success become true then in that case first i wanted to show a notification like toast dot success we can give user login successfully and after that i wanted to navigate towards the dashboard page okay so so here we have bring this use navigate so let us store the reference of use navigating to a navigate variable let's save this one and i'm going to use here navigate so after successful login i wanted to navigate towards the dashboard page okay so for now we can test this one whether it's working or not so let's go into the browser and i'm going to open my network tab as well so for now just ignore this warning let's open network tab and i have already one user in my db so it will be john wick at the gmail.com and let's keep password so password is one two three four five six okay let's click on login we have initiated api request so now we got message like user login successfully and you can see that over here so we got this result and token so we have email name okay so in the dashboard we are just going to show the name so now we are going to work on this dashboard page because we have to show the name before we work on the dashboard we have to create a slide here so we have to store name and token in our reader toolkit state as well as we have to also store in the local storage so both place we have to store then only we will able to purchase the user in this application so we have to also purchase the user here as well so let's go to the vs board and first i am going to create a slice for our auth so inside this feature folder we are going to have one auth slice dot ts so here we need to bring create slides and payload action from our reader toolkit so from redux toolkit let's bring this create slice and payload action and we need to bring root state from our store so let's go to this app folder and let's go to store and we need to bring root state after that we have to define interface for our this auth state so port interface let's define path state here we're gonna having name string or null okay so we are going to store name and token in local storage string null then define the initial state support initial state auth state equal to object scale to object name will be null and token will be null initially okay because it is a initial state only after that we are going to create our slice so export cons or slice create slice and i'm going to give the slice name here or let's pass your initial state and then we are going to have reducer so we're gonna having a set user okay in which we are going to have state and action in which i am going to use your payload action and here i am going to use name it will be string and token it will be string okay and after this and this will be string not stringify sorry this will be string okay so first i'm going to store this name and token in our local storage so local storage dot set item let's give here key as a user and here we can use json dot stringify and we can pass here and we can pass name and token like this way so name action dot payload dot name same thing we will do for token as well action dot payload dot token okay so first format this one after this we are also going to store this name and token in our state as well so state dot name equal to action dot payload dot name okay and let's do for token as well so action dot payload dot token now below this first we are going to create a selector for selecting the estate okay so export cost select auth and here we can pass your state as a root state okay because we also need to use this name in our dashboard page so we have to basically define here selector and it will be state dot r so as of now we haven't registered this uh reducer in our store so we are going to register this reducer with the key or okay and this will be root state i guess okay so it is a rooted and let's remove this stringy file after this so you can see that we are getting one warning here because it doesn't exist on time so the warning will disappear once we register this reducer in our store now after this we have to export our action as well export cons and it will be our slice start action so we have a set user now export this auth slice as a reducer so export default auth slice dot reducer so slice nothing but here it is reducer okay now let's go to this store.ts file and here i am going to bring that auth reducer from that feature folder so let's go to this feature auth slice and i'm going to register this auth reducer with the key auth only so this is also set up now i think this warning should go away so now you can see that warning got disappeared after registering this reducer to our restore so now after that what we have to do so first we need to basically bring the use app dispatch so we have hooks here you can see that use app dispatch and use app selected so we are going to use this hooks to basically dispatch an action and we are going to use this hook to select state okay so let's bring this huge app dispatch so first i'm going to define a variable dispatch because we have to dispatch a action here set user so use app dispatch so vsport automatically suggest me this so it's going to import automatically for me so we have dispatch and now here we have to dispatch that one so we can dispatch we can dispatch like set user so it's going to again import automatically from our auth slide and here we can pass token so we need to pass token and name so token and name is available inside this data so we have renamed this data to login data so we can access like login data dot token same thing will go for name as well so if i open this one so we don't have that network request so let's go to this auth okay and i'm going to log in with john wick at the rate gmail.com let's login so you can see that we have token and name we have inside this result object okay so here what we can do so login data dot result dot name okay so we are passing this one and we have to pass this way okay so first we are passing name and token let's go to this odd slide so we are passing first name and token so let's maintain the order over here let's cut this one put it here remove extra comma now let's perform once again login operation so let's go to this again login page and it will be again john week at the red gmail.com one two three four five six let's click on login let's open this redux tab tool so we are dispatching set user action so you can see that we have one auth state here and we are storing name and token let's see whether we have successfully able to store our name and token in local storage or not so let's go to here application section so now here also we have successfully able to store name and token you can see that with the key user and we got this value so both places we have successfully able to store our name and token now we have to purchase this user as well so let's go to vs code so in order to purchase the user we have to go to this app.tsx file and here we have to do some changes so now here first we have to store the reference of use app dispatch into a dispatch variable so let's bring use app dispatch and first we need to bring that user so json dot parse so we have to pass whatever the value we have in our local storage so local storage dot get item so we have to check if we have this item so let's get that item so we have restored that name and token with the key user and if you don't have any key with this user so we have to provide this empty object otherwise it will throw an error because we are using typescript over here now after that what we have to do so we have to basically put in double quotes now after that what we have to do so we have to run one use effect so let's bring use effect from react and this use effect will run whenever our app gets mount okay so we can use your dispatch and set user we can pass your user okay we will verify this persist functionality later in this application so this way you can purchase the user in application now after that we have to work on our dashboard page so in dashboard we have to show name and logout button so let's work on this dashboard page so here in dashboard we have to bring that name after login so we can use here use app selector from our hooks and inside that we can pass select auth that we have defined in the feature folder okay so inside feature folder we have our slice and we have defined this select auth so we are basically accessing the state with the state dot or because this auth reducer register with auth key so let's go back to dashboard dot tsx file so now here we will get our name okay you can see that and we have to store the reference of use navigate into navigate variable as well so use navigate so this use navigate we have bring from react router dom now inside return let's remove this div and we are going to have section with the class name vh hyphen 100 and we are going to have gradient hyphen custom then we are going to have one div with the class name container p by hyphen 4 h 100 so what we can do here so it is the same card that we are using over here so we can just copy up to here okay so let's just copy this one and let's just paste it over here now we have to close every day so i think we have close so i think we have closed every div now inside this div we are going to have our h2 tag with the class name f w bold and it will be having one more class name mb hyphen 2 so you can give your like welcome to dashboard okay some kind of greeting message i am giving over here after that we are going to have s4 tag and in which i am going to show the name of that login person so name should be here after that we are going to have button with the class name btn btn outline light then we are going to have some class name btn hyphen lg and empty hyphen three okay then let's give type as well so it will be button only and value of the button will be the log out so let's go into the browser and now you can see that we have got live welcome to dashboard name john vic and we have got logout so after that we are going to perform the logout functionality in this application so let's perform the logout functionality so we have to go back to this auth slash.ts file and here what we have to do so here we have to write one more action so it is closing here i think so after this we are going to have one log out okay so log out action it will having just state and first we have to basically also clear this local storage so local storage dot clear and state dot name square to null state dot token is equal to null okay so this way user will able to log out from the application now let's go back to this dashboard.tsx file and here on button we have to specify one on click method we can have like handle logout let's define this under logout under log out so we can dispatch this one so so we have to display that logout function that we have created here so we have created this action but we never export here so first let's export here log out and then in dashboard.tsx file first we have to store the reference of huge app dispatch into a dispatch variable so let's bring use app dispatch as well and here first it will be like dispatch and let's bring the logout action from our off slice and we can give here message like toast dot success and we can give like user logout successfully okay and after that we wanted to basically navigate towards the auth page okay so let's save this file and let's see whether it's working or not so let's go back to browser refresh this one so you can see that user is also able to persist in this application after refreshing this application so now let's click on this logout so now user is successfully able to log out from our application so we can verify this one in dev tool so you can see that now in auth instead the name and token got null and let's verify here as well in our local storage so let's open devtool so here we have successfully able to remove that key user from our local storage so we have also implemented the logout functionality in this application so now next thing we are going to perform the signup functionality so we can able to add new user in this application so after successful registration user basically able to navigate towards the dashboard page so let's perform this signup functionality in this application so to perform the sign up functionality we have to start from this service folder so we have to go to this auth api.ts file and here we have to add one more endpoint so what we can do so we can just copy this one and we can just paste it over here because it will almost same so this will become register user and here we are going to receive first name okay and we are going to receive last name as well and we have to change this endpoint as well so it will be sign up and this will expose the new hook so we're gonna use here use register user mutation okay so whatever the name you are going to give over here it will expose a new hook based on this name so let's save this file and let's go to this auth dot tsx file so here again i'm going to use that mutation that use register user mutation so let's bring that one use register user mutation and i'm going to use over here only so use register user mutation and first we have this register user then we have to restructure all this thing so i can just copy this one i can just paste it over here and let's change this key so it will be registered data and this will be registered success this will be the register error and this will be registered error okay now on the register button we have to define one method that is handle register so let's copy this one let's use it here and again it will be a thing of it so let's keep here async only and first we have to check if password and confirm password is not match then we don't want it to register that user so we can just return like return post dot error and we can give here like password do not match okay after that if everything is correct and all value is provided into each field by user then then we can register that user so here we are checking if we have value in each input field password and email then we can use here like await and we can use register user so we can pass here like first name last name email password okay after successful registration we will get this each register success so we have to add this dependency here so i wanted to run this use effect if we able to register user successfully so again i can just copy this one it will be almost identical so here we are just checking is register success okay so this will be like a user register successfully let's change this message and it will be a register data okay and after successful registration i wanted to navigate towards the dashboard page so let's save this file and see whether we are able to register a new user or not in our application so first refresh this one let's click on sign up and i'm going to add a new user with the name here mark taylor we can give email here like mark one two three at the rate email.com let's keep password one two three four five six again one two three four five six and if password is not matched then it won't register so you will get this message like password do not match so let's give here the same password that we have in our password field now let's click on register so now you can see that we have got message like user registered successfully and after successful registration we are navigating towards this dashboard page and we got name here mark taylor now i also wanted to show the error message if you try to login with the wrong password or if you try to register with the same email so let's do that one so you can see that here we are bringing this each login error each register error so we can use one more use effect below this uh okay so this huge effect will run if you have any error while doing login or register so we can check here if we have any kind of error so is login error or is registered error so we can do like if is login error then we can use toast dot error and we can use here like login error as any dot data dot message same thing we will do for register as well so if you have any error while doing registration so we can do like this way so let's save this file and let's go into the browser first let's log out so we have logout successfully let's open network tab as well so now i'm going to log in with john wick but i'm going to give a wrong password here okay let's click on login so now you can see that we got so now you can see that we have got message like invalid credential from our backend so you can see that in request we are getting this message like invalid credential and if you try to log in with the email that is not exist so let's try to login with the email that doesn't exist and so in that case you will see the message like user does not exist so message will get changed based on user input so let's try to see the error message for registration as well so let's refresh this one and let's see the error message for a registration as well so let's click on sign up i'm going to just give your name like john john weep and let's use the same email so johnwick.gmail.com so this email is already registered okay so it won't allow to register with the same email so let's click on register so now you can see that we got message like user already exist okay so we have also read the error message that we are receiving from our backend so the next thing we have to do like suppose if you are able to log in so let's click on login okay so now we are logged in and if you click on logout and if you just change this route to dashboard so in that case we don't want it to see this dashboard page okay so if user is logged in then only we wanted to show this dashboard page unless we don't want it to show the dashboard page so we have to protect this route okay so this dashboard route need to protect so we have to create component for that to protect this route so what we have to do so let's go into the vs board so in component we have to create one file first so the component name will be like loading to redirect dot tsx and here let's generate a snippet first and here let's generate a snippet first after that let's bring use state and use effect okay and we have to also bring use navigate from react router dom and we need some component from our mdb react ui kit so mdb model mdb dialog okay model dialog and mdb model content so if user is not authorized and if you try to access dashboard page so we wanted to redirect user in five second so here we have to specify the value of count and set count use state it will be five let's store the reference of use navigate into a navigate variable then here first we can use a use effect here okay and we have to pass dependency here count so whenever count update i wanted to run this use effect again and you can also pass navigate here and here we can have interval so interval equal to set interval we can pass a callback function here and that will basically set the count so basically we are going to decrease the count okay after one second so we can decrease the value of count here and here we can pass 1000 millisecond which is equivalent to one second okay and after this we have to also unbound so if count is equal to zero then we basically wanted to navigate towards the earth okay after this let's work on this return part so let's say remove this one you're gonna have class name vh hyphen hundred again i'm going to give your gradient custom we are going to use your model mdb model and let's give show to true after this mdb model dialog which will be center and then we are going to have content mdb model content inside that i am going to use peter with the class name empty hyphen 3 we can give a message like redirecting you in so here you can give count value so this count value will get decrease every one second so let's save this one and here also we have to clear the interval so return clear interval and we can power this interval okay let's save this one and now we are going to have one more component for private route so private route dot psx let's generate snippet and here we are going to receive a children so we so basically we are going to receive a entire component as a children and here we are getting some warning you can see that so we have to also specify the type here so children could be any now after that we need token so you can use your use selector okay and we can pass here simply select auth and we can just check this one so let's remove this return and we can just write here return so we can check if we have the token then render that page that is dashboard page else we are going to show the loading to redirect component okay let's save this file and we can remove this one okay and let's go to this app.tsx file and here we can wrap our dashboard component with the private route okay so private route and now inside that we are going to have our dashboard okay so let's save this file and let's verify this one in browser so let's go to this auth okay and let's go to this dashboard so it is not working okay let me see so we did one small mistake over here so it we have to destruct the token like this way so let's save this file let's go to the browser so now you can see that we are getting this redirecting you in five seconds so if user is not authorized so you will get this message like redirecting you in five four three two one okay so you can see that we are getting this message so we have also protected our dashboard route as well in this application so only authorized user can access that dashboard page so we have implemented all the functionality in this application like login like login and registration we have also able to protect the route if user is not authorized so we have successfully able to implement the full authentication with the help of art kit query in react so thank you so much guys for watching this video please don't forget to subscribe this channel i will see you in next video till then good bye and take care

Channel: CodeWithVishal

Views: 36,554

Keywords: React JWT Authentication App using RTK Query, RTK Query Auth, auth app in react js, react authentication jwt with redux, rtk query authentication, rtk query jwt, rtk query typescript, rtk query redux toolkit, rtk query mutation, rtk query tutorial, auth in react js, react rtk query, login auth react js, login using rtk app in react js, rtk query redux, react js jwt authentication

Id: Icd-_K7KFrs

Length: 91min 41sec (5501 seconds)

Published: Mon May 09 2022