Add Auth & Protect Routes in React in 3 Minutes (Kinde)

all right let's say we have a react application and we want to add authentication to our app so here I have an example project I call it stock prices and let's say we have a private route here or one that should be private only logged in users should be able to access this and right now you can see everybody can access this so this is still public right so I'm using react feed here so routing does not come out of the box like in nextjs here we actually are using react router so we're also going to take a look at how we can create a protected route component so we want to add authentication to this react how can we do that well technically we could do it ourselves we can create and decode Json web tokens and we can store the user data in our own database we can do all of that ourselves but it's very difficult to do authentication properly yourself and when it comes to security and storing user data in general to do that properly it's very difficult so I'm going to use a thirdparty solution here called kind off they have a wonderful solution and I'm a brand ambassador for them so they are sponsoring this video but even if they weren't this is still what I would use they have a very generous free tier so check it out as soon as you get here in the dashboard you can set up an application that's what I'm going to do here I'm going to click on ADD application I'm going to call that stock prices I'm going to pick front end here because I'm using react feed here which is all client side right so if you have nextjs I have a separate video on that with K as well this is what you would pick all right so I'm going to click on the next one so then here we get the quick start I'm going to pick react here so where is the project running well actually I'm using react feed here by default it's actually port 5173 so I will change this into 5173 and then next step set call back URLs because the user is going to log in and sign up on a page hosted by kind when the user has logged in kind needs to know where to send the user back to all right so then we can install the kind package let's quickly install the package here all right that's done so then here we have the kind providers so this is similar to how you would do it yourself if you were using the context API to store the authentication information I'm going to go to my main. TSX file here and then here I can wrap my entire app with the kind provider right so I'm using react router here that's why I have router provider without react router you would have maybe app right just your app component you would wrap that in this kind provider we need to import this so I can just use this intelligence here you can see this is how I'm importing this right so in that quick start kind will automatically give you the right information here as well all right so then we've integrated kind now we can actually add sign up and sign in features so let's copy this and then let's say here on the H page we want to have that login and sign up button so that's very easy actually let's go to home here and right below here I can just paste this well of course I should actually put the import at the top and kind gives you this hook that you can use whenever you need some kind of information about the authentication status so here we have register and log in so I quickly added some classes here I'm using tailwind and I'm going to wrap them in in a div as well for the layout here so now we have those two buttons now if I click on let's say register or login let's see what happens if I click on register let's see I'm going to be redirected to a page hosted by kind now I haven't specified yet how a user should be able to log in or register right so then here after the quick start I can go to authentication here and here I can determine how the user should be able to log in passwordless with their own password right even phone I'm going to use GitHub here for now I'm going to save here all right so that was successfully saved I'm going to go back here refresh let's try it again I'm going to press on the register here and now you can see I have this continue with GitHub button I'm going to press that all right so then here it wants me to log in with my GitHub account all right so then after logging in with GitHub I'm redirected here because that's what I specified here as my redirect URI but it doesn't look like it right looks the same as before because we aren't really rendering any kind of UI depending on the authentication status so nothing has changed here yet but if we go to our dashboard here in kind kind will show you all of the users that have registered here and indeed you can see here a user has signed up with our application here so everything is working as expected so far but let's actually change the UI so we can actually see see if the user is logged in or not so let's say if the user is logged in we don't want to see these buttons instead we want to see some user information like their email their photo perhaps a log out button so here what we're going to have these buttons we're going to do some conditional rendering so we only want to see those buttons If the user is not authenticated so kind helps us out here and it will give us an is authenticated Boolean so then here we can wrap that entire div that holds the buttons in a check here so if the user is not authenticated we want to show those buttons right so that's what we we have here and then if the user is authenticated if the user is actually authenticated we want to show user information and kind gives us that here in this hook as well so it gives you an actual user object here which we can then use here to actually show some interesting information right so this is what I just added here so we have this user object it's a type kind user so if you want to see what you can use here you can use uh intelligence here you can see we get their email family name given name ID and a picture so you get five of those things out of the box and I'm using that right here right so your name their email we can use their picture and then I'm also just going to show you the entire object that you get here and now here we can actually also render a logout button we can use the log out function right so here if I scroll up we do need to get that from the hook as well log out and you can see there was actually a red squiggly line here with on click for register and login that's simply because of how this register and login are typed so if I actually just write it in the other format the red quickly lines are gone now if we go back you can see I'm logged in and it does indeed render the information that it actually got from GitHub right so I'm logged in with a GitHub account here this is the information that kind got from my GitHub account now I can log out as well so if I click on log out let's actually see what happens now you can see I'm logged out and we get our buttons here without the user information one other thing we may want to add here as well is a loading State because it may take some time before kind has gathered the actual information so here is loading is also something we can get so here initially the user may not be authenticated because kind is still figuring out if the user is authenticated or not so this this is only when the user is definitely not logged in so this is when it's not loading anymore and the user is not authenticated and in fact you may actually even do some loading state so here if it's loading we may just want to say loading dot dot dot all right so then for the uh bottom one here is authenticated we may actually also want to add it here just so everything is symmetrical so now I'm not logged in but I can still go to this dashboard so how do we now protect that actual dashboard route so we're going to create a custom protected route component so I'm I'm going to remove this dashboard route from here because what I'm going to do is I'm going to have the protected routes here at the top and I'm going to say here we're going to have an element this will be the protected route component we haven't created that yet but we'll do that in a second and then here this one has certain children you can see co-pilot already knows what I want to do here is when I want to have my private routes right so then here I'm going to have that dashboard so/ dashboard and then the dashboard component but before that gets rendered this protected route component is rendered so in here we can do a quick off check all right then I actually already created a protected route component here it's currently empty but this one will render before we try to render anything as a child here so in here we can do that off check so we can again use that hook from kind which will give us a bunch of things loading is authenticated so here actually initially if if it's still loading so if kind doesn't know yet we may actually just want to render a div that says loading now after loading so if it's not loading anymore so it's not loading and let's say the user is not authenticated right so then we need to make sure that the user does not get access so here we have to do something special right so here what you could do is for example just let the user know not authenticated and then below there we may actually want to render a button so that the user can actually log in right so here we can use that login function that we also got on the homepage we can call it right here when the user actually clicks the login button so that's when the user is not authenticated now if the user is actually authenticated so it's not loading anymore and the user is actually logged in is actually authenticated it we just want to render whatever the user wanted to see in the first place so in this case it would be the dashboard react router these days uses something called an outlet so if you go to the dashboard that's what will be rendered in that place I will quickly add some Styles here as well we need to make sure that we actually imported here as well all right so currently I'm not logged in now what happens is when I go to dashboard you can see we see not authenticated now if I click on log in we should see the login page and indeed we are redirected here to K's login page I can click on continue with GitHub and now I'm logged in you can see it's getting the data for me and that's what we have now now we should be able to go to the dashboard and you can see we see this is a private page with with secret data all right now what if we want to get data from our API with the token that we have now right so kind will give you an access token we can get that by using the get token function that we can get from the use kind off hook then when you need to fetch data from your API let's say we can call that function to get the actual access token and then whenever we make an API call we need to make sure it's included as part of the authorization header right so we say beer and then here you can add your access token so let's say you have a noj s Express API so here you have let's say API stocks then you can use the protect route middleware from kind to protect your API so then when there's an incoming request kind will make sure that the excess token that you send with it is actually valid so that only authenticated users can actually get access to the data so you may also want to take a look at the audience that you can set up in that token as well for that I recommend that you take a look at kind's documentation I'll leave the link in the description in any case thanks for watching hope this was helpful have a nice day and I hope to see you the next one bye

Channel: ByteGrad

Views: 13,152

Keywords:

Id: _EjOHdRihjA

Length: 9min 37sec (577 seconds)

Published: Tue Mar 12 2024