Add Authentication to a Next.js Application with Auth0
We'll use Auth0's Next.js quickstart guide to add authentication to our application. While doing so, we'll create and set all the right keys that we will need, create an auth api route, wrap our application in a UserProvider component and finally add a login button that uses Auth0's hook they provide.
Lecturer: [0:00] Let's go ahead and add authentication to our application. For authentication, we're going to be using Auth0. Go to auth0.com and create an account if you haven't done so already. You will be presented with a dashboard like this once you log in. In the menu, we will select applications and new application.
[0:17] We will give our application a name. For application type, we select regular web application, then select create. Next, we will search for Next.js. We'll get a little guide on how to get up and running with the Next.js and Auth0. Let's go ahead and follow these steps.
[0:39] We'll go to step one, configure Auth0. The guide tells us that we have to configure our callback URLs as well as logout URL.
[0:53] We'll scroll back up and select Settings. In the Settings, we'll look for allow to callback URLs and paste that value, and in the allow to logout URL, we're just going to do HTTP localhost 3000.
[1:11] We'll just the scroll down and save changes.
[1:18] Next, we will scroll back up again and go back to Quickstart. We'll go to step 2, and here, we have to install the Auth0 Next.js SDK.
[1:31] We will copy that and head back to our code. In our terminal, we'll paste in the command to install Auth0 Next.js SDK.
[1:38] Go back to our guide and copy the required environment variables. Inside our .env.local file, we're just going to paste this in. We'll go back to the guide.
[1:55] The next step is to add dynamic routes. We'll create a new folder called Auth under Pages API directory, create a new file called triple.auth0ts.
[2:12] This dynamic route API will handle all the Auth0-related requests. We'll head back to Auth and simply copy, paste the code here.
[2:21] We go back to Auth0 again. Tells us to wrap our components with Auth0 UserProvider. We'll go to our _app.tsx file and wrap our component tree with the UserProvider from Auth0.
[2:40] Let's head over to Nav.tsx file. Here we'll add functionality for logging in. We will import the useUser hook from Auth0. We're going to destructure user and isLoading from useUser hook.
[3:07] We will create a JSX expression under Link. We will check if the user is logged in. If the user is not logged in, we're going to show a login button. I'll create an anchor tag and the href would be api/auth/login. If the user is logged in, we'll return user information, but for now let's just return null.
[3:37] Let's apply some styles to our Login button. We will add a medium rounded border. We will give it a purple background. Apply some padding to the x-axis and some margin to the right. Add some padding to y-axis as well and let's add a left margin as well.
[4:06] Let's go ahead and try to login now. I'm going to use my Google account to login and we are logged in. Let's display some information about the logged in user. We'll create a span tag and inside it, let's display the username.
[4:23] Let's apply some styling to it. We're going to add a margin left and a margin right. Let's also show the user's profile picture. In an image tag, we will pass in the source as user.picture.
[4:41] We gave the picture some styling, like rounded borders. Let's give it a left margin as well. Let's add a Logout button. Href for this is going to be api/auth/logout. Let's try logging out and we are logged out. Let's try logging back in and we're logged in.