9. 9
    Set up Auth0 in a Next.js app for user Authentication
    4m 52s

Set up Auth0 in a Next.js app for user Authentication

InstructorXiaoru Li

Share this video with your friends

Send Tweet

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.

Adam
Adam
~ 3 years ago

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, })

Adam
Adam
~ 3 years ago

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,
})