How can I confirm that env variables are being added to Hosting Lambdas (Web Compute)?

[foobarnes]

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 questions.
• I have removed any sensitive information from my code snippets and submission.

App Id

d263pg34gxs8oh

AWS Region

us-east-1

Amplify Hosting feature

Environment variables

Question

I am using NextAuth. It requires an env variable NEXTAUTH_URL to be set.

NextAuth makes available several auth-related api routes with a catchall/decomp. route. api/auth/[...nextauth].js

I am logging process.env.NEXTAUTH_URL at the bottom of this route generator/config, and it seems to be correctly set at the time of NextAuth's initialization.

Immediately after, however, it appears to be unavailable from NextAuth's perspective. I receive the [next-auth][warn][NEXTAUTH_URL] warning stating Environment variable NEXTAUTH_URL missing. Please set it in your .env file. I'm not sure why that would be the case.

How can I confirm that my env variables have been applied to my SSR Lambdas? I'm using Amplify Hosting in web compute mode. These instructions for web dynamic deployments used to be the steps I'd follow to find my lambda IDs.

api/auth/[...nextauth].js

import NextAuth from 'next-auth';
// ... imports

export const authOptions = {
  debug: process.env.NODE_ENV !== 'production',
  providers: [
    TwitterProvider({
      clientId: process.env.TWITTER_CLIENT_ID,  // Correctly set
      clientSecret: process.env.TWITTER_CLIENT_SECRET,  // Correctly set
      version: '2.0'
    }),
    // ...more providers here
  ],
  secret: process.env.NEXTAUTH_SECRET  // Correctly set
  // ... other config here
};

console.log("Auth URL: ", process.env.NEXTAUTH_URL);   // Correctly logs (see CloudWatch logs below)

export default NextAuth(authOptions);

CloudWatch Logs

Amplify Console Env Variables

next.config.js

/** @type {import('next').NextConfig} */

const nextConfig = {
  reactStrictMode: true,
  async redirects() {
    // ...
  },
  async rewrites() {
    // ...
  },
  compiler: {
    // ...
  },
  env: {
    // ...
    NEXT_PUBLIC_NEXTAUTH_URL: process.env.NEXTAUTH_URL,
    NEXTAUTH_URL: process.env.NEXTAUTH_URL,
    NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
    // ...
  },
  swcMinify: true,
};

module.exports = () => {
  const plugins = [withSvgr, withBundleAnalyzer, withTM];

  return plugins.reduce((acc, plugin) => plugin(acc), {
    ...nextConfig,
  });
};

amplify.yml

version: 1
applications:
  - backend:
      phases:
        build:
          commands:
            - cd ..
            - amplifyPush --simple
            - cd web
    frontend:
      phases:
        preBuild:
          commands:
            - yarn
        build:
          commands:
            - yarn build
            - echo "NEXTAUTH_URL=$NEXTAUTH_URL" >> .env
            - echo "NEXTAUTH_SECRET=$NEXTAUTH_SECRET" >> .env
            - echo "NEXTAUTH_URL=$NEXTAUTH_URL" >> .env.production
            - echo "NEXTAUTH_SECRET=$NEXTAUTH_SECRET" >> .env.production
      artifacts:
        baseDirectory: .next
        files:
          - '**/*'
      # cache:
      #   paths:
      #     - 'node_modules/**/*' # Cache `node_modules` for faster `yarn` or `npm i`
      #     - '.next/cache/**/*' # Cache Next.js for faster application rebuilds
    appRoot: web

Questions:

• How can I confirm that my env variables have been applied to my SSR Lambdas now that I'm using Hosting Compute?

I appreciate any sanity checking as well. This has been driving me crazy. 🥲

[ghost]

Hi @foobarnes 👋🏽 thanks for providing this detailed information. You mentioned in your CloudWatch logs that the Lambda function is reporting the correct environment variable. Where are you running into the Environment variable NEXTAUTH_URL missing, could you provide a screenshot of that as well?

I'm continuing to investigate this issue and will update with more information shortly.

[ghost]

According to our documentation:

To make specific environment variables accessible to Next.js, you can modify the Amplify build specification file to set them in the environment files that Next.js recognizes. Amplify needs to be able to load these environment variables before it builds the application. The following build specification example demonstrates how to add environment variables in the build commands section.

You are following the correct steps for making those variables accessible at runtime. Feel free to create a new issue if you run into issues with this behavior.

[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.