NextAuth.js - Define a secret
Posted on October 19, 2022 • 3 minutes • 462 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:
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 :
The output of this order will be your secret, a string like :
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.
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 :
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.