1 reply

Next-auth v5 config file server code leaks into client components

I'm upgrading a Next 12 pages router codebase into app router incrementally. So I have to use

<SessionProvider>

<SessionProvider>

and

useSession()

useSession()

for some parts to work. I made those work by upgrading

next-auth

next-auth

to v5. But that created another problem.

Previously, things like

singIn()

singIn()

and

signOut()

signOut()

were part of the

next-auth/react

next-auth/react

package; but now they're returned and exported from calling

NextAuth()

NextAuth()

.

Inside my

auth.ts

auth.ts

which I used some boilerplate from

create-t3-turbo

create-t3-turbo

to upgrade, I have some server code. Things like

googleapis

googleapis

db

db

and

env

env

. Apparently just because these are imported in the file, using

signIn()

signIn()

exposes them to the client bundle and I get errors such as

Module not found: Can't resolve 'fs'

Module not found: Can't resolve 'fs'

, or on the client:

Error: :x: Attempted to access a server-side environment variable on the client

Error: :x: Attempted to access a server-side environment variable on the client

.

Thanks in advance

packages: next 14 canary.51, next-auth 5 beta.13, trpc 11