Auth0 authentication in Reactjs using OAuth2

okay guys so welcome back again so in this video let's see that how do we use r04 authentication inside our react applications though this can be used for any type of application like if you are building a mobile application then you can also use oth0 so it's a multi-purpose authentication provider that you can use inside many types of applications so basically os0 uses or2 for authentication and it is super simple to implement so without wasting any time let's see that how do we do it so here what we are going to do we are going to do two things firstly we are going to protect our front end react application and secondly we are also going to protect our backend that is our api that is running on node.js express though any kind of packet can be used it need not be an express application you can use any type of framework or any type of language which you are using so without wasting any time let's see that how do we implement it so firstly what you need to do is you need to click create an account here on r0 and then when you click on login you would be provided with this stuff that is you would be taken to this window where you need to create a tenant and in odd zero everything starts with that in it and this should be a unique identifier inside this odd0.com domain so here you can provide in your own domain name because i suppose that that is unique for r0 so here let's simply provide in a unique identifier for your application so let's simply call it yours truly 26 i suppose if we can use it so we see that we get a green check mark which means that we can use this tin it and then you need to select the region which is nearest to you so i'm selecting us here because none of them are nearest to me so let's simply click on create account and it would take a couple of seconds to create an account so let's wait for a couple of seconds and now we are inside the dashboard inside this tenant account that we just created that is yours truly 26. so now the first thing we need to do is to create an application so let's click on applications and then we select this applications tab so now it provides us with this default application but we are going to create our own application so let's click on create application and here we need to choose the type of application we are going to create so since we are going to use it inside our react application so let's simply choose this thing here that is single page web application so let's select this thing and then you need to provide in the name so let's provide in the name that is yours truly and this can be any name again so let's simply provide here yours truly uh 2607 this time 2607 and now let's simply click on create and now it will create this application and it provides you with a quick start to implement in the technology you are using for so i'm going to select here react so now let's go to the settings thing here and here we need to do a couple of things firstly we have this basic information we have the domain here that says yours truly26.us.0.com and basically this is the tenant here so yours truly 26 is a tenant name as you can see here that this is the tenant name and then we have the client id and then we have the client secret in case if you want you can provide in a description for the application logo you can provide in your own application logo but here let it be for now that is the odd0 logo here though you can simply provide a url to your image and that would be used as your application logo but i'm not doing it right now so i'm letting it be this thing here and then we need to fill in a couple of things here that is inside application uris we need to do a couple of things so since we are running our react application on localhost port 3000 so what we need to do we need to provide that url inside these callback urls so let's copy this url that is localhostport3000 and let me paste it here and then we also need to provide in the logout urls and basically log out urls means that is when the user logs out of your application where he should be taken to and i'm simply providing here localhostport3000 because i'm going to create a very simple react application which contains only a single page and then we have this thing here that is allowed web origins so since we are using localhost so let's simply paste it here that is localhostport3000 and then we can scroll down and we can simply click on save changes so let's simply click on save changes and that's all what you need to do inside this dashboard as of now to implement authentication inside your react application so let's go to our react application and let's see what we have here so currently we see that here we have the heading and here we have the ul or the unordered list so let's go back to our code and let's see that what actually we have inside here so here for this react application i've created this react application using the create react app package and just ignore this api folder as of now i would be coming to this in a moment and in this react application which i have created using the create react app package i've just simply removed all the unnecessary files so i've only kept these two files here that is index.js and app.js and the required css files so the first thing we need to do is to go to the index.js file and here what we need to do we need to install a dependency called odd0 or zero react so let's copy this dependency from here and let's install it and later on we would be also installing axios to query our api so let me install this dependency that is r0 like this and why not let's also install this axios library which we are going to require later on so let's also install this axios so let it install in a moment so now the dependency has been installed so let's simply start the application by doing npm start uh so so that it should be up and running so now let's minimize the terminal here so let's go back let's minimize the terminal and the application is up and running as you can see so the first thing we need to do is to go to our index.js file and we want to wrap our app component inside a provider that is provided by odd0 so let's do it here so let's import something from at zero react that is the library we installed and then what we want to extract here we want to simply extract here or zero provider simply like this and then we are going to wrap up app component inside this odd0 provider so we will say all zero provider like this and we are going to wrap this up component inside this odd0 provider and now inside this odd0 provider we need to provide in some props so the first prop we need to provide would be the domain and we would be filling that in a moment there should not be a comma here and then we need to provide in the client id this should be equal to something and then we need to provide in our redirect url so redirect url would be equal to something so firstly let's see that what all these things are that is domain client id and redirect uri so for the domain if we go back to our dashboard here that is the application dashboard we see that we have this domain here that is says yourstruly26.us.0.com so let's simply copy this domain from here and let's go here and here we can simply paste it now let's simply copy the client id from our dashboard and let's go back and let's simply paste in the client id here and now for the redirect uri what we are going to provide here we are simply going to provide here the window location.origin that is this thing here that is dot window.location.org so that's all what we need to do inside this index.js file so now let's go to this app.js file and here what we are going to do firstly we are going to remove this ul from here and here we would be using a hook that is exported from this dependency that is r0 react so let's import that hook from author 0 react and the hooks name is use auth0 and basically this hook that is use r0 provide us with many functions and variables that are state variables to be used inside our application that is it provides us with the login functionality it provides us with a logout functionality and many more such things so let's see it in action so const something equal to use r0 simply like this and we do not need to provide in any value here and here we have a couple of functions firstly we have this thing here that is login with popup we have login with redirect so as the name suggests of these functions that is if we use this function that is login with popup a pop-up window will open inside the browser and we can either sign up or either login and with this function that is login with redirect we would be redirected to a new page where we can do the same things that is login or sign up and then this hook also exports a logout function so let's use that also that is log out this hook also exports a user variable that contains the user if there is any user it also exports this variable that is authenticated whether the user is authenticated or not so let's save it and now we have these things here so to try all these things what i am going to do i am going to create a couple of buttons here so let me simply create a ul here and we have these lis and inside these allies i'm going to create a couple of buttons so the first button would be a login with pop-up simply like this and then let me simply copy and paste it here and this button should be login with the redirect because we are going to see different experiences with the pop-up and redirect and now let me again copy this button and paste it here and this should button should be log out like this so let's save this and now we need to handle the on click events on these buttons so for the first button we can simply say on click equal to login with popup on the second button we should say login with redirect and on the third button we should simply say log out simply like that and then we can also display whether the user is authenticated or not so for that we are going to use this variable that is authenticated so here let me simply provide in an h3 and here we can simply say that user is authenticated or not so we can use a jsx here so we can simply say if it's authenticated is true then we can simply say that user is logged in otherwise we can simply say user is not logged in so we can simply say not logged in simply like this and for the user that is the for the user object what we can do we can simply display it inside pretty tags so after the h3 let me write a pre tag here that is an html tag and here i'm going to simply style it that is texas a line to be start because otherwise otherwise it would be in the middle because of the default css provided by the create react app package and here i can simply json.use json.stringify that is json.stringify user commanl comma 2 like this so let's save this and let me remove this empty space from here like this and what more we can do we can only display these pre tags when the user is authenticated so what we can do we can simply write a j6 here and here we can simply say if is authenticated is true then only we want to display the pre tags that is this that so where are the ands yes like this so let's cut this bracket from here and let's paste it here so now it makes much more sense that is if it is if it is authenticated is true then only we are going to display this user inside these pre tags so let's save this uh let's see that if our application is running so it is up and running so let's go back to our application and here let's go back to our application so we see that we are getting this message that is let's reload so we see that we are getting this thing here and currently we see that we are getting this message that is user is not logged in and it is because is authenticated is false so firstly let's see that what happens if we click on login with redirect so let's click login with redirect so now we are taken to this page though this is the default page or the default ui provided by r0 though you can completely use your own ui for this stuff or you can use the built-in ui provided by odd0 which is highly customizable you can change the background color you can change the logo you can change the color of the button so on and so forth but i'm not going to do that in this video because it is very simple to do though i would tell you that how do you do all the stuff so now since we do not have an account so what we need to do we need to sign up so let's click on sign up so we are on this page that is sign up to yours truly 26 to continue to yours truly to 607 so this is the application we created that is the react application and this is the tenet which we created so let me provide an email address so let me simply provide abc at xyz.com so which is a false domain name or let me provide in a valid email address that is yours truly 2607 at gmail.com that is my email address and for the password let's simply provide here a password that is qwerty and if we have a look here we see that we get all this thing here that is we have a very secure password that is our password should contain at least each of these things so we need to provide we need to provide our password which should uh which should which should contain at least eight characters which should also have a lowercase letter which should also have uppercase numbers special characters so let me provide in a password like that which should satisfy all the details so now let's simply click on continue and now it asks us to authorize the app that is this app that is yours truly 2607 which is a react app is requesting access to your tenant account so basically since we are running on localhost so therefore we are getting this authorized app thing here but if you are running on an actual domain or which is not localhost then you shouldn't be getting this thing here and this is for a reason here because in all zero you can create two types of application one is the first party application and other is the third party application so i'm not going to talk about the third party application but i can talk about the first party application and all the application which we create here that is inside this dashboard they are all first party application but since local host port 3000 is not a verified application so therefore it displays us this authorization thing but in your real application you should not be getting this thing here so now let's simply click on accept and in the meanwhile what i have what we got if we open our email so let's go to gmail so we see here that we get a message or an email from this thing here that is verify your email so this is an auto generated message that is we need to verify our email and the verification link is this but we are not going to verify it as of now so let's go back to our application and let's see what we have here so we see that we get this thing here that is user is logged in because we signed up for the application and now we are logged in automatically and this is the user object which i was talking about that is we have the nickname that is extracted from the email itself then a gravatar is automatically generated so if we have a look at this gravitar so let's go to this graviton url so we see that this gravatar has been automatically generated by using the first two letters of your email and then we see that we have this thing also that is email verified so currently it is false but why not let's go to this verify email and let's click on this verify your account so let's click here and we see that we get this message that is email verified and if i reload the page i suppose we should be getting email verified to be true so we see that now we get this email verified to be true so now let's log out with this application so let's click on logout and now we see that we get this message that is user is not logged in so now we saw that how do we use login with redirect so now let's see that how do we use login with popup but for that i need to get off the full screen mode for login with pop-up to work correctly so now let's click on login with popup and now we get this pop-up so let's simply provide in the email address that is yours truly 2607 at gmail.com and password was something like this thing here let's press enter or let's continue and we would be seeing about this continue with google thing in a moment but let's simply continue and now we see that again we are logged in and we have this user object again so let's log out once again and now we have we are not logged in so let's click on login with pop-up once again and this time let's see that how does continue with google work so basically all zero by default provides you with developer keys for google so you can use those only for in development purposes so let's simply click on continue with google though for a real world application you need to provide in your client id and client secret to use google as a sign in method so now let's simply click on my account here and now if we click here we should be getting a message or authorization so we see that we need to click on accept though again in a first party application you should never be seeing this thing here so just don't worry about this thing so now let's simply click on accept and once we accept we get this object back that is this user object back and here we see that email is verified and it is coming from google and this is the auth id and then here we have the picture so if we go to this url we already have the picture of the user account so this is the image so this is how we use odd0 authentication on the front end but now let's see that how do we protect our express api using odd0 so that is pretty simple to do so let's go into the full screen mode once again and let's go back to our application so here what i've done again inside this folder that is inside the create react app package i've created this folder called api and in this api folder have created a very basic npm project or i've created a new npm project by doing npm init hyphen y and if we have a look at the package.json file it contains only two dependencies that is cores and express if you have a look at the server.js file we see that it is a very basic express server that is running our api so here at the top we have the express and then we initialize the express application then we simply use course because our express server is on port 4000 and we will be making requests from port 3000 so so we need to use cos here that is to allow cross origin request so that is why i'm using cores here and then we have only two routes that is the index route which simply sends back hello from index route and then we have this route that is hello from protected route so let's try to connect to this api or let's try to start this api and then we'll make a request from our front end that is a react application to this api so let's go through this package.json file once again so here we see here we have a script called start script which says node server.js or let's simply change it to node mod and we'll install this as a dev dependency in a moment so let's install it once again so let's stop the uh application that is the react application and now let's cd into the api folder and myvls here we need to install it here that is npmi nodemon and it should be hyphen iphone safe div to install it as a div dependency so let's save this and now let's go back to the root folder that is our react folder and now we have this start script so let's save this package.json file so okay so let's cross it and let's close this file don't save let's open the package.json once again so now we have our dev dependency called nodemon and now instead of this node let's change it to mall because we need to start a server many times as soon as we save the server.js file so let's save this package.json file so now let's go inside this package.json file of our root folder that has that is the create react app package and not the api folder one package.json file so i'm here inside this packet.json file and here what i've done is this that i've created one div dependency if we can see that is called concurrently so that we can run our react application and our api server at the very same time using this different dependency so if we have a look at the script here so we have this dev script which simply says concurrently npm start to start this script that is react script start and then we also want to cd into the api folder and we want to use npm start to start the api so we do not need this thing here so let's save this package.json file once again and let's try to install start this application once again by using npm run dev so let's simply press enter so this is the way concurrently works so we see that we have the server on port 4000 and something is already running on port 3000 so let's simply kill each and everything once again so let's simply use this thing here that is kill all hyphen 9 uh note so let's clear out and this time let's try once again that is npm run dev so now everything seems to work fine so the app is up and running i suppose so we have this react app and we are logged in so let's go back and we see that our api is also up and running so we see that we have this server on port 4000 that comes from this server.js file that is this file that is that is from here so now let's try to make a request or let's try to make our request to this api so let's go to our app.js file and here before the pre tags when after the user is authenticated i would like to have another ul and let's create two buttons here so button and it should say call api and let's copy this button once again and let's call call protected api route and this call api route that is this is not a protected api route and this is a protected api route so here what i'll do i'll create two functions here at the top so let's create function so function would be called api api like this and let's create one more function that says call protected api simply like this so let's go here and before doing anything we need to install axios or have we already installed so if we have a look at the dependency we have already installed axios here so we can directly make request so here inside the call api let's simply say axios dot get and here what do we want to get we simply want to get this local host port 3000 and the index route dot then and here we have the response and then we can simply console.log the response data that is response dot data like this and i'm not catching it as of now though you want you can and in this route let me simply copy it from here that is this axios dot get and here what i want to get i want to call this route that is protected route so let's simply copy this protected route and let me simply paste it here so let's save this thing from here and let me catch the error here is also so dot catch and here we have the error and here we can simply log in the errors that is console.log error dot message like this so we can do it like this this seems to be fine and let's also paste it here so since we are catching it at one place so why not let's catch it at both the places so now what we want to do we want to call this method function when we click on the upper button that is this button so let's have the on click event here so we have this on click event and here we can simply say call api and on this button click we want to call the protected api so on click equal to call protected api so let's save this and let's go back to our application so here let me log out because it doesn't matter as of now and let's right click and let's click on inspect and let's open the console here so let's click on this call api and we see that we are getting this message here and why is it so and that is because we have called the local host port 3000 and not 4000 because our server is done on port 4000 so it should be 4 000 and not 3 000 so let's call it like this so let's save this and let's go back and let's reload the page let's clear up the console let's call the api route and we see that we are getting this message that is hello from index route and if we click this button that is called protected api route we are also getting the message here that is call hello from protected road so let's log in back to our application so let's click on login with redirect so now let's simply provide in the email address that is yours truly 2607 and let me simply provide in the password here let's continue and we should be taken back to our application so now we are logged in so now to make to protect our api route what we need to do is to send a gwt token that is issued by this uh authentication service that is all zero and then we can verify that gwt token at the backend that is inside our api so how do we do it it is pretty simple to do so for that what we need to do we need to again go to our application details that is inside the dashboard and here inside this api section we need to create an api or we need to define an api though odd0 by default provides that with the management api but we are not going to touch it we are not going to use it we are going to create our own api so let's create our api here by clicking here and here we need to provide in the name of the api so let's simply provide here express api or whatever the api is used for and then we need to provide in the unique identifier for our api though typically you can simply provide in the url of your api but this can be any identifier like i'm not providing in the url here but i'm simply providing in the identifier like this is a unique identifier like this and we need to provide in the signing all of our algorithms so you can use hs or rs so i'm using rs 256 so let's click on create and if you are following along with me you should be using rs256 so let's click on create and now we have this thing here and i think we do not have to do anything inside this thing here but we need to do a couple of things inside our express application so let's go to our server.js file and let me stop the application here and what we need to install we need to install a couple of dependencies to verify the jwt coming from the client side and to get the jwt we'll be looking that in a moment but firstly let's implement the verification of the jwt or let's see that first or firstly let's see that how do we get the gwt so let's go to our js file and let's start the application once again so that you should know that how do we get the jwt so when we call the protected api route we need to get the jwt first and then only we can make a axios request so let me comment this axios thing from here and here what i'll do i'll use a function here that is get access token silently to get the access token and this access token is a jwt and this token would be verified on the on the back end so here inside this call protected api i can simply make this function async like this and then here i can simply say const token equal to await get access token silently and this function is exported by this hook itself and now what i'm going to do i'm simply going to lock this token inside the console so i can simply do console.log token like this so let's save this and let's see that if we are able to get the token so let's go back here so we are logged in so if i click here that is called protected api so it should get us to token inside the console so let's clear the console so let's click on call protected api so we see that we have this token here but as you see that this token doesn't makes any sense or it doesn't look like a jwt to get the jwt what we need to do we need to go to our index.js file so let's go back here and inside this index.js file inside the odd0 provider we need to provide here a couple of things firstly the api for which this token is used for and secondly we need to provide in the scope so to provide in the api for this which this token is used for we need to provide in an audience here like this and we'll fill in the blanks in a moment and we need to provide in scopes here so scope would be equal to something and typically here we need to provide an open id and i will tell you what each means so open id profile and email so basically this open id informs the odd0 authorization server that the client is making open id connect request that is oidc request to verify the user's identity and this scope that is profile basically request the server to provide us the profile information such as the name the nickname and the picture and email simply means to provide the email and the email is verified or not and in this audience tab what we need to provide we need to go back to our dashboard here and here we need to provide in this unique identifier so let's copy this unique identifier and let's go back and let's paste it here inside the audience tab or audience prop so let's save this and now let's go back to our application here and let's reload the page so now we should be logged in or we are logged out so we see that we are not logged in right now so we need to log in again so let's click on login with redirect so let's click on accept and now you will see that since we provided in those scopes that is open id profile and email so therefore we are getting this message that is authorized app so now we sim we can simply click on accept so let's click on accept and now we are logged in and now if we click on call protected api route so we should be getting the access token that is our jwt so let's click on call protected route so now we see that this time we get the access token which is an actual gwd so now when we call this protected api route we need to send this token along in the request as the authorization header so we can do that very easily so let's go back to our application and let's go to our app.js file and here before making our request what we can do we can simply say uh cost a response equal to a weight since we are using async function so we can use a weight with axior so we can say await axios dot get and here we can provide in the same url that is the protected url and let me paste it here like this and then we need to provide in some configuration here so let's provide in the headers here that are which headers are being sent with this request and here we need to provide in the authorization header like this and since this contains the bearer token so the format is like this that is we have to write bearer space and then the token itself that is this jwt which we get silently from the all zero hook like this so this is all what we need to do and then we have the response here and then what we can do we can simply log in the response data as is coming from the client uh backend that is console.log response.data and since we are using async and await so it would fail sometime so we should wrap it inside a try catch block like this so let's wrap everything inside try and catch like this and we can get rid of this call here that is the axios call so let's save this and if there is an error we can simply log in the error also so just to see that what the error is so we can simply say error dot message simply like this so let's save this and now let's go back to our server.js file so now we need to extract that bearer token inside our application and then we need to verify that access token and only if that access token is verified then only we want to call this protected route so for that what we can do we can create a middleware to be used inside our application but before doing so we need to install a couple of dependencies to verify the token so let me stop the server here and let's cd into the api folder let's try it out and let's install these dependencies that is express hyphen jwt and it simply extracts the token automatically from the bearer header or the authorization header as the bearer token and then we are going to use this dependency that is called jw ks rsa and it simply uses the json web key sets to provide in the secret for the token verification and then we also need to install this axios library to get the user details or the user information from the access token so let's install these dependencies so so what we have done here so we need to do npmi not simply like that so let's install it and let's wait for a couple of seconds and it would take a bit of code to do it so now everything is installed so let's go back to the root folder and let's simply do npm start to start or npm run div to simply run both the services that is the front end and the back end so now let's go here inside our server.js file so let's go to our server.js file and here firstly what i am going to do i am going to require this these things that are these dependencies that is cos gwt equal to require express jwt and then we need to require jw ks so jwk is equal to require gw ks rsa and then we also require this axios because sooner or later we are going to need that also so require axios like this so now let's create our middleware here so here what we can say we can create a material like this that is const verify jwt equal to jwt and here we need to provide in some options so the first option would be the secret the secret we can get from the jwks thing so jw ks thing dot express jwt secret like this and here we are going to provide in the options but we are going to do that in a moment secondly what we need to provide here is the audience for the token so here we can say audience like this and audience would come from this thing here that is from your api details so this is the this identifier is the audience so let's copy it and the same identifier we used here on the front end inside our or zero provider that is the sort zero provider that is this audience is same as this thing here so let's provide this thing here and then we need to provide in the issuer for this token so issuer would be something and then we need to provide an algorithm used so algorithm like this so to provide in the algorithm if we go back to our api details that is the express api details we know that we are using this rs256 algorithm so let's copy this algorithm from there and let's simply paste it here and the issuer would be alternate and in our case it would be like it should be like yours truly 26 dot uh let me show it to you that where is it in it so if we click on the quick start here and if we scroll down and if we click on node.js we see that here is the default values which should be provided by your application so here we see that here we have the issuer so let's simply copy this issuer from here and let's go back and let's paste it and now let's come to this thing here that is express jwt options and here we need to provide in a couple of thing that is cache to be true and then rate limit to be true jw case requests per minute so let's provide in jkwks request per minute should be five and jw ks uri would be something and how i know i need to provide these values if we have a look at the documentation so there they have used these values as well so now what we can do we can simply copy this thing from here and let's paste this jwk as uri and we see that we have this uri and basically this pro points to our tenet which we created at the very first time when we started this application that is yours truly 26 was the tenet name and then there is a folder there called well known and there we have the json web key set so this is how it works so now let's save this so now let's use this verify jwt as a middleware so let's simply say app dot use verify jwt like this so let's save this everything seems to work fine and if we go to our application react app and if we click here that is called protected api route we see that we are getting a message back from hello protected route and what more we can do if we go down here that is uh or let's let me show you one more thing let's log out from the application and let's try to make a request to that route so if we call that route that is called protected api route we see that we are getting this message here that is login is required and if we call the api route thing here we see that request field with status quo 401 that is unauthorized so how are we getting these messages and it is because we are verifying the json web token before we are sending back the response from the server that is from this server so what more we can do we can provide here routes we do not need authentication very simply inside this verified gwt middleware so what we can do here we can simply say dot unless and here we can provide in the paths that that means that for these parts the verification or the middleware should not be used so if we save this we see that we are on support for we see that the server restarted and if we go back to our application and if we call this api route we see that we are getting this message that is hello from index route but if we call this route that is called protected api route we are getting this message login required and this is directly thrown by this thing here that is if we go to our app.js file that message which we saw is directly called by this thing here because we are not able to get the access token so we are getting that message that is login required so what more we can do we can make a generic error handler inside our server.js file and here we can simply say app.use and here we can simply say error dot request comma response comma next and then we can simply send back the response dot status would be equal to something and then we can simply send back the message itself and we can create those variables here that is status would be equal to error dot status or we can simply throw a generic 5w error and const message equal to error dot message or we can simply throw a generic message that is internal server error so internal server error like this and then we can simply send back these things here that is status and then we can simply send back message like this so this is a proper way to handle the errors inside your server.js file and here we can use a 404 route also so here we can simply say request comma response command next and here we can simply say const error equal to new error not found error dot status equal to 404 and here we can simply say next with the error as the only parameter so this makes much more sense and it's better so now this is a complete full-blown application so if we go back and this time our application won't crash as it was happening before so let's go back and let's call the api route or call the protected route so we get this message that is login required and if we call the api route we get the this message that is hello from index route so let's try to make one more route here that is also protected so app.get or let me simply copy this route from here that is this protected route and we'll change the url so let's copy it and let's paste it here and let's simply change it to two so let's save this and now let's go to this app.js and let's try to call that route that is called protected 2 which is called without sending the axios without sending the bearer header so this should not throw an error so let's go back and now let's call the api route and we are getting this message that is request field with status quo 401 and if we have a look here that the application didn't crash that is the server then crashed so this is how we should handle it so let's remove this let's go to our server.js so let's remove this so this is how we protect our api and our front end so this is how easy it was using r0 for using as an authentication provider for your application and it was super simple to implement and there is one more last thing that is how do we get the user details on the server side so if we call this protected api route we see that we are getting this thing here so let's simply log in again with redirect so let me quickly do it and let me fast forward it so now we are logged in and if we call this projected api route we are getting this message but let's go back and let's have a look at what we have inside this thing here so let's go to the server.js file and inside this protected route what we want to get we want to get the user info from this json web token that is the access token so if we console.log here something that is or let me simply send back here that is request.user instead of this thing here request.user so basically what this middleware does is that that whatever the payload is is it attaches that payload as the request.userobject so that is what i am sending back here to the client that is to the front end so let's go back and now let me call this protected api route and this time we see that we are getting this array back that comes from request.user but this object does not contain any resource for information for the server that is if we simply log here that is console.log request.user and if we save this and if we again make a request here called protected api route we see that we have this thing here inside the user object but this doesn't make any sense to the server but we want to have but what we want to have here is the actual details of the user that is their email their name their nickname their profile image so how do we do it or how do we get those values so it is very simple to do firstly we need to extract the jwt from the header so what we can say we can simply say access token equal to request dot headers dot authorization header and then we need to split the authorization header with a space and then we need to have the first value that is 0 was bearer and the first one was the token and if you don't know what this means if we have a look at the app.js file when we are sending the authorization header so we have this bearer token as one string and it has a space in between so what we are doing here is that that we are getting the request header and then we are targeting this authorization header and then from that string which is contained inside this authorization header is this string and then we are splitting this string with the space in between and then we are taking only this token thing here so now we have this access token here so that is what we have done here and now what we need to do we need to make a request to get the user info so how do we do that so it is pretty simple so we can simply say const user info equal to axios so since i'm using axios so i need to make it async like this and then we also need to use try catch so let the catching be at the very bottom and if there is an error we can simply send back the error that is send error dot message like that and now we can simply use await axios dot get and here we need to get something and from where do we want to get we can get the user info from our tenant so this is the url of our tenant that is this is the issuer so let's copy this url let's paste it here and then we need to call this url that is user info not user info but user info and here we also need to pass in the header which is again the authorization header containing this access token so again we need to do the same thing we need to provide in the header and then we need to provide in the authorization header and here we again need to provide in the token as a bearer token so here we can simply say bearer dollar access token simply like this and now we have the user info or we have the response here not the user info so it should be called response and then we can get the user intro from this response we can say const user info equal to response dot data like this and we can log it inside the console as well so console.log user info and then we can also send back the user info here so we can simply say user info like this so let's save this and if we go back and if we call this protected route again and if we clear out the console so let's call this protected api route and this time we see that we have all the user info here we have the email email verified name nickname picture subscriber id updated ad and if we go back here we also see that we have all the required things coming from the user info thing though what you can do inside your application you can again create a middleware so you do not have to get the user info in each and every route you can simply create a middleware to get the user info and then you can simply attach the user object inside the request.user thing instead of the default request.user coming from this thing so this is how we get the user info server side so i guess that this is all about this application or this video so if you like the video do hit the like button if you haven't subscribed to the channel do subscribe to the channel and if you want to support me you can support me on patreon.com or you can paypal me so thank you bye tata take care and have a good day and have a great day

Channel: yoursTRULY

Views: 7,116

Rating: 4.931818 out of 5

Keywords: Yourstruly, how to authenticate reactjs application, authentication in reactjs, reactjs authentication using auth0, how to use auth0, what is jwks, what is json web key sets, jwt verification using jwks, how to use auth0 in reactjs, how to use auth0 in nodejs

Id: GGGjnBkN8xk

Length: 48min 19sec (2899 seconds)

Published: Sat Mar 27 2021