Document best practices for using nextjs-auth0 with a nextjs production build.

[martaver]

Description

During a production build, nextjs creates optimised builds for each page. Naturally, these pages won't authenticate as there is no user, however auth0 will require configuration variables, such as AUTH0_DOMAIN, AUTH0_CLIENT and so on...

These are secrets that should be injected into the application at runtime, and it strikes me that they shouldn't be necessary at build time and that would be bad practice.

Is there an official take on this?

[invasionofsmallcubes]

You know, I actually had the same doubt when I've read the tutorial. Seems weird right?
I was thinking to try a build passing the variables from environment but it's not clear if it will work at runtime on Vercel.

[jordie23]

It's because in the example the initAuth0 function is executed as soon as the file is imported.

i.e. this is generally used in the examples:

import { initAuth0 } from '@auth0/nextjs-auth0';

export default initAuth0({
  domain: '<AUTH0_DOMAIN>'
  clientId: '<AUTH0_CLIENT_ID>',
  clientSecret: '<AUTH0_CLIENT_SECRET>',
  audience: 'https://api.mycompany.com/',
  scope: 'openid profile',
  redirectUri: 'http://localhost:3000/api/callback',
  postLogoutRedirectUri: 'http://localhost:3000/',
  session: {
    cookieSecret: '<RANDOMLY_GENERATED_SECRET>',
    cookieLifetime: 60 * 60 * 8,
    cookieDomain: 'https://mycompany.com',
    storeAccessToken: true
  }
});

I changed it to:

import { initAuth0 } from '@auth0/nextjs-auth0'

let auth0 = null

export default () => {
  if (!auth0) {
    auth0 = initAuth0({
      domain: '<AUTH0_DOMAIN>'
      clientId: '<AUTH0_CLIENT_ID>',
      clientSecret: '<AUTH0_CLIENT_SECRET>',
      audience: 'https://api.mycompany.com/',
      scope: 'openid profile',
      redirectUri: 'http://localhost:3000/api/callback',
      postLogoutRedirectUri: 'http://localhost:3000/',
      session: {
        cookieSecret: '<RANDOMLY_GENERATED_SECRET>',
        cookieLifetime: 60 * 60 * 8,
        cookieDomain: 'https://mycompany.com',
        storeAccessToken: true
      }
    });
  }
  return auth0
}

Then when you import it

e.g.

import auth0 from '../../../lib/auth0'

you will need to call it like:

auth0().handleCallback(req, res, { redirectTo: '/' })

This means it'll only be executed when the code is run and not at build time.

[adamjmcgrath]

Hi @martaver - the new Beta uses named exports which lazily create an instance at runtime and therefore shouldn't need the environment variables at build time.

I recommend you check out the Beta here https://github.com/auth0/nextjs-auth0/tree/beta

There's currently an issue with one of the named exports using env vars at build time, so I'll leave this issue open while we fix that

[martaver]

That's great news! Thanks very much for looking into it!

[Widcket]

Fixed by #255.

[StianOvrevage]

Leaving a note here as well. Will the fix implemented in beta soon be merged into main branch?

[Widcket]

Hi @StianOvrevage, that is already on the main branch. That beta reached GA a few months ago.