My Login Authentication & User Registration Setup for React & Next.js | Kinde Auth

[Music] hello and welcome I'm Dave today I'm sharing the best solution I've found for user registration and login authentication in my next JS app and I'll provide links to all resources in the description below I'll also provide a link for you to join my Discord server where you can discuss web development with other students and you can ask questions that I can answer and receive help from other viewers too I look forward to seeing you there within the last month I've published a nexjs course that already has over one hundred thousand views and thank you for watching but today I want to show you my current favorite solution for adding user registration and login authentication to my next JS app say hello to kind a simple powerful authentication solution and kind offers all of the features that I get requests to make tutorials for like passwordless authentication social logins and login credentials where you can request just a forgotten password single sign-on for Enterprise systems multi-factor authentication multi-tenancy beautiful dashboards feature flags and I could go on kinds free tier includes an amazing 7500 active users and unlimited sign-ins and they can scale with your business while keeping their prices low on their other tiers and the free tier includes single sign-on with unlimited social logins and multi-factor auth basic roles and permissions also custom domains user management unlimited teams and just outstanding features for a free tier okay now full disclosure here I only allow sponsors on my channel that get me stoked about their product or service if I wouldn't advocate for them they're not on my channel and kind is sponsoring this video so that said I'm very stoked about kind and all of the features you can add to your applications using their free tier it's pretty amazing so let me show you how it works today I'm going to show you how easy it is to add kind to a next JS project that uses the new app router and I'll leave a link in the description to my completed code in GitHub and I'll also leave a link to the kind next.js starter kit that kind offers on GitHub so both of those resources will help you get started with kind in your next JS app okay I've already created a new project in next.js with create next app and I don't know when you're watching this tutorial if you're watching it within the first few days that I've made it we're currently on next version 13.4.9 as you see here in my package Json however if you're watching this in the future maybe next has released a new version if you want to have the exact same response I do you might want to install this version of next but you can go ahead and try the latest version as well note there's one other dependency you're going to need and you can see it here in my package Json right there so if you want this dependency you could open the turn terminal and do npmi for install and then type out this dependency so you can work with kind auth as well as we work through this tutorial now we're back at kind.com and you can see the start for free button if you don't have an account yet go ahead and do that sign up quickly for an account it's easy and then I'll meet you at the dashboard I'm signed into the kind dashboard now I had a checklist when I first signed in as a new user I currently don't but you may have one here so it may not look like mine but let's go to settings and from settings we want to scroll down to applications from applications we're going to find where we can add a new application I've already created a test app here so you want to go ahead and add an application as well and once we get into that then after you add your application you can see we have where we can edit the name and you can choose a language framework I have next JS they have a nice link here to their next JS docs as well we have an ID for the app and we scroll down and we have app Keys now we're going to need all of this information that you see right here and you can even copy the secret and the client ID and a domain now you may need to set this up in your settings as well so I have personalized mine with dgtc for Dave gray teaches code at dot kind.com so that could be back in the settings as you set up your new account also there's a couple of callback URLs that you will need here notice I've got in localhost 3000 because I'm in Dev mode and you should be too at first so we'll be running our project on localhost 3000 and not a deployed URL yet but you need both of these in here as well now you'll need to go back and forth between vs code and this web page to copy these and then put them in your dot env.local file let me show you mine we're back in vs code and here is my DOT env.localfile now I'm not worried about you copying any of these because they won't work for you and I'm going to delete them all after this tutorial however you can see I've got the kind client ID the kind client secret that we copied out of there I believe we also had the issuer URL which is the one that I pointed out has dgtc in here for mine other than that we have a kind site URL this should just be your localhost 3000 for now we're going to log out and redirect to localhost 3000 when we log out so you'll want that in here for that value and we're going to go to a dashboard page when we successfully log in so we'll be redirected to that page so just copy those values and of course put in your client ID and client secret and your url here for the issuer as well we're back in the browser in the kind settings for my test app now we want to be able to go ahead and add some social logins as well as our passwordless login that we're going to use today so to do that we need to come back out of our app so I'll go back back to home I'll go to settings and here I'm going to choose authentication so for authentication we could configure passwordless or password and we can do this on a per app basis so we will go back to that specific app right now I have a Google social connection and a GitHub social connection and we can add more so if you click add connections you can scroll through and choose the social logins that you want to use and then of course click save I'm just going to cancel out since I've already added those to mine so now let's go back to the specific app so we go under applications I'll go back to my test app and from here I need to go to authentication once I'm in that test app there we can choose passwordless or password and then we also have our social connections and you need to enable both of those as well so now we should see a GitHub button and a Google button when we want to log in as well as having a passwordless option with those kind off settings complete we're now back in v es code and we're ready to start adding some code to pull our project together the first file we want to create is inside the source directory if you choose not to create a source directory when you create your next JS app just know the middleware file needs to be at the same level as the app directory not inside the app directory so now let's check out this middleware file you can see I'm importing auth middleware from kind as we see up here and notice the slash server at the end of this import and after that we're exporting the auth middleware down here now everything in between is just configuring a matcher and this matcher is actually what they recommend in the next JS docs it's not specific to kind auth in any way but you want your file to look like this for the middleware and now inside your app directory you need an API directory and inside of the API directory you need an auth directory and then inside of the auth directory three you need a directory that has brackets and I'm just going to click on the route TS file but then you can see this directory up here brackets with kind auth with the a capitalized so you need API auth kind of and then you need to put in this route TS file and your route TS file needs to look exactly like this this is the route that kind uses to handle those redirects with the sign in and registration and all of those things for your application so just make sure your file looks just like this and remember you can get all of my source code at the link in the description now back in our components if we look at the page file I have just got a static component here where I'm showing some things on the home page and I am using Tailwind CSS in this project the kind auth SDK that I have also provided a link to in the description does not use Tailwinds so just a note on those differences there's going to be a few other differences and one notable one is as we look at the layout out.tsx I prefer to extract the nav bar and have a separate component they did not do that so if you look at their SDK source code you'll see that just all of the code that you would put in a navbar component is inside this layout component you can see I've only got a few Tailwind classes here and everything else is your basic layout component for next JS so let's go ahead and look at that navbar component because this is where things get interesting so at the top I'm importing image from next.js so we can use it for our image if we pull that in from our user data say from GitHub or from Google other than that I'm importing get kind server session register Link login link and logout link all things we could use in the nav bar so here I'm getting is authenticated and a get user function from git kind server session and then I'm getting the user information with that get user function now note these are not react hooks this is a server component so we're just getting this information right here inside of this server-side rendered component now inside of the component itself where we're returning some jsx or TSX if you will if we come down here we're just checking that is authenticated and if we are authenticated or actually if we're not authenticated notice the exclamation mark here so if we're not authenticated we're going to show the login link and the register link but if we are authenticated then we're going to go ahead and show a picture if we're pulling in a profile picture from GitHub or Google or any of those other social logins that you choose or if we don't have a picture we're going to give a circle that's going to give our initials like mine would show DG here because notice we're just pulling this first element out of each one of those or I said element it's really the first letter because we're performing that on a string right there after that then we're just putting the full name here and of course we've got the family name as well so given name is the first name family name is the last name and then we're showing the log out link because we're logged in so also a quick note on using the image component notice I imported that image component from next JS that's something you won't see inside of that kind SDK source code either and that's okay the way they did it just used a actual image tag however if you use this image component like I do in xjs you need to set up any one of those social authors inside of that next Dot config.js and I've done both of those here for you for Google and for GitHub so you need to put in this remote patterns for images and of course set up each domain that you're going to pull images from and now the only other component to really look at is our dashboard so let's take a look at that I'll click on the page TSX it is also a static page so we're just going to show that auth is successful because we'll be redirected here after a successful login so now that I've gone over the code let's open it up and see how it all works I'll press Ctrl on the backtick to open a terminal window and type npm run Dev which should start the application up and once it's up and running we should get a notification right here yes it's running now I'm going to do control and click to launch it at localhost 3000 in the browser and here's the application we've got a link to the docs as well so we can sign in or sign up now if you haven't signed up already and you attempt to sign in so like using an email here if it doesn't find you it's going to ask if you want to create an account which that's a nice feature as well so what I want to do first is just sign in with GitHub I'll continue with GitHub and we should be taken to the dashboard page now if it's your first time signing in with GitHub it will probably ask you if you authorize that connection as well but here's our Dash board page and you can see I've got my image in here from GitHub I've got my name and a log out link everything's as expected it's really just that simple if I go back to the sign in we could sign in another way so let me sign in again and I'm going to use my email and now if they don't find this user which they should it would ask me to create a user and that's probably what it would do for you at this point right now I'm just going to log in and look they're going to email me a code when I get that code I can come back and enter it in here you've probably done something like that before that's how passwordless authentication works and then you can continue so it's verifying that you are who you say you are as far as using that email now I'm sure you can already see kind off is easy to configure and offers far more than I've shown here today but I think I've covered everything you need to get up and running with a full featured user registration and authentication system quickly be it a personal project or even an Enterprise level solution I know I'll be using kind of in an upcoming full stack project on my channel if you haven't yet set up your free account with kind today remember to keep striving for Progress over Perfection and a little progress every day will go a very long way please give this video a like if it's helped you and thank you for watching and subscribing you're helping my channel grow have a great day and let's write more code together very soon

Channel: Dave Gray

Views: 16,661

Keywords: login authentication user registration, user registration and login authentication react, user registration, login authentication, login auth, react, react.js, reactjs, next.js, nextjs, next.js auth, nextjs auth, passwordless auth, social logins, kinde auth, kinde, auth for next.js, next.js app router auth, auth for next.js app router, next.js 13, next.js 13 auth, authentication in next.js, auth in next.js, auth in nextjs, authentication in nextjs, user login, next.js login, js

Id: WtHQGlKGUrU

Length: 14min 27sec (867 seconds)

Published: Fri Jul 14 2023