Implement user Authentication in a Next.js app with Auth0
With the Auth0 set up in our Next.js project, the next step is to integrate the authentication flow into our app.
In this lesson, we'll set up the API routes Auth0 needs to handle the auth process - /api/login, /api/logout and /api/callback. Then, we'll use the getServerSideProps lifecycle method in Next.js to authenticate users on the server-side. Finally, we'll update our /secret page component to have different states depending on the login session status of a visitor.
After this lesson, you will understand how to implement the user authentication logic in a Next.js app with Auth0.
Xiaoru Li: [0:01] To implement the actual authentication logic in our app, let's create a new login API route first. Inside the login API handler, we'll import the Auth0 instance and write auth0.handleLogin then pass in the request and the response. If there is an error in the process, we'll catch it and return a status code with the error message instead.
[0:34] Let's copy the code we just wrote and do the same for logout API route. Here, we'll use handleLogout instead. Finally, we'll do the same for callback. We can also specify which URL we want to redirectTo afterwards. Let's set it to our "⁄secret" route.
[1:04] Let's go to the secret page. We're going to check if the user is logged in dynamically on the server side, so we'll create and export a new getServerSideProps function.
[1:20] We'll import the Auth0 instance and use auth0.getSession to retrieve the user session based on the incoming request. Then we'll extract the user object and pass the username to our page component as a prop.
[1:42] We'll also wrap everything here inside a try-catch block so if the user is not logged in or doesn't have the right cookie sent along with the request, an error will be thrown and we'll return an error prop with the error.message instead.
[1:59] Let's go back to our page component and handle the props. Let's render the text, "You are not logged in," if the error is present, but, "Welcome," otherwise. We'll also print out the error message if it's present, or otherwise, the username. Let's also make the button dynamic based on the session state of the user.
[2:42] Now let's restart the dev server and test our entire authentication flow. As we click on the Log in button, we'll be sent to the login API route, which will in turn redirect us to Auth0. We'll create a new account, Authorize App, and then we'll be sent back to the secret page over the callback API route. We can refresh the page and the log in state will persist.