Simple Next.js User Login Authentication | 5 Steps in 5 Minutes! | Auth0

in this video i'm going to show you how to quickly add authentication to your next.js application using the auth0nxjs sdk [Music] trying to create your own custom authentication is a pain there's no reason to reinvent the will auth0 makes it super simple to authenticate users using email and password login or social account logins like google twitter github and others thanks to auth xero for sponsoring this video we're going to jump right in there are only five steps for reference the instructions are on the github repo linked in the description below first thing that we'll need to do is sign up for an auth zero account if you don't already have one it's completely free they have a very generous free tier so once you've logged in this is your dashboard we can create a new application so we'll just name this next js demo and this is gonna going to be a regular web application you might think because next.js is based off of react that you would select a single page web application but next.js is kind of in between it's considered a regular web application because it can use some server side scripts so we'll hit create and then there's some quick starts here but we're just going to go over to the settings and there's two things that we need to add here so when we scroll down you'll see allowed callback urls so we're going to enter localhost 3000 slash api slash auth flash callback this is going to be the url that we're going to allow auth00 to redirect us back to after we've logged in in production you'd want to change this localhost 3000 to whatever your com is and the other thing we need to add is allowed logout urls and that is just going to be localhost 3000 right now so scroll all the way down the bottom and save changes and that's all we need to do right now in auth0 now let's go over to vs code and i have a blank project folder open here i'm going to start with a standard next.js app so we're going to say npx create next app and dot which we'll install in this current directory i'll speed this up for time all right now we just need to install the auth 0 next js package so npm i at auth 0 slash next js dash auth 0. all right that's all of the installation for the third step we're going to add an environmental variable file let's add a new file in the root is going to be env.local we're going to add some environmental variables in here so we're going to have an off zero secret this is a long random value we can enter any value we want here but in the github repository there's a nice little code snippet that we can run and it's a node script so we'll just run this and it's going to give us a long random string so we'll copy that and we'll put that here the next thing is going to be our base url right now it's localhost 3000 so that's good next is our auth0 issuer base url we can get that from our dashboard so let's go back to the auth0 dashboard and that's going to be this domain right here so we'll copy that so that's right here we need the https let's replace the rest of it after that and then for the client id we'll go back and here's our client id let's paste that in here and then your client secret again back here client secret we'll copy that and this secret is very secret don't let anyone else see it i'm gonna put it in here and i'm gonna delete this application after this video so i'm not worried about you seeing it so let's save that you know be sure that your env files are in your get ignore we see here in our get ignore file that env files are in here and just in case you don't have a dot local or a dot development and let's say you just have a dot emv you might want to add that as well because you never want these files to get uploaded to github so you'll notice here that this file is grayed out as well as the node modules so those will never get uploaded to github alright so let's save that and close it the fourth step is to create our api routes for logging in logging out and our callback we can do that with just one file so in xgs we have pages and then api within api we're going to create a route of auth and then a catch all file so it's brackets dot dot dot off zero close out our brackets dot js so this is basically like a slug so if we do uh slash api slash auth slash login that will work log out will work callback will work so this is a catch-all route now in here there's very little that we need to put we're just going to import our handle auth from the auth0 package and then export that handle off very simple the fifth and final step is to go to our app.js file and we're going to wrap this with our user provider which we're going to get from our auth0 package so that's going to be our user provider from our auth0 package so we'll take this and we're going to wrap our return here we're going to wrap that with our user provider and that is all of the setup needed to make authentication work index.js but now how do we use it let's see so let's go ahead and open up our terminal and let's do npm run dev and start up our dev server it's going to run on localhost 3000 all right so here's our application up and running we're at localhost 3000 if we go to slash api slash auth 0 login then we should be redirected to our auth 0 login this is the default styling of the auth0 login page you can customize this uh in your auth0 dashboard so we can log in with google or our username password so we can either log in or sign up and we'll use google and then it's going to ask if we want to authorize this application all right so we're logged in but how do we know that we're logged in well we'll need to use a custom hook from the auth00nxjs sdk so back into vs code let's go over to our pages and then index.js the hook that we're going to use is use user and that comes from the auth0nxjs sdk and to use this in our function we'll create a const and we're going to destructure this there's several things that we can pull out we're going to pull out user error and is loading and that is going to come from the use user book so let's just go ahead and console log the user and see what we get all right let's save that and go back to our application and let's pull up the terminal and you can see here that we already have our user here so let's make this a little bit bigger so you see all of my information i logged in with google there's my email full name nickname picture and the sub is our auth0 user identifier so it's like the user id so it tells us in the first part how we authenticated we used google and then the second part is a random id assigned to me so let's add some logic to show a login button when there is no user and a log out button when there is so let's get rid of this console log so we're going to say if user then we want to return and we're going to return we're going to have a fragment so inside the fragment let's put an h1 and we'll say welcome and we're going to use the user here so we'll say user.name and then after that let's put a link and we'll add in our href here and that's going to go to slash api flash auth slash log out so we have a user so we want to be able to log out so we'll say log out here so if we have our user then we're going to have our log out button and if we don't then we'll just return link href is going to equal slash api slash auth slash login and then that is going to say login all right and then the rest of this uh default return here we're just going to get rid of that all right so here is our entire function we have our user if we have a user we're going to welcome the user and display a log out button if we don't have a user then we're just going to display a login button all right so let's save that and go back to our application and there we go welcome log out so let's go ahead and log out now we can log back in and let's log in with google and there we go we're logged back in now just to add to the user experience let's do something with this error and the is loading so we'll say if is loading then return a div and we'll just say loading and then if we have an error then return the div and we'll just put in our error dot message all right so that way if we are loading we'll display something to the user and if there's an error we'll let them know that as well and what if we have a page that we want to protect maybe we have some content on our site that is members only so let's create a quick members only page and see how to protect it so let's go back on our pages let's add a new file we're going to add it into a new directory as well so it's going to be members only slash index.js let's go ahead and create a component here i have a snippet library installed what does it react our es7 react redux all of that snippets so let's go ahead and rename index we'll rename this to members and then in here let's just put an h1 and we'll say members only all right so now i have this new page let's go ahead and go back to our application all right so right now i'm not logged in so i have a login button so let's go to slash members only and i'm able to access this site right now even though i'm not logged in so to protect this route is super easy all right so all we have to do is import with page auth required and that is going to come from our auth 0 xjs sdk and the only thing that we need to do with that is pass it into our get server side props so we're going to say export const get server side props and that's going to equal with page auth required and that is all that we have to do let's save that and go back to our application and now i just refreshed and it's prompting me to log in let me show you that one more time we'll go to localhost 3000 i'm not logged in now let's go to slash members only and now it's not allowing me to access it without logging in let's go ahead and log in and now i'm able to access it and we can also just as easily protect our api routes we don't want people to be able to anonymously use our api routes and some of our routes we only want certain users to be able to access so let's create a fake api route we'll go back into our api under pages api and let's create a new page and we'll call it secret.js so in here just like we had the with page auth required we also have a with api auth required so the only difference this time is instead of using our get server side props method we're going to wrap our api function with this with api auth required function so we're going to say export default with api auth required and then within this we'll have our normal function so we'll say function secret route we have our request and our response now this function is only going to run when we're authenticated let's also get our session so get session and that's going to come from our auth0 next js sdk so now we're going to create a const of session is going to equal get session and we're going to pass in here our request and our response and then from this we can get our user so we'll say const user equals session dot user so now here we can go ahead with our normal code or whatever it is we're using this api for and we know that we have an authenticated user if you want to learn how to use auth0 with just plain react to go check out the video that i made on that as well and give auth0 a try on your next project i hope this video was helpful like this video to help me out and subscribe if you haven't already for more videos like this [Music] [Music] you

Channel: codeSTACKr

Views: 23,849

Keywords: react authenticat, react login, authentication auth0, auth0 react, how to secure react applications, how to add login react, authentication, react, reactjs, javascript, react authentication, react auth, react authentication jwt, react authentication and authorization, react auth0, react authorization jwt, react authorization, next js auth, nextjs auth0, next js authentication, next js auth jwt, nextjs auth0 tutorial, next js auth tutorial, next js authentication tutorial

Id: jgKRnhJBfpQ

Length: 14min 39sec (879 seconds)

Published: Fri Oct 08 2021