next build failing with missing environment variables #1356

nickzelei · 2023-08-10T19:06:10Z

Checklist

The issue can be reproduced in the nextjs-auth0 sample app (or N/A).
I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
I have looked into the API documentation and have not found a suitable solution or answer.
I have searched the issues and have not found a suitable solution or answer.
I have searched the Auth0 Community forums and have not found a suitable solution or answer.
I agree to the terms within the Auth0 Code of Conduct.

Description

I'm running next build against a fresh repo generated with the create next app and am running into build errors due to missing Auth0 environment variables.

It seems that this is because I don't have a .env.local with the environment variables specified there.
Why do I need this? These will be provided at runtime, so am confused as to why they are failing build steps.

I followed these two issues which seem to have fixed this, but I am not seeing that.

npm run build             

> [email protected] build
> next build

- info Creating an optimized production build  
- info Compiled successfully
- info Linting and checking validity of types  
- info Collecting page data ..TypeError: "secret" is required
    at get (/Users/nick/code/playground/my-app/.next/server/chunks/877.js:367:15)
    at getConfig (/Users/nick/code/playground/my-app/.next/server/chunks/877.js:1664:45)
    at getInstance (/Users/nick/code/playground/my-app/.next/server/chunks/877.js:2744:63)
    at handleAuth (/Users/nick/code/playground/my-app/.next/server/chunks/877.js:2791:31)
    at 83739 (/Users/nick/code/playground/my-app/.next/server/app/api/auth/[auth0]/route.js:126:32)
    at __webpack_require__ (/Users/nick/code/playground/my-app/.next/server/webpack-runtime.js:25:42)
    at __webpack_exec__ (/Users/nick/code/playground/my-app/.next/server/app/api/auth/[auth0]/route.js:172:39)
    at /Users/nick/code/playground/my-app/.next/server/app/api/auth/[auth0]/route.js:173:78
    at __webpack_require__.X (/Users/nick/code/playground/my-app/.next/server/webpack-runtime.js:138:21)
    at /Users/nick/code/playground/my-app/.next/server/app/api/auth/[auth0]/route.js:173:47

> Build error occurred
Error: Failed to collect page data for /api/auth/[auth0]
    at /Users/nick/code/playground/my-app/node_modules/next/dist/build/utils.js:1156:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}
- info Collecting page data .%

Reproduction

npx create-next-app@latest
Add /app/api/auth/[auth0]/route.ts file with the recommended setup.
npm run build

You can skip the first two steps by cloning my repo here: https://github.com/nickzelei/auth0-bug
Running npm run build results in an error due to missing environment variables.

This can be fixed by adding a basic .env.local file

AUTH0_SECRET=replace-with-your-own-secret-generated-with-openssl
AUTH0_BASE_URL=http://localhost:3000
AUTH0_ISSUER_BASE_URL='https://example.com'
AUTH0_CLIENT_ID='{CLIENT_ID}'
AUTH0_CLIENT_SECRET='{CLIENT_SECRET}'
AUTH0_AUDIENCE=
AUTH0_SCOPE='openid profile'

Additional context

No response

nextjs-auth0 version

3.1.0

Next.js version

13.4.13

Node.js version

18.16.0

The text was updated successfully, but these errors were encountered:

adamjmcgrath · 2023-08-11T13:41:24Z

Hi @nickzelei - thanks for raising this

Originally I thought this was an issue with Next.js trying to statically render an API route when it used a Dynamic function.

But I see the SDK is trying to get config before Next.js can bail out of static rendering the route. I don't think this is going to get fixed on the Next.js end, so I'll leave this open to investigate a solution.

In the meantime, you can use your workaround of providing dummy values to the build.

pkabra · 2023-08-18T05:08:22Z

+1 running into this. My builders are spread across different environments so ideally I'd like to avoid remembering to update the environments everywhere. Working around this right now by just having some default environment variables everywhere. Specifically impacting APIs using the App Router and withApiAuthRequired.

nextjs-auth0 version - 3.0.1
Next.js version - 13.4.12
Node.js version - 18.7.1

nguaman · 2023-08-19T19:46:03Z

