Implement user Authentication 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.