NextAuth.js - Define a secret

Posted on October 19, 2022  •  3 minutes  • 448 words  • Other languages:  Français

Today, an article about the excellent NextAuth.js library that handles authentication for NextJS.

The v4 of NextAuth.js, released a few months ago, has brought a lot of new features. Among the changes, there is the obligation, for the production, to generate and provide a secret to NextAuth so that it can generate the JWT useful for the sessions.

This secret will be used by NextAuth to :

• hash the JWT tokens
• sign and encrypt the session cookies
• generate public/private keys

If you don’t define any secret, you will have the following errors after a build for a production phase:

MissingSecret [MissingSecretError]: Please define a `secret` in production.

ERROR[next - auth][error][NO_SECRET];

Steps to define and provide a secret to NextAuth

1 - Generate a secret

To do this, open a terminal under Linux (I imagine that Windows also has the openssl command) and type :

openssl rand -base64 32

The output of this order will be your secret, a string like : Ey7nTKnggBc0bRN8WUjyShw2qzOZ6KW4fUyqcKBePxY=

Through my research, I discovered a URL that generates randoms here : https://generate-secret.vercel.app/32 (GitHub project ). Be careful though, we don’t know the entropy level of their server, and we don’t know the code that is really running behind it… so for a real production I advise you to generate it yourself with the openssl command or to host the code of the “generate-secret” project to use it.

2- Place this secret in an environment variable

I recommend you to put this secret in an environment variable. You can use the .env file (or .env.local) or directly your next.config.js file. Here I take the example of the next.config.js file that I prefer to work with. In this file, add the line with the value NEXTAUTH_SECRET and your secret.

My example:

module.exports = {
    reactStrictMode: true,
    swcMinify: true,
    env: {
        mongodb_username: 'USERNAME',
        mongodb_password: 'PASSWORD',
        mongodb_db: 'DB',
        NEXTAUTH_URL: 'https://r4ven.fr',
        NEXTAUTH_SECRET: 'Ey7nTKnggBc0bRN8WUjyShw2qzOZ6KW4fUyqcKBePxY=',
    },
};

3- Adding the secret in the next-auth configuration

Once your secret is set as an environment variable, next-auth must be able to access it. Under NextJS, environment variables are accessible on the server side through the process.env object and it is the NEXTAUTH_SECRET property that we are interested in here.

On your application, go to the file /pages/api/auth/[...nextauth].js, and add at the same level as providers and your possible callbacks, the value :

secret: process.env.NEXTAUTH_SECRET,

4- Relaunch a build

Finally, remember to run a new npm run build and you’re all set 🥳 !

NOTE : In the NextAuth documentation, it is said to make secret generation will be required even in development mode in the next versions of the library. So, you might as well start this good habit now, even in development mode.