.NET Core Web API & JWT Token handling in React JS | React JS Authentication

this is our react.js authentication series part of this video Let Me Explain how to consume secure.net core Webb by passing JWT token for doing this implementation I am already having one creator.net core web AP application so here I am going to use this customer services so I am currently I'm getting this fortnite on error because it is a sec you don't be hard to pass the JWT token so we can check from the postman first my token type is B area so next we have to pass the JWT token for generating the token we have one service here if you are new to.net core web APA I have created the separate video that video link also I will share in this description how to watch it so let me take this JWT token see now it is returning the customer data okay the same service only I am going to use in our application here I listed out the steps the first we are going to consume the services the next I am going to pass this JWT token for passing the token beneath the JWT token right so that JWT token I will generate from our login function itself now let me go to our react application so the application I have used in my previous videos okay so in my previous videos I have explained how to do the registration and implementing this login functionality using Json server HTTP now we are moving into realtime.net core web APA So currently our login functionality implemented using Json server HTTP only in this home component after this has shown tag I am going to have one table okay here I have added this header the next one is T body for this tea body we are going to generate dynamically from our Dark Net core services first let me declare one use State variable customer list and the update method is list update so the default value should be null okay so next we can consume the services the steps are same only we have to use this fetch option then we have to pass our APA URL so once we got the response we are converting into Json format so in this section we can get the data so whatever data is coming let me include in this console and the final one is the error section so this is the very basic step for consuming any services in our react.js application so in our scenario we have to pass the JWT token right so let me declare one variable here so I am provided this empty value only so next I'm going to include one object here we can include this header so in this header we are going to pass this authorization so whatever steps we have followed in this Postman the same thing only here also we are we're going to use so my token type is the barrier so let me use the same thing here and on Space yes it's added so finally we have to pass this token also so let me generate the token once again because it is half the expiration time let me save this one we can verify see actually we are getting this data so that means we are just consuming the data from our dartnet core by BBA so next I am going to do two things one is so currently I'm having the value in the variable of customer list so I'm going to bind in our table and the second thing here I just hard coded this token so instead of that we can generate the token from our login method okay so first let me populate this table body so let me take this one we can use this map option so here we can include this key so key is nothing but the unique value so we can use this ID so next we can generate the TD okay so there are four columns so the first one is ID and other fields we can check from our services yeah name email and credit limit okay okay this is done and the initial stage we have this null value so before binding this data we have to check the null condition so if it is having the data only we are generating the for Loop and The Binding okay foreign but it is not binded so let me check this thing yeah the problem is like actually I have added into the console.log so let me use our function then only it will update our you state okay now it is fine see now so the data's are loaded fine okay so the next thing is instead of making the hard code value of jwd token so we can change our service in our login method let me log out this one so if I'm selecting this login page So currently I'm having one function for implementing this login so we can use the same thing otherwise let me create one duplicate function okay proceed login using AP let me change in our HTML also so here first we have to change this endpoint so let me go to my.net core services so actually this is the post method so first let me take this URL and let me remove this one so in this object first the method the method is the post method so the next one is header so in this header we can pass the content type application or Json so finally body so in this body we can pass our object okay so we can use this json.stringify so here we need to pass our object so first let me Define our object here okay so we have the format we can follow the same thing here so instead of this admin user we will get everything from over use state username and the same way we have the use status password now let me pass this object here so here let me command everything we can enable this console.log admin user admin see it is generating our token okay so now what we can do so let me include this JWT token into the session variable now let me command this one let me take this whole section so first we are providing the success message that is fine and in this session variable we are adding this username this one also fine now we are navigating into our dashboard the same way we have to include this our token also if you don't have any error we supposed to throw any error message so it will automatically comes to the catch okay now let me save this one JWT token is not defined oh this one fine so now the error got resolved now let me refresh the screen once again admin user and admin see it is logged in now we can check in this session here so see it is added as the new variable okay now we can use the same JWT token here so in our application I'm in this home page so instead of hard coding we can directly get from our session storage okay we can use the same key here also okay this is fine now I am going to clear everything right okay all the keys are automatically got removed even this local storage also we don't have nothing now let me log in once again admin user and admin so you know the datas are loaded so if I am checked in this application the new token should be added in our okay see it is included so okay now we are in the end of the video still if you have any doubter clarification please post in the comment box and also please don't forget to subscribe my channel so in our next video we can see one of the interesting topic please stay tuned for my next video thank you thanks for watching

Channel: Nihira Techiees

Views: 16,981

Keywords: react js full course, react for begginers, react js full tutorial, api handling in react js, React JS CRUD Operations using json server, react js routing with parameters, authentication in react js, react authentication using json server api, implementing registration functionality, react login & register using json server, how to pass jwt token in react js, how to consume .NET Core Web api in react js, react authentication using .NET Core Web api, JWT Token handling in react Js

Id: DPuQahfe7nw

Length: 15min 22sec (922 seconds)

Published: Mon Jan 09 2023