Perhaps this bug is related to the following pull request (vercel/next.js#54203), which was fixed in version v13.4.19.

g12i · 2023-08-22T14:18:27Z

I fixed this by calling handleAuth inside the route handler as such:

export const GET = async (req, ctx) => {
  const response = await handleAuth()(req, ctx);
  return response;
};

You can avoid calling it each time by lazy storing it in scope:

import { handleAuth, type AppRouteHandlerFn } from "@auth0/nextjs-auth0";

let _handleAuth: AppRouteHandlerFn | undefined;

export const GET: AppRouteHandlerFn = async (req, ctx) => {
  if (typeof _handleAuth === "undefined") {
    _handleAuth = handleAuth() as AppRouteHandlerFn;
  }
  const response = await _handleAuth(req, ctx);
  return response;
};

nickzelei · 2023-08-22T15:59:16Z

It makes sense that lazy loading it will fix it as the environment variables won't be access until they need to be (which is how it should be imo 😄 ) - however, I'm not sure putting the handleAuth inside of a GET function is the way to go here. handleAuth is intended to be used as a spread and offers more than just GET methods. Most of the auth methods are POST I believe.
While it might compile, I have doubts that it would work as intended.

g12i · 2023-08-22T16:40:40Z

These two are mutual:

export const GET = x();

export const GET = (...args) => x()(...args);

Except, of course, that the x() is called in runtime. At the end of the day handleAuth returns the same NextJS route handler (see here). So it's all GET requests. The spread is used to catch multiple routes (/login,/logout, /callback, etc.) but not the HTTP method.

tr3ysmith · 2023-09-13T14:27:03Z

Yeah I'm running into this when pushing to Azure Static Web Apps as well... This seems ridiculous to check for a secret during CI...

Implementing the fix from @g12i worked, Thanks!!

kangbojk · 2023-09-25T19:22:26Z

still encounter the error

My app/api/auth/[auth0]/route.js

import {
  handleAuth,
  handleLogin,
  handleLogout,
  handleProfile
} from "@auth0/nextjs-auth0";

let _handleAuth;

export const GET = async (req, ctx) => {
  if (!_handleAuth) {
    _handleAuth = handleAuth;
  }

  const response = await _handleAuth({
    login: handleLogin({
      authorizationParams: {
        audience: process.env.AUTH0_AUDIENCE,
        // If you want to check the authorization server for if you have a
        // session, you need to visit it with a login (you can use `prompt=none``
        // to fail silently if the user doesn't have a session).
        prompt: "login",
        scope: "email offline_access openid profile readwrite:any"
      },
      returnTo: "/incidents"
    }),
    logout: handleLogout(() => {
      return {
        returnTo: "/"
      };
    }),
    profile: handleProfile({ refetch: true }),
    onError(req, error) {
      console.error("An Auth0 error occured:", error);
    }
  })(req, ctx);
  return response;
};

tommyguo · 2023-11-06T21:43:12Z

@g12i's fix does fix the TypeError: "secret" is required error originating from api/auth/[auth0]/route.ts but I'm still seeing the error for pre-rendered pages:

Error occurred prerendering page "/dashboard". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: "secret" is required

adamjmcgrath · 2023-11-07T17:23:26Z

Hi all 👋 - I've published an experimental tag that defers reading the configuration of the SDK until request time, which allows the SDK to instruct Next.js to bail out of static rendering before the config is read - full pr is #1541 (interesting bit is bec7d6c#diff-c3095d5010e65c52737a98a5d618ea24049ebe90c8470752426081d70ed6e012)

@nickzelei - I've tested it on your repo and confirm that the project builds successfully without the .env.local

I'd be grateful if a few other people who have requested this tried it out too and let me know if they experience any issues.

You can test the experimental tag by installing the SDK like so npm i @auth0/nextjs-auth0@experimental-lazy-conf

nickzelei · 2023-11-08T22:28:58Z

hey @adamjmcgrath your changes seem to allow a build now.

I reproduced by:

git clone [email protected]:nickzelei/auth0-bug.git && cd auth0-bug
npm install
npm run build <-- fail
npm i @auth0/nextjs-auth0@experimental-lazy-conf
npm run build <-- success

Awesome!

cyber-nic · 2023-11-20T11:27:44Z

@adamjmcgrath, thank you for resolving the previous issue.

Retracting my comment as this thread is unrelated to my concern.

adamjmcgrath added the needs investigation This needs to be investigated further before proceeding label Aug 11, 2023

adamjmcgrath mentioned this issue Nov 7, 2023

Bail out of static rendering for pages and routes in app dir #1541

Merged

adamjmcgrath closed this as completed in #1541 Nov 13, 2023

frederikvanhevel mentioned this issue Dec 10, 2024

Deploying to Vercel throws NoApiKeyProvideException workos/authkit-nextjs#113

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

next build failing with missing environment variables #1356

next build failing with missing environment variables #1356

nickzelei commented Aug 10, 2023

adamjmcgrath commented Aug 11, 2023

pkabra commented Aug 18, 2023

nguaman commented Aug 19, 2023

g12i commented Aug 22, 2023 •

edited

Loading

nickzelei commented Aug 22, 2023 •

edited

Loading

g12i commented Aug 22, 2023 •

edited

Loading

tr3ysmith commented Sep 13, 2023

kangbojk commented Sep 25, 2023

tommyguo commented Nov 6, 2023 •

edited

Loading

adamjmcgrath commented Nov 7, 2023 •

edited

Loading

nickzelei commented Nov 8, 2023 •

edited

Loading

cyber-nic commented Nov 20, 2023 •

edited

Loading

next build failing with missing environment variables #1356

next build failing with missing environment variables #1356

Comments

nickzelei commented Aug 10, 2023

Checklist

Description

Reproduction

Additional context

nextjs-auth0 version

Next.js version

Node.js version

adamjmcgrath commented Aug 11, 2023

pkabra commented Aug 18, 2023

nguaman commented Aug 19, 2023

g12i commented Aug 22, 2023 • edited Loading

nickzelei commented Aug 22, 2023 • edited Loading

g12i commented Aug 22, 2023 • edited Loading

tr3ysmith commented Sep 13, 2023

kangbojk commented Sep 25, 2023

tommyguo commented Nov 6, 2023 • edited Loading

adamjmcgrath commented Nov 7, 2023 • edited Loading

nickzelei commented Nov 8, 2023 • edited Loading

cyber-nic commented Nov 20, 2023 • edited Loading

g12i commented Aug 22, 2023 •

edited

Loading

nickzelei commented Aug 22, 2023 •

edited

Loading

g12i commented Aug 22, 2023 •

edited

Loading

tommyguo commented Nov 6, 2023 •

edited

Loading

adamjmcgrath commented Nov 7, 2023 •

edited

Loading

nickzelei commented Nov 8, 2023 •

edited

Loading

cyber-nic commented Nov 20, 2023 •

edited

Loading