SvelteKit 2.0 Build Error - Cannot read values from $env/dynamic/private while prerendering

[ubemacapuno]

Environment

System:
OS: macOS 14.2.1
CPU: (8) arm64 Apple M1
Memory: 443.92 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 21.5.0 - /usr/local/bin/node
npm: 10.2.4 - /usr/local/bin/npm
pnpm: 8.10.5 - ~/Library/pnpm/pnpm
Browsers:
Chrome: 120.0.6099.109
Safari: 17.2.1
npmPackages:
@auth/sveltekit: ^0.5.0 => 0.5.0
@sveltejs/kit: ^2.0.0
@Vite: ^5.0.3
@typescript: ^5.0.0

Reproduction URL

https://github.com/ubemacapuno/authjs-sveltekit2-demo.git

Describe the issue

Hey all, I'm using @auth/sveltekit with the newly-released SvelteKit 2.0. I noticed that my dev environment runs fine, but when I try to build, I run into an error regarding environment variables.

There is a section in the SvelteKit 2.0 migration docs for "Dynamic environment variables cannot be used during prerendering", where it is mentioned, "...dynamic environment variables can no longer be read during prerendering in SvelteKit 2 — you should use the static modules instead." I believe this is why I am running into trouble when running the build script.

Using SvelteKit 2.0 and @auth/sveltekit and building the project locally, I receive this error in my terminal:

Error: Cannot read values from $env/dynamic/private while prerendering (attempted to read env.AUTH_SECRET). Use $env/static/private instead

Any insight on a fix would be greatly appreciated, because I'm getting stuck just going off of the docs. Thank you!

How to reproduce

After starting a SvelteKit 2.0 project with @auth/sveltekit and setting up hooks.server.ts and environment variables per the docs, I run into an error when running npm run build:

You can checkout my demo, set .env for GITHUB_ID, GITHUB_SECRET, and AUTH_SECRET and run npm run build to see the error, or recreate yourself:

1. Create a new SvelteKit project (currently version 2.0): npm create svelte@latest my-app and also install @auth/sveltekit with npm install @auth/sveltekit
2. Make sure dependencies are all installed with npm install
3. Per the @auth.sveltekit docs, setup the src/hooks.server.ts file.
4. Make sure to set your environmental variables per the docs (GITHUB_ID, GITHUB_SECRET, and AUTH_SECRET)
5. Run npm run build
6. See in your terminal for error:

Error: Cannot read values from $env/dynamic/private while prerendering (attempted to read env.AUTH_SECRET). Use $env/static/private instead

Expected behavior

Expect a build without the following error:

Cannot read values from $env/dynamic/private while prerendering (attempted to read env.AUTH_SECRET). Use $env/static/private instead

[bradcypert]

@ubemacapuno A workaround here is to manually set your AUTH_SECRET environment variable and statically import it:

import {GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET, AUTH_SECRET} from "$env/static/private";

And then pass it in like so:

export const handle = SvelteKitAuth({
  providers: [GitHub({ clientId: GITHUB_CLIENT_ID, clientSecret: GITHUB_CLIENT_SECRET })],
  trustHost: true,
  secret: AUTH_SECRET
})

[ubemacapuno]

export const handle = SvelteKitAuth({
  providers: [GitHub({ clientId: GITHUB_CLIENT_ID, clientSecret: GITHUB_CLIENT_SECRET })],
  trustHost: true,
  secret: AUTH_SECRET
})

This works and makes sense, thanks @bradcypert !

[balazsorban44]

Hmm. Making AUTH_SECRET a static value does not sound like a good idea. I'll think about this.

[iamsbro]

This was due to a SvelteKit bug fixed in sveltejs/kit#11436

[Davidonium]

@ubemacapuno A workaround here is to manually set your AUTH_SECRET environment variable and statically import it:

import {GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET, AUTH_SECRET} from "$env/static/private";

And then pass it in like so:

export const handle = SvelteKitAuth({
  providers: [GitHub({ clientId: GITHUB_CLIENT_ID, clientSecret: GITHUB_CLIENT_SECRET })],
  trustHost: true,
  secret: AUTH_SECRET
})

That will embed those env var values into the generated js file, which I don't think is secure. The secrets will then go to whatever lambda engine / node server / docker image the code will run and a security audit will flag it.

[balazsorban44]

Hi everyone, this has been fixed in @auth/[email protected], please upgrade!

In addition, a neat new feature was added, that we call environment variable inference! This simplifies the configuration:

import { SvelteKitAuth } from "@auth/sveltekit";
import GitHub from "@auth/sveltekit/providers/github";
- import {GITHUB_ID, GITHUB_SECRET} from "$env/dynamic/private"

- export const handle = SvelteKitAuth({ providers: [
-   GitHub({clientId: env.GITHUB_ID, clientSecret: env.GITHUB_SECRET})
- ] });
+ export const handle = SvelteKitAuth({ providers: [GitHub] });

The only thing to keep in mind is to prefix your environment variables with AUTH_. So GITHUB_ID -> AUTH_GITHUB_ID and GITHUB_SECRET -> AUTH_GITHUB_SECRET. This way SvelteKit Auth knows about these values.

Please give it a try, and if you have any issues, open a new bug report with a reproduction!