NEXTAUTH_URL environment variable not picked up in runtime

[olemaiwald]

Before opening, please confirm:

• I have checked to see if my question is addressed in the FAQ.
• I have searched for duplicate or closed issues.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
• I have removed any sensitive information from my code snippets and submission.

App Id

d3v2fml5415wm2

AWS Region

eu-central-1

Amplify Hosting feature

Frontend builds

Describe the bug

When deploying my Next JS application, I want to set an environment variable NEXTAUTH_URL.
I have set the variable via the environment variables tab in the Amplify console.

This variable also gets picked up in the build step, as I have verified with an echo $NEXTAUTH_URL in the amplify.yml file.

However, when looking at the hosting compute logs, I find the following lines

[next-auth][warn][NEXTAUTH_URL]
https://next-auth.js.org/warnings#nextauth_url

indicating that there is no NEXTAUTH_URL present in the configuration and the app defaults to a localhost configuration.

When running the same application on localhost I can successfully set the environment variable and it gets picked up by the application.

Expected behavior

Amplify should pick up the environment variable NEXTAUTH_URL.

Reproduction steps

1. Set up a NextJS project with a NextAuth.js configuration file in pages/api/auth/[nextauth].js (https://next-auth.js.org/getting-started/example)
2. Set an environment variable called NEXTAUTH_URL with an arbitrary value
3. Deploy the project to Amplify
4. Check the build logs for the next log statements complaining about the missing URL

Build Settings

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
        - echo The NEXTAUTH_URL is $NEXTAUTH_URL

    build:
      commands:
        - yarn run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Log output

# Put your logs below this line
2023-05-12T15:48:36.592Z [INFO]: # Executing command: echo The NEXTAUTH_URL is $NEXTAUTH_URL
2023-05-12T15:48:36.592Z [INFO]: The NEXTAUTH_URL is https://myurl.com
                                 # Completed phase: preBuild
                                 # Starting phase: build
                                 # Executing command: yarn run build
2023-05-12T15:48:36.716Z [INFO]: yarn run v1.22.0
2023-05-12T15:48:36.742Z [INFO]: $ next build

Additional information

No response

[ghost]

Hi @olemaiwald 👋🏽 thanks for raising this question. To access your environment variables at runtime, you'll need to echo them into your .env file.

The Next.js server component doesn't have access to environment variables by default to protect any secrets stored as environment variables that are being accessed during the build phase.

You can update your amplify.yml to echo the desired environment variables into a .env file that your app will be able to access during runtime.

Here is an example of how you can accomplish this:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - env | grep -e DB_HOST -e DB_USER -e DB_PASS >> .env.production
        - env | grep -e NEXT_PUBLIC_ >> .env.production
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
      - .next/cache/**/*
     ```

Please refer to our documentation for more information: [Making environment variables accessible to server-side runtimes](https://docs.aws.amazon.com/amplify/latest/userguide/ssr-environment-variables.html).

[olemaiwald]

Hi @hloriii, thank you for your answer. This has worked for our Amplify application!

We have experienced the same issue when deploying our NextJS App as a Docker container on ECS.
How can I make the environment variables accessible to the server-side runtime there?

[ghost]

@olemaiwald it should be the same process on ECS (although I'm most familiar with Amplify's services). But you should be able to add those variables to the .env file or create environment variables on the machine itself: Passing environment variables to a container. If you have any further questions regarding hosting with Amplify, feel free to open a new issue.

[github-actions]

⚠️COMMENT VISIBILITY WARNING⚠️

Comments on closed issues are hard for our team to see.
If you need more assistance, please either tag a team member or open a new issue that references this one.
If you wish to keep having a conversation with other community members under this issue feel free to do so.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.