Getting {} from /api/auth/session on Vercel Preview deployments

[blms]

Hey there,

I'm trying to figure out why I'm always getting empty JSON (w/ 304 status code) back from /api/auth/session on login. This only happens on Preview deployments and works fine in Production deployments.

Here's my [...nextauth].js: https://github.com/mitaai/AnnotationStudio/blob/blms/next-auth-debug/src/pages/api/auth/%5B...nextauth%5D.js

I'm using the Email provider and MongoDB. I set VERCEL_URL, NEXTAUTH_URL, and SITE to Vercel's built in VERCEL_URL environment variable. I know this is working because the callback from the email link successfully routes to the Preview URL. In addition, I tried switching to a fresh staging database and using a different AUTH_SECRET for the Preview deployment, to no effect.

I've also updated to 3.5.1.

Some things are definitely working: the verification email is being sent correctly; and the db, users collection, and user object are all being created and stored correctly according to my custom User model. I also get next-auth cookies. But on the frontend I'm getting back that empty JSON object from session calls and thus am functionally unable to sign in.

Any idea why I'd be getting back an empty JSON object? I saw someone say something about it might be related to a custom JWT callback, or something with the secret…?

[balazsorban44]

Have you tried debugging?:

https://next-auth.js.org/configuration/options#debug

[blms]

Yes, I'd tried that before. Thanks for reminding so I can post the output here. Here's what I'd gotten before upgrading to 3.5.1:

Though now it seems the session error is more descriptive:

Perhaps there's a problem with the provided VERCEL_URL? It's an absolute URL isn't it?

[balazsorban44]

So the last error originates from here:

next-auth/src/server/routes/session.js

Line 57 in 96ff048

logger.error('JWT_SESSION_ERROR', error)

Your source code probably has a relative url here:

https://github.com/mitaai/AnnotationStudio/blob/ca92ec30b05ff5449df24f78d54fc36e5e95f618/src/pages/api/auth/%5B...nextauth%5D.js#L75

meaning process.env.SITE does not have the value you think it has.

One other thing, you should NOT do the fetching in the session callback, as it makes /api/auth/session calls expensive! Use the jwt callback's if(isSignIn) branch instead!
Something like this should work:

...
async jwt(token, profile) {
  if (profile) {
    token.auth_time = Date.now()
    const url = `${process.env.SITE}/api/user/${profile.id}`;
    // eslint-disable-next-line no-undef
    const res = await fetch(url, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
      credentials: 'include',
    })
    if (res.ok) {
      const user = await res.json()
      token.user = {
        id: profile.id,
        name: user.name,
        firstName: user.firstName,
        groups: user.groups,
        role: user.role ?? 'user'
      }
    }
  }
  return token
},
async session(session, jwt) {
  session.user = jwt.user
  return session
}

Though I am curious does none of the jwt callback's params return the user data already for you so that you wouldn't need an extra fetch? https://next-auth.js.org/configuration/callbacks#jwt-callback

[blms]

Thanks very much, @balazsorban44! That was indeed the issue with the URLs. Just needed to add the protocol to them.

Thanks also for the tip regarding session callback. The reason why I'm doing this fetch in the session callback is to grab mutated data, such as changed name or groups, during a session. I tried using the method you've provided here and I'm not getting the mutated data in my session object from useSession(). How would I make sure mutated data is reflected there without doing a fetch in the session callback?