Theo's Typesafe Cult•12mo ago

Setting up public env vars in t3 app

I am following the docs (https://create.t3.gg/en/usage/env-variables) for setting up env vars in a t3 app. I have successfully added server env vars but I am having trouble adding client env vars. I am getting the following error Invalid environment variables: { NEXT_PUBLIC_NEXTAUTH_URL: ["Required"] } even though I have this var set up. If I log the env object it seems to be there. Here are my client and runtimeEnv objects in my env.mjs file:

client: {
    // NEXT_PUBLIC_CLIENTVAR: z.string().min(1),
    NEXT_PUBLIC_NEXTAUTH_URL: z.string(),
  },
...
runtimeEnv: {
    DATABASE_URL: process.env.DATABASE_URL,
    NODE_ENV: process.env.NODE_ENV,
    NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
    NEXTAUTH_URL: process.env.NEXTAUTH_URL,
    NEXT_PUBLIC_NEXTAUTH_URL: process.env.NEXTAUTH_URL,
    GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
    GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET,
  },

client: {
    // NEXT_PUBLIC_CLIENTVAR: z.string().min(1),
    NEXT_PUBLIC_NEXTAUTH_URL: z.string(),
  },
...
runtimeEnv: {
    DATABASE_URL: process.env.DATABASE_URL,
    NODE_ENV: process.env.NODE_ENV,
    NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
    NEXTAUTH_URL: process.env.NEXTAUTH_URL,
    NEXT_PUBLIC_NEXTAUTH_URL: process.env.NEXTAUTH_URL,
    GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
    GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET,
  },

And here is NEXTAUTH_URL in my .env file: NEXTAUTH_URL="http://localhost:3000" Any ideas what I am doing wrong?

Create T3 App

Environment Variables 🚀 Create T3 App

The best way to start a full-stack, typesafe Next.js app.

2 Replies

Matvey•12mo ago

You need to add NEXT_PUBLIC_ to the variable in the .env too

# .env
NEXT_PUBLIC_NEXTAUTH_URL="http://localhost:3000"

# .env
NEXT_PUBLIC_NEXTAUTH_URL="http://localhost:3000"

tyler4949OP•12mo ago

Thank you! Its strange you need to add duplicate env vars even for the env.mjs to pick it up but this works.

Gaming

Programming

Setting up public env vars in t3 app