Works locally but not in production :(

[michal-dobrzykowski]

Question 💬

Hi, I have a problem with next-auth 4.20.1 (in 4.19.2 it also occurs).

Site works on localhost but not on production

In logs I only have this even after setting debug: true (in addition, it is displayed as level info):

[next-auth][error][OAUTH_CALLBACK_ERROR]
https://next-auth.js.org/errors#oauth_callback_error State cookie was missing. {
error: TypeError: State cookie was missing.
at Object.use (/usr/src/app/node_modules/next-auth/core/lib/oauth/checks.js:103:23)
...
name: 'OAuthCallbackError',
code: undefined
providerId: 'google',
message: 'State cookie was missing.'

On production, I can normally go through the google login flow and cookies are set:

__Host-next-auth.csrf-token
__Secure-next-auth.callback-url
__Secure-next-auth.pkce.code_verifier
__Secure-next-auth.state

but i'm not logged in and i'm redirected to:
https://[my site]?callbackUrl=https://[my site]?error=OAuthCallback

My setup looks like this:

1. Environment variables:

• NEXTAUTH_SECRET=random password (in cloud run as mapping from secret manager)
• NEXTAUTH_URL=https://<my site without "/" in the end> (in cloud run as env)
• GOOGLE_ID=OAuth 2.0 Client ID from google cloud (in cloud run as mapping from secret manager)
• GOOGLE_SECRET=OAuth client secret from google cloud (in cloud run as mapping from secret manager)

2. OAuth client:

• type: Web application
• Authorized JavaScript origins:

1. https://[my site without "/" in the end]
2. https://[cloud run autogenerated url without "/" in the end]
3. http://localhost:3000

• Authorized redirect URIs:

1. http://localhost:3000/api/auth/callback/google
2. https://[my site]/api/auth/callback/google
3. https://[cloud run auto-generated url]/api/auth/callback/google

3. pages\api\auth[...nextauth].ts

import NextAuth, { NextAuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import { NextApiRequest, NextApiResponse } from "next";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import { prisma } from "@db/prisma";
import { Route } from "@config/routes";
import { Cookie } from "types/cookies";
import { Role } from "@type/roles";
import { createUser } from "@models/users";

export const authOptions: NextAuthOptions = {
  // debug: true,
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_ID ?? "",
      clientSecret: process.env.GOOGLE_SECRET ?? "",
    }),
  ],
  adapter: PrismaAdapter(prisma),
  session: {
    strategy: "jwt",
  },
  theme: {
    colorScheme: "auto",
  },
  pages: {
    signIn: Route.Home,
    signOut: Route.Home,
  },
  callbacks: {
    async session({ session, user, token }) {
      if (session?.user) {
        // @ts-ignore
        session.user.id = token.uid;
        // @ts-ignore
        session.user.role = token.role;
        // @ts-ignore
        session.user.cookiesAgreement = token.cookiesAgreement;
      }
      console.log("TEST", session.user, user);
      return session;
    },
    async jwt({ token, user, account, profile, isNewUser }) {
      if (user) {
        token.uid = user.id;
        // @ts-ignore
        token.role = user.role || Role.User;
        // @ts-ignore
        token.cookiesAgreement = user.cookiesAgreement;
      }

      return token;
    },
  },
};

export default async function auth(req: NextApiRequest, res: NextApiResponse) {
  const { cookies } = req;

  const referalCode = cookies[Cookie.ReferalCode];
  const cookiesAgreement = cookies[Cookie.HideCookieInfo] === "true";

  const options = {
    ...authOptions,
    events: {
      ...(authOptions?.events || {}),
      createUser: async ({ user }: any) => {
        await createUser(
          user.id,
          user.name,
          user.email,
          cookiesAgreement,
          referalCode
        );
      },
    },
  };

  return await NextAuth(req, res, options);
}

4. Prisma migration was done and cloud run can run with database

On GCP it works based on Cloud Run, Serverless VPC Access, Cloud SQL. The services communicate using the internal ip and have the appropriate permissions set. Cloud run is connected to firebase hosting (additional cache headers turned off for testing, i.e. set to "no-store, max-age=0")

I'm running out of ideas what might not work there.
Does anyone know what's wrong with this?
Thanks in advance for your help

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[depyronick]

same issue here

[e-simpson]

Having same issue with latest next-auth, prisma adapter, github provider, and vercel hosting. Frankly, getting it to work locally took some schema upgrading.

[michal-dobrzykowski]

@depyronick @e-simpson In my case, the problem was solved.
From what I tested, it occurs in 2 cases:

• no NEXTAUTH_SECRET
• discrepancy between the login domain and callbackUrl, e.g. on example.com hosting you have callbackURL on example2.com.

In my case, it was caused by Firebase hosting (even if we add a custom domain, the Firebase and cloud run service itself generates other domains for the same site).

It didn't matter that the callbackURL and the page I was on overlapped (sometimes a request from one of the backup addresses was running in the background without my knowledge)

Changing the firebase hosting -> cloud run redirection to a dedicated global load balancer with cloud run as the backend and switching cloud run to "allow only internal connection + load balancer" solved the problem (I know that you can add domain mapping in cloud run itself, but it works it's only in selected regions + I wanted to have some additional services for this, e.g. cloud armor)

I hope I helped :)

[natarajan0007]

I am also in the similar boat would you mind help me ? My application Flow LoadBalancer --> Cloud Run NextJS Frontend (Identity provider Okta)

[e-simpson]

@michal-dobrzykowski thanks for the update.
Checked into my cloud provisioning too and was able to fix it by correcting my env variables: removing NEXTAUTH_URL (unneeded with vercel integration), ensuring all env variables are available on prod, updating my CockroachDB integration & DATABASE_URL (CockroachDB Vercel integration specified a default db cluster, however, this was altered).

[danilosetra]

Removing NEXTAUTH_URL from ENV vars also worked for me. Thanks @e-simpson

[achievecreative]

We encounter this issue almost every day. I’ve personally experienced this error as well, and I am certain that the cookie has not expired.

We are using nextjs (14.2.4), next-atuh(4.24.7) to integrated with Azure AD B2C.

[roustan-devops]

Hi any update on this? currently having the same issue

"next": "15.1.6",
"next-auth": "^4.24.11",