auth.js tries to import $env/dynamic/private in SvelteKit frontend

ssebastianoo commented 3 months ago

Environment

 System:
    OS: macOS 15.0
    CPU: (8) arm64 Apple M2
    Memory: 103.59 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.9.0 - /usr/local/bin/node
    Yarn: 1.22.21 - /usr/local/bin/yarn
    npm: 10.5.1 - /usr/local/bin/npm
    pnpm: 9.0.3 - /usr/local/bin/pnpm
    bun: 1.1.12 - ~/.bun/bin/bun
  Browsers:
    Chrome: 126.0.6478.61
    Safari: 18.0
  npmPackages:
    @auth/sveltekit: ^1.2.0 => 1.2.0

Reproduction URL

https://github.com/ssebastianoo/SelfStats/blob/authjs-bug/src/routes/signin/%2Bpage.svelte

Describe the issue

When trying to set up a custom sign in page the authjs library for SvelteKit tries, for some reason, to import { env } from "$env/dynamic/private"; in the client, breaking the whole app

How to reproduce

Add a custom login page following the docs

Expected behavior

$env/dynamic/private shouldn't be imported on the client

Conceptiks commented 2 months ago

I have the same issue here. @ssebastianoo Could you add back your reproduction branch? I think you deleted it by accident.

Edit: If you didn't get this to work, this bug is caused by the inclusion of the import { env } from "$env/dynamic/private" in the file you mentioned. This file is imported by the auth.js file that (as per the guide you followed) contains this:

// lib/auth.ts
const providers: Provider[] = [
  GitHub,
  Credentials({
    credentials: { password: { label: "Password", type: "password" } },
    authorize(c) {
      if (c.password !== "password") return null
      return {
        id: "test",
        name: "Test User",
        email: "test@example.com",
      }
    },
  }),
]

export const providerMap = providers.map((provider) => {
  if (typeof provider === "function") {
    const providerData = provider()
    return { id: providerData.id, name: providerData.name }
  } else {
    return { id: provider.id, name: provider.name }
  }
})

export const { handle, signIn, signOut } = SvelteKitAuth({
  providers,
  pages: {
    signIn: "/signin",
  },
})

If you now import providerMap (or anything else exported by this file) inside a client route, this will attempt to load $env/dynamic/private from the @auth/sveltekit/dist/index.js.

Fix this by simply not consuming anything from the auth.ts file in your client routes, for me, this was as simple as not using the providerMap and hard coding <SignIn provider="" /> in my client.

ssebastianoo commented 2 months ago

@Conceptiks yeah I deleted the branch forgetting about this issue. I solved it the same way you did, hardcoding it

Do you still need the branch? I can try to recreate it

ssebastianoo commented 2 months ago

Even if I solved it I'm not gonna close it because this is still a bug that pops up following the official documentation

Conceptiks commented 2 months ago

Totally agree, this should not be happening.