Authenticating Next.js Apps with Auth0

hey there in this video we're going to talk about authenticating next.js apps with auth0 authentication is one of the first things you want to do when you start building out a more robust larger sized app so let's get to it next js and zero work really well together because off zero has a package that they released that makes it really nice to add authentication and i'll show you how to do that it takes just three simple steps so we'll get to it first off make sure you have an off zero account and they have a great free tier this video isn't sponsored or anything i just really like off zero so what we're gonna do here is create an app we'll call it youtube app and we'll say this is a single page web application we're using next.js which is react and i'll click create and what we have here is some nice getting started stuff you can type in next and follow along with their quick start it's really good actually but what i'm going to do is just go into settings and there's a couple things we want here one we want our domain we want our client id client secret and then there's a couple configuration things we need to set up down here allowed callback urls we're going to do http localhost 3000 slash api callback and what this means is when auth0 authenticates our user they're going to send the user back to some place and that should be our application this is the url they're going to send us back to and when we go to production you're going to want to do something like better.dev api callback or wherever your application is in production the other thing we need to do is log out url let's let a user log out at localhost 3000 as well allowed web origin we'll also put that here so there we go we have configured an off0 application and that's all we need to do from here next up let's go and look at how we can use the next.js auth0 package and to do that is three simple steps the first one here is let's do the npm install so i'll copy that come over paste this in this application is a brand new next application we used create next app and i just made this one real quick next up let's go back to our settings right here and the packages next up is off zero configuration we do this by creating an env.local after the installation this is going to be step one is we need a dot env.local and we'll copy all this right here we'll go over new.env.local paste this in and let's start adding in our values right here so i'll just do this and let's see alt 0 secret is a long random value if we go to the docs here this is a way to generate a quick string that's a random string so we'll grab this come over here create a random string and i'll use that as my off zero secret also your base url is going to be localhost 3000 0 issue or base url we're going to get this from our dashboard so let's go back to the dashboard all the way up here and we're going to copy this domain copy client id and copy client secret and one thing i need to remember here is the save button is actually all the way down here which is hidden so make sure you click save there for your settings for the web origins logout url and callback url i'll go back over here and let's see base url stays i'll zero base url let's paste this one in here let's do that one and let's make sure we put https there i believe and this one zero client id let's go here and all zero client secret let's do this one and make sure you don't commit this to your github repo this is a secret thing that should only be in an environment variable i'm going to delete this app once we're done with this video so it's all good and there we go so we have all that coming from here so that's step two all right is really cool how the auth zero setup is in next.js what we're going to do is under pages under api we're going to go to new folder we're going to create an auth folder and inside of that we're going to create a file and i'll show you what this looks like it's open bracket dot dot all zero dot j s and you might be wondering well what in the world is that thing that's a next js catch all route so right now if you use next js you could do something like this and call it slug and then the variable that you pass in let's say you did api off slash i don't know user or chris then chris would get passed in as the slug but the way that we do this is we're going to use dot dot and that means it's a catch-all route and i'll show you what that looks like because it gives us the flexibility to create multiple routes with this and to start us off i'm going to go back to the sdk docs go down here and the only thing that needs to be in here are these two lines and that's step two so this file along with these two lines is how auth zero is saying okay i'm going to be able to handle the api login route the api logout route api slash off slash callback which is what we used in the dashboard api auth slash me so those are the four routes that this gives us and that's pretty much all that we're going to need to authenticate our application step three to the setup is going to be going into our app.js and making sure that we wrap this whole component with a user provider component that all zero provides so i'll go down here and let's copy this user provider right here we'll go back over here paste that in and then let's wrap this whole thing right here user provider and that is going to give access to our entire application since this is the underscore app.js everything underneath this app.js component which is our entire app is going to have access to user information if you look under the hood auth0 actually uses react's built-in context to share data across all the components which is cool alright so with those two things set up we have our user provider we have our0.js route we can go to our app we can start our application i'm going to say npm run dev here we'll let that run and we have these new routes that were given to us thanks to this api route so let's go check it out localhost 3000 this is our app running and i can say api slash auth slash login and this should redirect me over to off0 and it does check that out so it redirected me over to off zero and there's some branding here because my tap spacebar account has a little bit of branding yours might not have branding but to do this branding you go in here and you go under applications settings and you can change out a little bit of your images here and you can see how these have these images and you can configure your entire there we go your entire company with the settings right here so that's really cool to see and right now i just have google login and email and password login but if you wanted to add more logins you could go into your alt0 dashboard go into authentications social and then over here you could say create a connection and here are all the zero connections which is really cool like i could go here click twitter it will redirect users to log in at twitter twitter will redirect them back and then zero will redirect them back to our next js application we'll click continue and let's see we can use our own api keys which you should when you go to production or xero gives you some dev ones that you can use that's really nice and we'll click create and we want to make sure that this is available on this youtube app so i'll check that right there and that's all it takes to add another connection so let's see that's it right there let's go back to our app and we'll go to forward slash api auth slash login and we should see the twitter log in there there we do and check out how easy that was thanks to off zero we just clicked a couple buttons and now we have twitter login you can do the same for github facebook all that good stuff but the next question is once we are logged in how do we actually check that we are logged in so let's go ahead and make sure that we have a login button that's probably first and foremost so i'm going to close these we're going to open up our index.js and let's delete everything in there expand outward so we can select all that let's do it again there we go so this is our app right now and then we're going to say this is the header goes here and if you had a nav bar you would have a nav and inside of this nav you would have an a tag href is going to go api slash auth slash login and this would be your login button all right so let's delete all those right there we don't need those and it's complaining because it's saying we should use next link and that makes sense because we're navigating within our application so let's go ahead and do that import link from next link and we'll say here let's do this whole line we are going to wrap this with the link and we're going to move the href off of the a tag and onto the link tag okay so header goes there and then we're going to say content goes here all right so now we should be able to go here see a login button let's click login it redirects us over i'm going to log in with continue with twitter let's authorize the app and it says hey do you want to authorize this yes i do cool so we should already be logged in but our ui doesn't show it how do we actually get information about our user from here we're going to use the use user package right here and we're going to say const user is equal to use user so this is a hook that the zero package gives us so once we're all set up we can use user user and then say clg user and let's go see that in our inspect there's our object there's my name chrisev picture there's my twitter id all that good stuff right there okay so now once we have that we can say only show this link only show login if there is no user so now we can say no user and there we go and then on top of that we can say if there is a user show user info and the logout button so let's go ahead and say user and link log out log out and this is all github copilot doing all of this completion for us which is really cool and then we're going to have image source is equal to let's say user dot picture there we go so wants us to use next image this is fine for this demo let's go check out our app we have our user profile here i can click log out that logs us out and maybe there's an error here something went wrong let's see details the return to is not valid as a url allowed you log out urls okay so let's make sure that that's in our settings so we go back here applications applications youtube app and let's go down a lot log out urls oh 300 i should have put 3000 okay that's my fault let's save that let's make sure that our app still runs we'll go back the user was logged out so let's log back in and notice it already kept our social information off zero said hey they're already logged in you're good to go and let's log out and we're back to our home page so check that out we're able to log in and log out all thanks to this use user and the zero package really nice there probably one of the next things that you're going to do too is to make sure that a page is protected so let's say we had a new page and i'm going to call it dashboard and this is going to be the dashboard page what we can do here is make sure that this is protected because right now if i'm logged out and i go to slash dashboard i can see everything and this page here should be protected you shouldn't be able to see this if you're not logged in so to do that we have a handy dandy function that is provided by the auzero package and it's called with page auth required so i'm going to grab that there and what you can do is say export const get server side props is equal to with page auth required and that's all it takes to protect this page with this function right here so if i refresh it goes directly to the login page and it said nope you have to go to login first and then once i log in with twitter and i authorize this app it will actually bring us back to that dashboard page that we were supposed to be at which is a really cool feature the last part to authenticating next.js applications is authenticating api routes we've seen how easy it is with with page auth required let's say we had an api route called stats where we wanted to protect this the cool thing about this is we have with api auth required and with api auth required from the nextgs all zero package we can protect an entire api route and i'll grab some text and i have a full article with all of these snippets that you can grab this is the snippet that's required to protect a route and we're going to also pull out get session out of the package this is the way that you can protect an api route just by wrapping it with with api auth required and then you can use get session to say const user is equal to session dot user and then you can do all the things you need with your logged in user all right so that was a lot there was some really good stuff in there but overall setting up off zero authentication with nextgs just took a few simple steps and we're off to the races i have a full article down below if you want to check that out and if you did enjoy this video please like and subscribe it helps us out a lot thank you so much for watching and i'll see you in the next one

Channel: Better Dev

Views: 3,101

Keywords: web development, javascript, next.js, next.js tutorial, next.js authentication, next.js auth0, next.js auth0 tutorial, nextjs-auth0 package

Id: GzLFiG1Bbb0

Length: 16min 38sec (998 seconds)

Published: Thu Jul 29 2021