google auth + firebase hosting + nextJS: State cookie was missing

I am developing an app in nextJS using next-auth for authentication. So far I only have Google as provider. The app is hosted using firebase hosting.

Running the app in localhost works fine, but when I want to deploy on firebase using firebase deploy --only hosting, I have an error after the google prompt. In the ssr generated method, I have the error:

State cookie was missing.

On google cloud console, in the Authorized JavaScript origins I have the following url : https://example.com. In the Authorized redirect URIs section, I have the following url: https://example.com/api/auth/callback/google

I am using :

• [email protected]
• next-auth@^4.24.11
• [email protected]

My firebase.json file is the following:

// firebase.json
{
  "hosting": {
    "source": ".",
    "site": "example",
    "frameworksBackend": {
      "region": "us-central1",
      "memory": "512MiB"
    }
  }
}

My auth.ts file is the following:

// auth.ts
export const authOptions: NextAuthOptions = {
  cookies: {
    state: {
      name: '__Secure-next-auth.state',
      options: { httpOnly: true, secure: true, sameSite: 'lax', path: '/' }
    },
    pkceCodeVerifier: {
      name: '__Secure-next-auth.pkce.code_verifier',
      options: { httpOnly: true, secure: true, sameSite: 'lax', path: '/' }
    }
  },
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
      authorization: { params: { scope: 'openid email profile https://www.googleapis.com/auth/calendar' } }
    })
  ],
  session: { strategy: 'jwt' },
  callbacks: {
    async jwt({ token, account, user }) {
      if (account?.access_token) token.accessToken = account.access_token
      if (account?.refresh_token) token.refreshToken = account.refresh_token
      if (user) token.userId = (user as any).id ?? token.userId

      return token
    },
    async session({ session, token }) {
      ;(session as any).accessToken = token.accessToken
      ;(session as any).userId = token.userId

      return session
    }
  },
  debug: true
}

My next-config.ts file:

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  basePath: process.env.BASEPATH,
  eslint: {
    // Disable ESLint during production builds to speed up deployment
    ignoreDuringBuilds: true
  },
  redirects: async () => {
    return [
      {
        source: '/:path((?!(?:en|fr|ar|front-pages|api|_next|favicon\\.ico|robots\\.txt|sitemap\\.xml)\\b).*)',
        destination: '/en/:path',
        has: [],
        permanent: true, // 308
        locale: false
      },
      {
        source: '/',
        destination: '/en/login',
        permanent: true,
        locale: false
      },
      {
        source: '/:lang(en|fr|ar)',
        destination: '/:lang/login',
        permanent: true,
        locale: false
      }
    ]
  }
}

export default nextConfig