How to Integrate Auth0 & Next.js | User Authentication in Next.js with Auth0

hey guys welcome back in this video I'm going to be showing you guys how you can integrate auth zero with your next.js application if you don't know about auth0 auth zero is a powerful authentication and authorization platform that simplifies the process of adding secure user authentication to applications and it offers robust features like user management social logins single sign-on as well as multi-factor authentication just to name a few and it eliminates the need for developers to build authentication systems from scratch saving time and effort while also providing industry Standard Security protocols so that's sort of like a short description on what auth0 is and how we can use it and what we're going to be doing in this video is building a nexjs project that we will integrate with auth0 to display and demonstrate a login authentication system and all that is going to be handled by Alt zero so if you guys are doing any sort of next.js projects um with xjs as the back end or with a separate backend you guys can definitely utilize this in your front end and um I'll be showing you how you can have protected Pages as well so with that being said let's begin okay so I have opened up my directory called um next.js auth0 inside of my terminal right here and what I'm going to be doing is creating the project inside of this next.js auth0 folder now if you guys are in a separate directory and want to create a project inside of that directory then you could just do npx create next app and then type in your app name here but since I already have a nexjs auth0 folder and I have nothing inside of it I'm just going to do npx create next app and hit period so that the application can be created inside of this directory called next.js.0 and this will be the name of the app so I'll hit enter and if you give it a few seconds it's going to ask you if you would like to create it with typescript I'm just going to hit yes um eslint yes tell in CSS yes Source directory I'm just going to go with no because it just kind of simplifies a lot of directories so I'll just hit no app router I'm going to go with no because app router is currently in beta testing and not and majority of the next GS applications still use the the older uh Pages router and that's what I'm going to be using in this video to make it easy to follow along with everyone so I'm just going to hit no for this one and then customize the default import Alias I'll just go with no and if you give it a few seconds it's going to create the nextgs project inside of this next.js auth0 folder and I'm going to be back once it completes okay so now that we have completed um creating our nextgs project I'm just going to leave this terminal open here because we're going to need it in a bit and what we need to do next is sign up for auth zero so we need to do is open up your web browser and go to authzero.com to be presented with this screen right here and then you're going to click this sign up button located in the top right corner of the home page and over here you're just going to fill in your email address and create a password for your auth zero account so I'm going to go ahead and do that with me so I'll just do my email address if you guys want to use other signup options you can sign up with GitHub Google or Microsoft but I'm just going to prefer to do it with email just to make it a lot easier to follow along so I'll hit continue and here it's going to ask me to create a password so I'll go ahead create the password and then I'm going to click continue so give it a few seconds and over here it's going to ask you if you're creating this account on behalf of your company or other but since I'm just doing it for a YouTube video I'm just going to click other and then once I click next it'll set up the tenant and if you give it a few seconds we'll be presented with a few more configuration options right here so for me I've used ots0 before so I'm not going to need to click uh I am a new authoro user so I'll just click this and hit get started and now we have created our auth zero application and if you look in the top left and click this this is the name of our application in which the authentication routes will be located so this is basically completed for the auth zero sign up we are going to be coming back to this screen momentarily to configure a few settings so don't exit out of this window just yet all right so now I'm going to open up my code editor and I'm using vs code so I'll just do code and Dot to open it up inside of this next.js auth0 directory if I hit enter you're just going to see my editor pop up right here and what I'm going to do is open up my terminal and before I get into any of the configurations with any of the files here I'm just going to install the dependencies that we need so to install auth0 to use next JS we're just going to need to do npm install at 0 max.js up 0 and we're also going to install dot end to store some of our credentials in a EnV file so if you just give it a few seconds it will complete that so go ahead and clear my screen and if I close my terminal and go into package.json you can see that these two packages have been added at 0 and Dot N okay so now that we have completed adding our required packages let's go ahead and configure some settings in our auth 0 application so to do this I'm going to head back to my off zero page right here in the dashboard and right here I'm just going to click create application to create a regular web application all right so you can do regular web application and you can name your app right here now since I'm doing this for a YouTube video I'm just going to put YouTube next.js off zero and make sure you select regular web applications and over here it's going to ask you what technology you're using for your project and since we're using xjs I'm of course going to click next.js and over here what you're going to do next is configure the URLs for your application under the application URI and the uh settings section so settings is right here and what you're going to do is go down and over here where it has allowed callback URLs you're going to type in HTTP colon forward slash forward slash localhost 3000 and the reason that we're putting 3000 is because that's the port that our application is going to be running on when we are creating it and then forward slash API forward slash auth forward slash callback and basically you can add multiple URLs by separating them with economa however I just want to go over what this does so when a user is successfully authenticated they need a route to call right they need a route to go to and this callback route which is integrated by auth0 with the auth zero next JS Auto package right here it's going to handle all that for us so that we don't have to do much all right and then for allowed logout URLs we're just going to do HTTP colon slash localhost two thousand so that once we've logged out this is where it's going to redirect us to now if you want to have a different route on your application then you can put that here but for the sake of this video I'm just going by the auth zero documentation and specifying the default or the suggested one by the documentation okay and we also need to go to basic information so if we go down um one second we go to the basic information right here kind of missed it we need to take note of the client ID client secret and the domain value okay because we're going to need these values and what we're going to do next so I'm just going to keep these here for right now and then I'm going to come back to these but what I need to do next is go back to our code editor and we need to allow our next JS app to link with auth0 and communicate with it right so to do that we're going to have to create a DOT EnV file and the reason that we installed dot end voice so that we can access these values in case we ever needed to so instead of next year as alt zero which is my root directory I'm just going to create a file called Dot env.local and inside of here I'm just going to paste these values in so right here this is what you can find in the next uh JS auth0 documentation and what we need to do is replace these values with our applications values so with domain I'm just going to copy this and for domain we'll just put this right here so paste it in yeah so if we need to put the https at the beginning https colon slash and then you have your domain and then after that we're going to need a long random value and to create the long random value you can just open up your terminal I'm just going to clear it for now and do this command and I'll have this command in the description of the video so I'll do this and this is going to generate a secret key for us so that we can use it in our application and then for our client ID and client secret we can find those over here so I'll copy the client ID paste it here the client Secret I'll copy it and I'll also paste it here okay and next we need to add the dynamic API route so we're going to basically stay in our code editor right now and inside of pages and in the API directory we need to create an auth directory under this directory okay so inside of API we're going to create a folder called off to handle all of our authentication related things so instead of off we're going to create a new file and this is how it's going to look so it's going to be square bracket off zero closing square bracket dot TS okay and I'm just putting dot TS because we're using typescript with this project if you're using JavaScript then you should put dot Js so I'll just dot TS and here we're just going to populate this file with this code right here and what this is is basically handle off is a function that is provided by the package that we installed earlier and what handle off does is that it creates different route handlers to handle all of our authentication flow so when you first log into auth0 it's going to go through API auth login so this handle auth function will handle all the login flow based on that as well as logging out the Callback URLs that we also set earlier um over here so this is what handle off does in case you were wondering okay and next we need to wrap our entire application in a off zero user provider okay so if we close out of these files and head over to underscore app.tsx in this Pages directory we're going to import user provider so we're just going to so we'll just do import user provider and auth zero and then your client okay and what I'm going to do next is return user provider and I'll just copy this over here and remove this line all right and what this will do is basically since we are using this Auto platform to create and authenticate users we're going to have to wrap our entire application with auth0 okay so this is all the configuration that we need at the moment and now we can start working on actually creating a page where we can log in and have the user and have our client basically create new users via Google or by their own email and log in and I'll show you how you can access certain parts of their user to display their information like their name email and things like that all right so now I'm going to show you how you can actually build the application so that you can not only create users but log in as well as view your information but before we do that I need you guys to make sure that you have saved your changes inside of auth zero so at the bottom here you're going to see this uh button that says save changes just make sure that you press this so that all of the um log out URLs and the Callback URLs are working okay and now I'm just going to go ahead and do npm run Dev to run my application and if I go to localhost 3000 it's going to have all the spoilerplate which we don't need right now so I'm just going to go into index.tsx inside of my Pages directory and I'm just going to remove all this code and do rfce which is a snippet that you can use after installing this es7 react readouts and react native Snippets extension which I recommend so we just created a bear function component and if we go back you can see that we just have index and a dark screen here and to remove that I'm just going to go into globals.css and remove all the code after the Tailwind stuff just so that it's easier for you guys to follow along and see what's going on so we have this page and what I'm going to do next is create a login link so to do that I'm going to go ahead and I'm going to first configure a few things and I'll explain to you what they mean so if I do import use user from auth zero client what this will do is this use user function it's going to return three things and the things that are in return are user error in case we encounter an error and it is loading which is going to be a Boolean okay so we'll do reviews user this function will return three things and what this user object is is that once we've logged in this user object will allow us to display information about our user so let's say that we've logged into our application and we want to see our users or our current user's username right so we would do user.name in order to access that if we ever encounter any sort of error when signing up or logging in then we're going to use this error object to display the message to the client and if any data is loading then we can just check this is loading um parameter which is going to of course be a Boolean to display whether or not data is being loaded currently so this is what this used user function does and you'll kind of see how this works in a moment but for right now I'm going to create a login link that will allow us to sign up and log in to our Ops 0 application so I'll just do return a href API off login and close the tag and just have a login inside of it so you can see it right here okay and the reason that we're doing API auth login is because when we first created this auth zero file inside of this auth directory what this was with this handle off function did was basically create this route so that we can have a proper login flow okay for logging in logging out this was one of the routes that was created so we don't really have to touch much on it so if we can just go ahead and click log in it will lead us to this page which we can customize as well if you go into your auth zero application settings but you can kind of change the logo that's displayed as well as well as add some branding to your application but we're not going to do that in this video but I'm just letting you guys know in case you wanted to um change the look of this login but for right now let's go ahead and create an account so again we are at login here and if we click it it's going to lead us to this page to create an account now let's just click sign up and I'll do email at gmail.com and then type in my password so I'll just do um I don't know capital P symbol s s uh w0d just to make sure that it fits in with all the criteria so I'll go ahead and hit continue and it's going to ask you if you want to let our application and you can see our application name that we set up earlier to access our account so let's go ahead and click accept and now we are logged in now this main now you may not see that because all we have on our page is log in but what I'm going to do is go ahead and paste some code that will kind of take this away so and I'll explain what that means as well so I'll go ahead and just paste this code right here and you you guys can find all this code in the auth0 documentation but right now you can see that it just says welcome at email email.com and let me go over what this does so again like I explained earlier there are these three return values and if we're currently loading something then we're just going to display loading and if there's an error then we're just going to return an error message but if we have a user object active in the session meaning that we have a user who is logged in we can return their user and their name and their name is just going to be their email address okay and like I said before this auth zero handle auth function will create routes under the hood to help us with logging in and logging out and again you can see there's a log out link called with the route set to API auth log out so that we can log out right so if I go ahead and do log out you can see that we've logged now and if I click log in again then it'll bring us to this page and since we've already created an account there's no need to create one again we can just do email at email.com and I'll go ahead and enter in my password so I'll just do p in the rest if I hit continue you can see that it says welcome email.email.com now if you open up your console and over here I'm just going to go ahead and do if user I'm just going to do console.log user to kind of show you what this user object gives you access to so right here you can see that this user object has given us access to email.email.com art name nickname and the picture right and this Sid and sub these are kind of things that you can use to tie in with your back end and Save in your database if you're building an application that requires the source this sort of data but right now we're not going to be doing that I'm just going to show you how to do the login and logging out right so here we can see that our nickname is email right because this is what comes before the at symbol we can print out our nickname as well by doing um here I'm doing your nickname is user.nickname and just hit a period over here you can see that it says your nickname is email let me just add a break so it looks nicer so right here you can see that since we're logged in as a user we are able to access these values which are coming from this user object and when we're and to check if we're actually logged in we can just use this user object by doing if user meaning that there is a value for user we can display the information about that user by doing welcome user.name to display their name which in this case would be their email address as well as their nickname like that so that's basically how you can get a login and log out flow completed with auth zero now if you want to access other um routes and such you can go ahead and do API off in me and this will kind of show you your information in Json format and this is basically what we logged to our console right here so yeah that's that's about it so if we go ahead and log out it'll log us out and since there is no user object once we log out it's going to only display login because there is no user object okay so just to kind of reiterate when we log in it'll create a user object and if anything is loading it's going to just return loading there's an error then it's going to print out the error but if we have a user object who has logged in successfully throughout xero we're going to be able to access the user objects attributes like their name and their nickname email things like that to display on our web page and once we log out that user object is removed so we just have this final return statement which is sort of like a else to display a login page okay so again I'll go ahead and do it again I'll do log in and again if you want to create a new user or continue with Google you have the option to do that as well so I'll go ahead enter my email address again password once I'm successfully logged in it'll display my information and I can just click log out and the reason that this is displaying twice is because we have strict mode set to True which is just going to have things displayed twice for testing purposes but just to kind of clear up confusion the reason that we're logging once in our code but it's being logged twice is because of the strip mode thing so just so that no one gets confused so yeah that's about it for logging in and logging out all right everyone that's it for this video of course this was a very raw tutorial since it only helps with integrating off zero to add login and logout functionality and if you're wondering you can have a separate login page with this login link right here to access the login form that is provided by ot0 I only have the user dashboard and login inside the same file just to make it easy for you guys to follow along but I definitely encourage you to go ahead and do more with this and just to give you an example you can send the other user attributes like the sub and Sid to the back end to a back-end server if you have one um for a fully fledged web app to handle data but to sum it all up this is basically how you can integrate authira with your next.js app and I hope this was helpful for you and if it was make sure to leave a like And subscribe to the channel if you have any comments or questions feel free to email me or just leave them in the comments below and I'll do my best to reply to you so yeah as always have a nice one and I'll see you in the next video foreign foreign

Channel: Arpan Neupane

Views: 14,159

Keywords: web development, react, react tutorial, what are APIs, programming tutorials, react frontend, how to learn react, javascript tutorial, nextjs, nextjs and python, next.js, Next.js, Auth0, authentication, authorization, user authentication, server-rendered applications, auth0 and nextjs, Next.js and Auth0 Integration, integrating authentication with auth0, secure login system, oauth 2.0, api authentication, single sign on (SSO), full-stack development, User Authentication, api auth

Id: 16euljI71LM

Length: 25min 20sec (1520 seconds)

Published: Thu Jun 29 2023