Add Login to Your Next.js Application
This guide demonstrates how to integrate Auth0 with any new or existing Next.js application using the Auth0 Next.js SDK. We recommend that you log in to follow this quickstart with examples configured for your account.
To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.
Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.
If you would rather explore a complete configuration, you can view a sample application instead.
Configure Callback URLs
A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.
Configure Logout URLs
A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.
Run the following command within your project directory to install the Auth0 Next.js SDK:
npm install @auth0/nextjs-auth0Was this helpful?
The SDK exposes methods and variables that help you integrate Auth0 with your Next.js application using Route Handlers on the backend and React Context with React Hooks on the frontend.
In the root directory of your project, add the file .env.local with the following environment variables:
AUTH0_SECRET: A long secret value used to encrypt the session cookie. You can generate a suitable string usingopenssl rand -hex 32on the command line.AUTH0_BASE_URL: The base URL of your application.AUTH0_ISSUER_BASE_URL: The URL of your Auth0 tenant domain. If you are using a Custom Domain with Auth0, set this to the value of your Custom Domain instead of the value reflected in the "Settings" tab.AUTH0_CLIENT_ID: Your Auth0 application's Client ID.AUTH0_CLIENT_SECRET: Your Auth0 application's Client Secret.
The SDK will read these values from the Node.js process environment and automatically configure itself.
Create a file at app/api/auth/[auth0]/route.js. This is your Route Handler file with a Dynamic Route Segment.
Then, import the handleAuth method from the SDK and call it from the GET export. This creates the following routes:
/api/auth/login: The route used to perform login with Auth0./api/auth/logout: The route used to log the user out./api/auth/callback: The route Auth0 will redirect the user to after a successful login./api/auth/me: The route to fetch the user profile from.
On the frontend side, the SDK uses React Context to manage the authentication state of your users. To make that state available to all your pages, you need to override the Root Layout component and wrap the <body> tag with a UserProvider in the file app/layout.jsx.
The authentication state exposed by UserProvider can be accessed in any Client Component using the useUser() hook.
Checkpoint
Now that you have added the route handler and UserProvider, run your application to verify that your application is not throwing any errors related to Auth0.
Users can now log in to your application by visiting the /api/auth/login route handler provided by the SDK. Add a link that points to the login route using an anchor tag. Clicking it redirects your users to the Auth0 Universal Login Page, where Auth0 can authenticate them. Upon successful authentication, Auth0 will redirect your users back to your application.
Checkpoint
Add the login link to your application.
- When you click it, verify that your Next.js application redirects you to the Auth0 Universal Login page and that you can now log in or sign up using a username and password or a social provider.
- Once that's complete, verify that Auth0 redirects back to your application.
Now that you can log in to your Next.js application, you need a way to log out. Add a link that points to the /api/auth/logout API route. Clicking it redirects your users to your Auth0 logout endpoint (https://YOUR_DOMAIN/v2/logout) and then immediately redirects them back to your application.
Checkpoint
Add the logout link to your application. When you click it, verify that your Next.js application redirects you to the address you specified as one of the "Allowed Logout URLs" in the "Settings".
The Auth0 Next.js SDK helps you retrieve the profile information associated with the logged-in user, such as their name or profile picture, to personalize the user interface.
The profile information is available through the user property exposed by the useUser() hook. Take this Client Component ProfileClient as an example of how to use it.
Checkpoint
Verify that you can display the user.name or any other user property within a component correctly after you have logged in.
The profile information is available through the user property exposed by the getSession function. Take this Server Component ProfileServer as an example of how to use it.
Checkpoint
Verify that you can display the user.name or any other user property within a component correctly after you have logged in.
Next Steps
Excellent work! If you made it this far, you should now have login, logout, and user profile information running in your application.
This concludes our quickstart tutorial, but there is so much more to explore. To learn more about what you can do with Auth0, check out:
- Auth0 Dashboard - Learn how to configure and manage your Auth0 tenant and applications
- nextjs-auth0 SDK - Explore the SDK used in this tutorial more fully
- Auth0 Marketplace - Discover integrations you can enable to extend Auth0’s functionality
Sign up for an or to your existing account to integrate directly with your own tenant.