Auth0 is a great service for adding an authentication layer in our Next.js project, so we don't need to worry about security ourselves. Best of all, their free plan allows us to have 7000 active users with unlimited logins, sufficient for a vast majority of projects.
In this lesson, we'll set up Auth0 so that we can secure a /secret
page in the next video. We'll learn how to create a new Auth0 tenant for our Next.js app, and how to properly set up the environment variables with both .env
and next.config.js
files, to make sure our Auth0 client secret is stored safely, and how to initialize Auth0 in our project with the @auth0/nextjs-auth0
node module.
During the setup process, we'll also learn how to conditionally set environment variables using the PHASE
constants of Next.js so that we can have different values for development
or production
modes (e.g. localhost:3000
vs. example.org
). As a bonus, we'll see how we can generate a random password with OpenSSL locally in the terminal as well.
Out of date for lastest nextjs-auth0. At this time of posting v1.3. Here is the migration guide: https://github.com/auth0/nextjs-auth0/blob/main/V1_MIGRATION_GUIDE.md
New files look something like this:
const { parsed } = require('dotenv').config();
const { PHASE_DEVELOPMENT_SERVER } = require('next/constants');
module.exports = (phase, {env: parsed}) => {
const isDev = phase === PHASE_DEVELOPMENT_SERVER;
return {
env: {
REDIRECT_URI: "/api/callback",
POST_LOGOUT_REDIRECT_URI: "/secret",
AUTH0_SCOPE: "openid profile",
SERVER_URL: isDev
? "http://localhost:3000"
: "https://example.org"
}
}
}
// Config properties import {initAuth0} from "@auth0/nextjs-auth0";
export default initAuth0({ clientID: process.env.AUTH0_CLIENT_ID, clientSecret: process.env.AUTH0_CLIENT_SECRET, authorizationParams: { scope: process.env.AUTH0_SCOPE }, issuerBaseURL: process.env.AUTH0_DOMAIN, routes: { callback: process.env.REDIRECT_URI, postLogoutRedirect: process.env.POST_LOGOUT_REDIRECT_URI, }, secret: process.env.SESSION_COOKIE_SECRET, })
Out of date for lastest nextjs-auth0. At this time of posting v1.3. Here is the migration guide: https://github.com/auth0/nextjs-auth0/blob/main/V1_MIGRATION_GUIDE.md
New files look something like this:
const { parsed } = require('dotenv').config(); const { PHASE_DEVELOPMENT_SERVER } = require('next/constants');
module.exports = (phase, {env: parsed}) => { const isDev = phase === PHASE_DEVELOPMENT_SERVER;
return {
env: {
REDIRECT_URI: "/api/callback",
POST_LOGOUT_REDIRECT_URI: "/secret",
AUTH0_SCOPE: "openid profile",
SERVER_URL: isDev
? "http://localhost:3000"
: "https://example.org"
}
}
}
import {initAuth0} from "@auth0/nextjs-auth0";
export default initAuth0({
clientID: process.env.AUTH0_CLIENT_ID,
clientSecret: process.env.AUTH0_CLIENT_SECRET,
authorizationParams: {
scope: process.env.AUTH0_SCOPE
},
issuerBaseURL: process.env.AUTH0_DOMAIN,
routes: {
callback: process.env.REDIRECT_URI,
postLogoutRedirect: process.env.POST_LOGOUT_REDIRECT_URI,
},
secret: process.env.SESSION_COOKIE_SECRET,
})