Next.js 14+ Authentication with Kinde - Login | Sign Up | Routes Protection | Middlewares

hi guys welcome back to another video on NEX js14 in this video I'm going to be talking about this awesome new library for authentication for your web applications whether you are building react App nextjs application so in this video I'm surely going to be talking about the latest version of nextjs which is 14 it is a new player in the race of authentication libraries but it provides a lot of different options and flexibility that you would need to integrate in your applications and uh you can see that it gives us a lot of options to manage different kinds of users subscribers organizations and it is supported by a lot of big companies so this is the app which I'm going to be build I'm not going to be focusing on too much UI but more of that I will be focusing on the features so this is the Home Route uh which is public when I will be logged in I will not be able to navigate back to the homepage and this is the dashboard page if I click on it I will not be able to navigate to it because I have protected it because I not logged in so I'm going to show you how we can protect our routes on client components on server components protecting the apis and protecting the routes from the middlewares which are required to implement and complete the authentication system so I will also be showing you how you can enable two Factor authentication using kind and a lot of other features in this particular video so this is the logged in kind application that uh I have I've already signed up to the kind and you can see that we can manage a lot of users over here which are logged in we can manage subscribers access request we can manage organization we can also customize the design of the signin page sign up Pages forget password two Factor authentication we can manage billing obviously the pro Varian of kind provides more features but free varion also gives us a lot of flexibility to manage a lot of things about the Authentication and we can have the settings for multiple things so let's get started and I'm going to be creating a new next js14 project so let's go ahead I've opened up vs code so npx create next app at latest Dot and uh I'm going to go with typescript ESL tnd CSS Source directory no yes app router no for Alias all right so meanwhile it is actually creating a new nextjs 14 project I'm going to show you that I've already created multiple videos on nextjs 14 as well as nextjs 13 using App directory and about authentication I've already created videos on authentication with clerk complete login sign up forget password features in next gs14 I've created videos on next o as well registration forget password login storing the data in mongod DP and along with that I've created a lot of other videos as well so if you want to learn next js14 using App directory my channel includes more than 50 videos on NEX gs14 using App directory so you can learn pretty much everything about nextjs from my channel so you can see I'm putting a lot of effort building these videos for you guys it's just a request you guys to subscribe my channel and like my video so let's get started still creating a new nextjs 14 project so let's wait for it all right so project is created now I'm going to go to the app directory layout and uh I'm going to modifi it but before that I'm going to create a new folder over here components and quickly I'm going to create a Navar so let's create a new component and I'm going to name it navb bar. TSX I'm using the extension to create this navbar okay uh before writing anything inside it let's go to the global. scss I'm going to remove all of these Styles uh keep keeping only these three lines and uh I'm going to go and remove everything inside it okay so rather than doing this I'm going to be writing the home in fact let's add H1 class name and text for Exel and then home okay let's give it a class to bring it in the center so Flex item Center just Center and margin top 24 all right so let's close this particular file for now and uh I'm going to come over here in the nav bar and I'm going to create the nav bar uh so this is what I have created let's go to the layout and uh I'm going to go and wrap it inside the dev and here I'm going to bring in the Navar like this which I've just created and move the children inside the div as well above these children I hope you have an understanding how these files Works uh if not check out my crash course on nextjs 13 using App directory to learn each and every step of nextjs um now let's give it few classes quickly uh to this particular Dev uh it would be bringing everything at the center so I'm going to give it a class name which is going to be the max use 6xl and then Max Auto MX Auto actually this is going to bring everything at the center and then height is going to be 100 VH it's going to f the height now uh that's pretty much it we need to do in this particular layout file I believe so let's close it now let's start writing the Navar first of all so I'll start off with this div let's give it a class quickly I'm going to give it the Border bottom and then I'm going to give it height 8 VH Flex items Center all right so inside this div I'm going to be creating another Dev and this div is going to first of all uh take the link from next link this is going to go this is the this is going to be the logo okay so this is the link and inside this link let's create an H1 and I'm going to give it a logo text you can add an image as well but that is not the purpose of this video I don't want to waste my time for this kinds of things so font bold text 3XL this is what I have given and for this particular div let's give it a class as well so let's give it the container uh Flex items Center justify between okay let's save it and actually I'm going to make it nav for SEO purpose okay so after this I'm going to create another Dev for the right hand side items on the nav bar okay so below this I can have let me copy this link let's paste it over here and this is going to go to the dashboard which is the route which I yet need to create uh and I'm going to make it uh protected uh this dashboard route uh when and only able to navigate to it when user is logged in using kind authentication system which I've just shown you so I'm going to change its text to dashboard let's change some classes for this H1 and this is going to be the text Excel text uh you can give any text to text blue 600 and we can give the hover as well text blue 900 okay so this is what I have done uh link and then this we can have a class as well here so Flex items Center and then for each item I'm going to give Gap five okay uh let me quickly run it and see how it's looking currently to verify if there isn't anything wrong up till now uh so let's refresh it still running the old uh app which I've already created so let's refresh yes so it is refreshed So currently you can see that this is the Navar and this is the dashboard we have just created and this is the homepage which we are rendering by default over here this is looking good uh let's quickly create more links over here I'm going to copy this link and I'm going to paste it let's change from dashboard to profile and uh this is going to be the profile okay so uh that's it now let's copy it again and I'm going to change its text to anything you can give it anything settings let's give these are all the routes which I yet need to create I will be protecting these routes from different methods to show you how the kind authentication system works this is from the server side component this is from client side component this is maybe from the middle wees yeah so now um I need to create a log out URLs as well uh but uh I'm not going to create those as of now um um I also want to create one div this is for the sign in and the sign up buttons okay so this particular Dev is going to take two buttons one is sign in and other is the sign up so div class name Flex items Center and then Gap X5 okay this div is going to take couple of buttons so button this is going to be the sign in and uh let's give it a class as well before copying and pasting it for sign up so this is going to have a width of 100 pixels uh this is going to have a gray 100 maybe let's give it a 200 padding is going to be two rounded uh let's have some rounded border uh text Center okay and uh now I'm just going to copy it and paste it below and I'm going to change it to uh sign up maybe register whatever you want okay so this how it's looking you can see that it's showing the profile sign in and the sign up buttons this is looking great uh now uh what I'm going to do is I'm going to go this particular link uh I'm going to share this link this is the documentation of kind for integrating uh authentication system in nextjs using App router okay so we are going to follow this part particular thing um uh it gives us most of the things but some of some some things uh are missings in this document which I'm going to show you in this video so again if you are liking this video do subscribe my channel and like this video as well so let's get started first of all what we need to do is we need to install this particular package in our project so let's copy this let's come back and I'm going to run it in the terminal hit enter so it is installed before moving further and writing anything over here let's go to this particular link kind.com and what you need to do is to sign up with your account in this Library okay on its website kind.com once you are signed up I'm already signed up uh so initially I'm already having few businesses for my testing purpose uh initially it will ask you to create a new business okay so we are going to create a new business uh I'm going to go over here uh these are the couple of businesses I've already created I'm going to add a new business okay you might have a different UI at the start when you will sign up with your new account so I'm going to write next 14 o this is the name I've given to it and uh we can give anything over here region uh nearest region maybe so I'm going to go with the Ireland uh let's go with 1 to 10 um let's click on the save Okay so next uh it's going to ask us few more things so this is what uh is already created so I'm going to click on it uh in order to navigate to this particular business which we have just created so it's going to take us to the next page now all right so it is asking us if we have a project already created or we want to start from scratch we have already project have in our system the nextjs 14 so click on it cck click on next and then uh I hope it's going to show yeah so it's going to show us these Technologies we can integrate kind authentication with all of these different Technologies we have this nextjs so we are going to go with it nextjs and next uh it's going to give us this page and here we can select the different authentication providers which we want it to be used this is the kind of UI that is going to be shown by default uh I'm going to go with the login with Google you can see that this is the UI it is showing let's click on show all and we can enable other providers as well so I'm going to click on the GitHub uh you can enable gitlab uh so many things over here all right for now for testing I'm just going to go with the Google and the GitHub so these are the things we can later on uh from the settings select as well so click on the next and uh after this over project is going to be created so it is giving us some options to connect our user kit we are going to go with the connect and this is the page it's going to take us to uh this is something which we have already installed and uh this is what it is asking us to create we need to create EnV file and we need to copy paste these things okay so let's copy this and I'm going to create a new EnV file and I'm going to paste it over here first of all it's always a good practice to move EnV file inside the git ignore all right so these are already added it's not required to just add the dashboard but uh since we will be creating all the private routes inside the dashboard route uh that's why it has by default added you can change it uh let's leave it like this leave it like this this is the name of your business uh this is the secret that uh it has copied and we can verify the secret as well uh by going to uh the settings as well but it has already hidden until copied yeah it it must be successfully copied the correct ID so this is the file which we need to create yet route. TS in the same directory within the app folder so I'm just going to copy this much part and I'm going to go and first of all I'm going to create uh this one hit enter so this is what it has created API Au and inside it we need to to create route. TS is this the file let me verify yes route. JS we are using typescript so I've written TS file I need to copy this let's go and let's paste it uh make sure it is not showing any error you must be have installed this package in using npmi let's save the EnV file as well over here uh let's close it and uh for this o there is nothing else we need to add okay let's go over here and we can add these sign in sign up buttons uh which we have already added all right uh before moving further let's go to the details um so these are all the different details we can copy the client ID and client secret from here as well um and our documentation must be showing you can see it is showing these icons uh the same steps it is suggesting uh for authentication it is suggesting in these things which we have uh already done um so let's go over here and uh if we want to use our own signin signup screen we can click on that but uh for now we are going to use the pre-built uh UI so let's save it uh we can um navigate to this authentication and we can click on the password list authentication with password or with the phone so it's up to you I'm going to go with the default passwordless authentication and we can add more connections as well currently uh I have enabled GitHub and Google we can add more from here uh we can copy some tokens we can change different values I'm going to go to the API and one important thing let's go back to the home let's go to the design and here you can upload your own design for your particular business for light theme for Dark theme for svgs um for theme a user preference is automatically going to pick up the uh system setting settings if it is dark theme it is going to show the Dark theme sign in sign up Pages otherwise uh for now I'm not having any theming preference so I'm going to go with the default light um and yes uh we can we can go with that and we can see different pag is what it's going to show it look like uh over here all right let's go one more thing I'm going to go to the settings and uh I'm going to go to the details and here uh it is showing a show kind branding on the signin sign up page I'm using a free version of kind if you are on the pro verion you can disable the kind branding and you can have your own branding for the authentication Pages otherwise on the free verion it will still keep on showing the kind branding okay and let's go to the multiactor authentication and here we can enable multiactor authentication optional I'm going to go with the optional uh uh whenever user try to sign in we are going to ask him whether that they want to enable multiactor authentication we can enable that and we can enable uh email authentications SMS so I'm going to enable all of these it's up to the user what he wants okay so let's save it uh so that's pretty much it next time when you need to make some changes you can go to the settings and then the uh applications and uh go to the view details um yeah here this is the same page which I was showing you before for okay these are the details so that's it I'm going to go back and uh let's come over here uh why is it showing s let's remove it and now I'm going to use uh this particular documentation so now we need to use register and the login link so let's come back this is where we have created our register so Above This these buttons I'm going going to use built-in packages that it is providing register link and login link so let's come over here let me copy this line and let's go and paste over here for the register Link login link and also I will be giving up the log out link as well and along with that I'm also going to import Bo get kind server session from this okay let me remove these s curly braces now let's come down and I'm going to wrap this button with the login link which I have just imported okay so let's remove it let's paste it and I'm going going to also add the register link here all right so now that's it we are now going to verify if it's working let's run the project and uh by clicking on this particular button it should navigate to us as to a particular login page so let's refresh this page uh Local Host colum 3000 yes it's working fine let's click on the sign in now and uh yes so it's so quick in few minutes we are able to login and uh we can actually sign up we can log in uh we can click on the continue with Google continue with GitHub but before testing it uh I want to show you that after login where I want it to be navigate to so let's say that after login I have the D dashboard route which I want it to be navigate to because I want to protect my home route um when I'm logged in I should not be able to navigate to The Landing Page the homepage okay uh so let me quickly create a new folder this is going to be the dashboard and inside the dashboard folder I'm going to be creating page. TSX and let's create that and inside it I'm going to be adding this particular UI after login I will be navigating to this page let's change it to the dashboard page like this and you might be wondering I've just copy pasted it from my notes I hope you can understand this simple uh elements um again here I'm going to import get kind server session from the same package okay so what it does is we can get the logged in user information and also check if the user is logged in or not simple is that so get user from get kind server session and then cost user equals to A wait get user all right and also when we are using a weit we need to write async and that's it the logged in user will be automatically navigated to the dashboard route and from the dashboard route it is going to show this particular text along with the name of the logged in user whether it's the Google login username or the GitHub login username but in order to automatically navigate to the dashboard route after successful login it gives us few properties and this is post login redirect URL and this is going to be the dashboard that we have just created and we can give it to the register as well okay so this is what I I have given to it all right so let's go back let's uh refresh now and uh I'm going to go to the sign in and I will try to log in with the GitHub here and let's see what happens uh it should automatically so by default it is not finding my GitHub account so it is asking whether I want to create a new user with this GitHub account or not so I'm going to click on the create account okay and again if you remember I enabled these three things we can enable two Factor authentication uh for now I will not be enabling it so let's click on don't use multiactor authentication so I've have clicked on that so currently you can see that it has given us uh this error so module not found this particular module is not found let's see what happened here uh so this kind of uh is this on this file dashboard okay so but it has navigated to the dashboard by default so it means over this part is successfully worked and we are logged in um now let's go over here and let's see so kind OS can o nextjs actually it is not D types it is only SLS server at the end all right now you can see that it is showing hi um this is your dashboard I'm successfully able to log in uh to login uh and how can I check it's still showing sign in sign up which I need to manage but it is showing Omare it means that I'm logged in that's why it is able to get the data of the user so here I'm going to also update this particular thing and I'm going to use uh the same couple of lines which I have used here let me close it and I'm going to paste it over here uh and along with get user we can have a lot more properties as well like is authenticated or not okay uh and we can we need to write async over here all right so now I'm going to show the sign up now here I'm going to check if the user is uh logged in or not uh so here I can write a weit is authenticated like this question mark and this and after this we can actually wrap it like this over here all right so inside it I'm going to show the log out button so I'm just going to copy this part and I'm going to paste it and change it to the log out and wrap it to the log out link which we have imported above for log out I don't need to write this okay and uh yeah so let's see if it is showing log out yes it's showing log out let's try to click on the log out and yes I'm successfully able to log out uh and uh I if I'm able to navigate to dash yes still I'm able to navigate to the dashboard which I need to protect yet but it is not showing the name which also means that I'm not logged in so um now I'm going to do two things uh when I'm logged in protect the Home Route and when I am not logged in protect the dashboard route so let's come back to over here and uh let's go to this page. TSX and here we can check if the user is logged in or not uh then if logged in then we are navigate it to the dashboard page because we want to protect over Home Route if user is logged in okay so let's go over here let's copy this particular line and I'm going to import it over here and uh I'm also going to import the redirect package uh from the next uh this is I think redirect next navigation yeah this one and here uh I'm also going to do the same things again so is authenticated from here and if a weight is authenticated then I'm going to redirect it to the dashboard okay uh also let's add the a sync link over here all right so we have made our home Road protected if user is logged in then we are automatically navigating it to the dashboard page um so now uh also I need to protect dashboard route if user is not logged in so I can have multiple routes within the dashboard folder dashboard can have analytics settings profile and a lot of other data so rather than um protecting writing these things in every route every child route of the dashboard I'm going to be creating a new layout. TSX which is the layout for the dashboard only and inside this dashboard um I can have uh particular check that if user is logged in or not if user is not logged in then um all from all the routes within the dashboard page it should automatically be navigated to the Home Route okay so currently uh uh I have to create uh export uh default async function dashboard layout and inside it I need to get uh get user from uh actually not here get kind server session again remove the dis slash types okay and after that I'm going to get uh this thing and if user not then I'm going to return redirect from the next navigation to the Home Route okay otherwise we are going to show the div and then the children this is the layout we want uh to have uh the few properties So Below this I'm going to add it like it all right so these are the children so all the child routes of the dashboard will be available in this children and this going to be loaded and if the user is not logged in then we are going to navigate to the Home Route let's go ahead and let's verify by clicking on the dashboard and you can see that I'm able to click on the dashboard so what it does is it first check the layout it's checking if user is logged in no it's navigating to the homepage that is simple so all the child routes will be automatically protected and we have protected the Home Route as well if user is logged in so let's try to log in uh with with the GitHub and uh again uh let's click on the Google Now I'm going to log in with the Google let's click on this email uh in order to log in so now I'm logged in with the Google and now it is automatically navigated dashboard let's try to verify if the Home Route is being navigated if I click on the Home Route I'm not able to navigate because it is protected I'm logged in and I cannot navigate to the homepage and for the dashboard you can see that I have uh this is something this is the server side component and I have protected this Home Route uh which is serers side component this is the way to protect the server side component and uh again this is a server side as well again we can navigate and check uh like this as well next uh few things I will be showing you how you can protect your routes from the client components protect your routes from the middleware and protecting the apis as well so let's do that now so before moving further if we check out the dashboard of kind you can see that this user is already created and you might be worried that why is not showing the two users I'm logged in with the GitHub and Google actually I'm using the same email ID for GitHub and uh Google that's why it uses the email ID to actually uh create the account over here and the name and email both are same in both the platforms that's why it's showing uh name and email over here all right so let's get back and I'm going to be creating couple of more routes one I will be protecting of as a client component other one is I will be protecting from the middleware okay so let's create that I'm going to be creating a profile route so I'm going to create a new page. TSX so this is going to be a used client okay uh so here I'm going to be importing use kind browser client okay this is not a server client this is a browser client uh in previous files you can see that I've been fetching the get client server session but here I have fetched uh kind so let me close these files all right um and also let me import a redirect from the next navigation as well all right so const profile like this okay so here I'm going to take is authenticated which is going to be equals to use kind browser and along with is authenticated we can a lot of different properties as well if I show you the dis doc uh you can see that it is showing all of these functions from the get kind server I only use get user and is authenticated we can use these functions as well and when we we use this particular thing uh the the use browser client these are the different uh functions that we can use uh so we can use is loading uh if it is loading from the client side then we can show some loader some circle loader as well uh something like that okay this is what we can show uh it will be quick but uh this is a good practice so if user is not authenticated then what we can do is we can keep it on the profile page we can navigate to the homepage that you are not logged in or we can navigate automatically to the login page okay that uh in order to access the profile page it's up to us so let me show you how we can navigate to the login page by default the kind gives us a route that we can use redirect and we need to use API o/ login okay this is the route that it goes to uh and after that again if user is logged in successfully uh we we can simply show a profile page over here like this this is protected profile page all right so let's go back let's refresh this particular page and if I click on the profile I'm not logged in uh it's showing element type andex string built-in class function uh actually con actually I need to export this as well so export default profile let's go and now it's showing the loading and now it's showing the profile okay let me refresh this as well so it's showing loading and this is the protected profile I'm actually logged out let me log out so if I click on the profile you will see that it will automatically navigate us through the login page this is perfect this is what we wanted and we have successfully protected our profile page successfully added the logic I'm going to be creating another route and I will be protecting that route let's say settings and this route I'm going to be protecting from the middle Weare okay so let's create that RFC settings and let's create the settings page like this okay uh we can have a proper styling here like this this is a protected settings page and uh we can keep it client route or the server component uh it's up to us uh usually it's server component let's use it uh because we will be protecting this route from the middleware so it's not the case so let's click on the settings yes we are successfully navigated it's not uh actually handling any protection as of now so let's go to the I hope from the previous videos middleware is the file in nextjs which is the built-in in nextjs it is not specific to kind uh I've been using middle Weare in my uh videos as well previous videos of nextjs so middleware .ts is the buil-in file which runs before every route okay so we can interfere what the data is coming in and where we need to block it and what needs to be added in the middle Fair before navigating to a particular route okay so in this particular file I'm going to be importing next response first of all and then I will be importing NE uh next request from the next server all right then I will be adding get kind server session from this I don't know why automatically show a wrong URL so export const function middle Weare and then I can take the request next request uh like this correct spelling and uh then I need to export config object as well and inside it we need to have a match okay and I'm going to give it settings all right it's giving some errors because it is expecting us to return something from within so if I run return null uh it is giving export uh actually not cost let me give it an a sync all right that's fine all right so what it does is match means that when this middle wear needs to be triggered it should only be triggered for the settings route this is what I have given to it if I want to have more uh uh values over here that it needs to trigger on further routes I can put it in an array and add multiple values like settings profile dashboard and so on okay so now here I can use use this is uh where we can get get user from actually equals to get kind server session above like this and let's get the user equals to await get user and here we can check if user is not existing means not logged in then we can simply return next redirect we can redirect it to the homepage for now actually what we need to do is within this redirect this doesn't work like this we need to provide a new URL okay and now we here again I want it to be automatically navigate to the login page if it is not true then again I still need to return something so I'm going to write this and inside it I would like to give it some uh url request. url and along with that we can also pass uh the redirect URL so if user is successfully logged in after navigating to the login page where it needs to automatically navigate to this is what I gave in the Navar as well this is where post login read direct URL after login it will navigate to the dashboard but if user click on the settings uh it's not logged in we are navigating it to the login page but after login successful login where it need to go to so post login uncore redirector URL equals to settings so again I'm navigating it to the settings page so let's refresh let's click on the settings actually it's not trigging let's see what's wrong this is right right this is oh so uh spelling mistake this is going to be the middle wear like this all right so it should work now let's try to refresh this homepage let's try to navigate to the settings page if I click on the setting I'm not able to navigate to the settings and it is detected that I am not logged in so it is not successfully navigated to the login page let's click on the continue to GitHub and it should be authenticated and in return it has navigated to the settings page this is what we have given over here perfect we have learned how we can protect multiple routes last thing I want to show you how we can protect our API routes as well let's say that within API I have another route uh let's say uh the data okay so I can create the data route and inside it I can have the route. TS file okay so inside it um I've already created multiple videos how we can create rest apis in nextjs 14 how we can create getput post and connect connection with databases and a lot of different things check out my channel if you want to learn everything about API routes in xs14 using App directory okay so here first of all I can use the same thing get kind user to actually uh uh uh protect our API routes and after that I'm going to have some get request okay and inside it we can again check this function and after this we can have if user does not exist then we are simply going to return failed data null if user exist means means user is authenticated then we are going to return the success okay I hope that you have understood how I'm creating this get API request okay so now let's verify that first of all I'm I'm logged in okay so I'm going to navigate to the aps / data you can see that it is showing success data because I'm logged in let's navigate let's click on the log out and now I'm not logged in let's try to navigate to the API SL data now you can see that I'm not logged in I cannot fetch the correct data from the API all right guys uh so we have learned different kinds of protection for different routes API routes we have uh learn how we can integrate kind authentication system and there are other players as well like clerk next o and few more as well and uh it is getting a lot of uh attraction and I hope that in the future they are going to mature their uh their settings as well uh I would like you to explore this kind uh library for now that's pretty much it thank you so much for watching guys I'm going to create more videos on next js14 stay tuned do subscribe my channel comment below and like my video as well see you in the next video

Channel: Programming with Umair

Views: 475

Keywords: next.js 14 authentication with kinde, kinde auth tutorial, kinde auth middleware, kinde callback function, protect routes using kinde, next.js 14 tutorial, nextjs, nextjs 14, next js, protect client component in next.js, protect server component in next.js, middleware file in nextjs, login with kinde, 2fa in kinde, forget password in kinde

Id: AxciMCBL7rM

Length: 45min 16sec (2716 seconds)

Published: Mon Mar 04 2024