Your static Next.js site is up and running. Now you want to extend it to contain sensitive information that should be displayed only to specific people. How can you do it on a static site?
Maarten van den HoovenOct 20, 2021
In this article, I’ll introduce Auth0, explain why I chose it as an authentication provider, and take you through its integration into a static site built with Next.js step by step.
The app that I am developing is built with Next.js and is hosted on Vercel. When I thought about adding additional security to it, I first looked at the platform options. Vercel indeed provides password protection or SSO features, but only for paid accounts. Also, I intended to give access to all my colleagues by default, so I was looking for a more universal approach to the topic.
Auth0 seemed much more promising. It is a cloud-based identity authentication and authorization service for application developers. Auth0 enables users to have access to single sign-on for applications that run on multiple platforms with various identity providers, so they can use Google, Facebook, Azure AD, or other providers that you allow. The service is free of charge for basic use, so you can start directly using it.
1. First let’s create a Next.js app:
If you run your app, you will see the “Welcome to Next.js” demo app at
Now, imagine that this web app will contain sensitive information that should only be available to a specific audience. For this reason, we are going to add Auth0 to the mix.
2. Install Auth0 SDK in the newly created Next.js app:
3. Create an account on https://auth0.com and add a tenant. You can choose your own name and location:
4. Now that we have an account with a tenant on Auth0, the next step is to add an application on our Auth0 account, which will connect it to our Next.js app. Go to the Auth0 dashboard and create a new Regular Web Applications app.
Then, make sure to configure the following on the settings page:
- Allowed Callback URLs
Should be set to
http://localhost:3000/api/auth/callbackwhen testing locally or typically to
https://myapp.com/api/auth/callbackwhen deploying your application. After the user authentication, Auth0 will only call back to the URLs you added in this setting.
- Allowed Logout URLs
Should be set to
http://localhost:3000/when testing locally or typically to
https://myapp.com/when deploying your application. This is the URL where you go after you log out.
5. You can use several identity providers like Google, Facebook, Apple, Azure AD, and so on. For our application, we will create a new test user with a username and a password:
- Go to User management -> Users -> Create user
- Fill in a username and password
6. Let’s now start the magic and bring the two together. We’ll begin by adding environment variables to the Next.js app. In your local environment, create a
.env.local file in the root of your app. In this file, you need to add and adjust the following variables:
I’ll explain each of these variables below:
Create your own secret; you can generate a suitable string using the following command:
This is the URL of your application. For our local environment, it’s
AUTH0_ISSUER_BASE_URL, AUTH0_CLIENT_ID, AUTH0_CLIENT_SECRET
You can find these in your Auth0 dashboard under applications -> Default App -> Settings -> Basic information. Don’t forget to add
https:// to the
Note: Add the variables also to your other environments like test, acceptance, and production. Click here for an example of how to do this in Vercel.
7. Next, we need to add a dynamic API route handler, which creates several API endpoints as serverless functions. A serverless function (SSR) can, for example, render the
/login page from Auth0.
You do this by creating a new folder
pages/api/auth and a file
[...auth0].js. In this file, add the following piece of code:
This will automatically listen on the following URLs needed for the authentication tasks:
8. Then we need to wrap our page in the
UserProvider component provided by the Auth0 package. You do this by adding the following lines in the
9. The last step is to add authentication to the front end. You can make the whole app restricted, configure specific pages that need authentication, or handle visibility of specific elements based on user authentication status. In my case, I only have one page (
index.js) needing authentication, and that can be achieved with the
withPageAuthRequired function. You need to reference the function and wrap your page in it:
If you now go to
http://localhost:3000/ you will not see the “Welcome to Next.js” demo app, but you will get a login prompt from Auth0:
So, let’s try our created test user and fill in the credentials. If everything is correctly configured, we will now get back to our app and see “Welcome to Next.js!” Congratulations, you have successfully added authentication to your Next.js app!
With the authentication, you also get the
useUser function that enables you to protect specific content or use profile data like a username within the app. Here’s an example of how to add a simple login/logout link to your application:
You have a lot more possibilities with Auth0—for a full list, visit the official documentation that contains many examples and best practices.
I showed you how to add an authentication and authorization layer to a Next.js app. I hope you enjoyed this experience and were pleasantly surprised by the smoothness of the integration. This also illustrates the power of front-end development these days and shows how easy it is to use tools like Auth0 for doing complex functionalities in a couple of minutes.