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

Created on 9 Aug 2020 · 7Comments · Source: auth0/nextjs-auth0

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?

bug

Source

martaver

Most helpful comment

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.

jordie23 on 20 Aug 2020

🎉3

All 7 comments

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.

invasionofsmallcubes on 14 Aug 2020