Providers Issue: "State cookie was missing" ? (NextAuth 4.22.1)

[OatsProgramming]

(Disclaimer: I'm still relatively new to auth; I usually just use Firebase SDK)

Before starting, I should say that I'm using the app directory and placed the auth api in a NextJS 13 Route Handler.

Credentials work perfectly fine, but as for other providers (i.e. Google and Github for my case) I'd get the following error:

ERROR no.1

{
    name: 'OAuthCallbackError',
    code: undefined
  },
  providerId: 'google',
  message: 'State cookie was missing.'
}

It does redirect the user to auth server. The issue is that once they've "signed in" and come back to the original site, it would give that error. So I tried to add a cookies config to my authOptions after one topic i found ( #6898 ):

ATTEMPT no.1

cookies: {
        pkceCodeVerifier: {
          name: "next-auth.pkce.code_verifier",
          options: {
            httpOnly: true,
            sameSite: "none",
            path: "/",
            secure: true,
          },
        },
      },

Which resulted to a somewhat similar error but this time: PKCE code_verifier cookie was missing.

ERROR no.2

{
    name: 'OAuthCallbackError',
    code: undefined
  },
  providerId: 'google',
  message: 'PKCE code_verifier cookie was missing.'
}

That topic is considered answered but it doesn't solve the problem for my scenario.

I've looked at the docs for answers and I'd only find it telling me that to make sure that pkceCodeVerifier is set up properly, which was what I was attempting to do.

Then I thought it was perhaps my environment variables; so, I've updated them. Still the same issue.

Does anyone have the answer for this?

Here are my dependencies:

"dependencies": {
    "@next-auth/prisma-adapter": "^1.0.6",
    "@prisma/client": "^4.13.0",
    "@types/node": "18.16.2",
    "@types/react": "18.2.0",
    "@types/react-dom": "18.2.1",
    "bcrypt": "^5.1.0",
    "next": "13.2.4",
    "next-auth": "^4.22.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-toastify": "^9.1.2",
    "typescript": "5.0.4"
  },
  "devDependencies": {
    "@types/bcrypt": "^5.0.0",
    "prisma": "^4.13.0"
  }

My config ( might look different since it's in a Route Handler rather than a regular API Route ):

export const authOptions: NextAuthOptions = {
    adapter: PrismaAdapter(prismadb),
    session: {
        strategy: 'jwt'
    },
    providers: [
        Google({
            clientId: process.env.GOOGLE_CLIENT_ID!,
            clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
        }),
        Github({
            clientId: process.env.GITHUB_CLIENT_ID!,
            clientSecret: process.env.GITHUB_CLIENT_SECRET!
        }),
       ...
    ],
    pages: {
        signIn: '/',
    },
    debug: process.env.NODE_ENV === 'development',
    callbacks: {
        jwt: ({ token, user }) => {
            if (user) {
                return {
                    ...token, 
                    id: user.id
                }
            }
            return token
        },
        session: ({ session, token }) => {
            return {
                ...session,
                user: {
                    ...session.user,
                    id: token.id
                }
            }
        }
    },
}

const handler = NextAuth(authOptions)
export { handler as GET, handler as POST }

[vitorsorato]

same problem here