PKCE code_verifier cookie was missing in development

[trevorpfiz]

Environment

System:
OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
Memory: 7.12 GB / 9.72 GB
Container: Yes
Shell: 5.8 - /usr/bin/zsh
Binaries:
Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
pnpm: 8.15.1 - ~/.local/share/pnpm/pnpm
bun: 1.0.14 - ~/.local/share/pnpm/bun
Watchman: 2024.01.22.00 - /home/linuxbrew/.linuxbrew/bin/watchman

Reproduction URL

https://github.com/trevorpfiz/create-t3-turbo/tree/main

Describe the issue

adding pkceCodeVerifier cookie gives error PKCE code_verifier cookie was missing when using Google or Discord providers in development.

How to reproduce

add

pkceCodeVerifier: {
    name: 'next-auth.pkce.code_verifier',
    options: {
      httpOnly: true,
      sameSite: 'none',
      path: '/',
      secure: process.env.NODE_ENV === 'production',
    },
  },

see error when trying to login in during development with Discord or Google.

Expected behavior

I would expect no error like in production.

[marlon307]

I have the same problem but to authenticate on my subdomains

Link teste

[leo3linbeck]

Same problem with Auth0 provider.

[DuanTranHuy]

same problem with google provider nextauth v5

[wade-liwei]

same problem with github provider nextauth v5

[serethomas]

Same problem with github provider and google provider on next-auth": "5.0.0-beta.17". Has anyone found a solution?

[DeepaPrasanna]

I am using github provider and followed the documentation as it is and facing the exact same issue!

[DeepaPrasanna]

I have the same problem. Any fixes?

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

i have switched to supabase auth

[jonoise]

remove cookies from the browser. that fixed it for me.

[yeasin2002]

I'm also getting the same error,
I'm using OAuth and google provider

[zhefciad]

I fixed my problem by changing NEXTAUTH_URL in env.local from 127.0.0.1 to localhost.

[pedrobando]

remove cookies from the browser. that fixed it for me.

THANK YOUUUUUUUU

[itschip]

@trevorpfiz did you figure this one out? And if not, can I see your DiscordProvider config?

[trevorpfiz]

@trevorpfiz did you figure this one out? And if not, can I see your DiscordProvider config?

no. this? https://github.com/MithridHealth/create-t3-turbo/blob/d20d8625f9579e7c90e154d866e7425e48f5a8d1/packages/auth/src/index.ts#L32

[aramshiva]

Even after removing cookies and changing the NEXTAUTH_URL to localhost:3000, I receive this same error with Notion Provider.

[ThangHuuVu]

Hello all, I can reproduce what you are reporting with the code example from @trevorpfiz. This isn't an issue of Auth.js though, it is the way cookies work in the browser. If you set the "Same-site" attribute to none, you also need to set "Secure" to true always (See the screenshot below):

Read more at: https://web.dev/articles/samesite-cookies-explained#samesitenone_must_be_secure

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

I'm closing this issue, feel free to open a new issue if you have problems with custom cookies!

[Painwraith]

@ThangHuuVu Worked for me. Thank you.

[xcode-it]

I struggled a bit when generating the client_secret for apple provider

using npx auth add apple simplifies the process

? Paste Client ID: com.logix.inc
? Paste Key ID: FX73XXXXXX // https://developer.apple.com/account/resources/authkeys/list (Key ID)
? Paste Team ID: 93TPXXXXXX // https://developer.apple.com/account/#/membership/ (Team ID)
? Path to Private Key ./AuthKey_{Key ID}.p8
? Expires in days (default: 180) 180

which will result in

AUTH_APPLE_ID="com.organization.inc"
AUTH_APPLE_SECRET="eyJhbGciOiJFUzI1NiIsImtpZCI6IkZYNzM3RFFISkYifQ....."

__Secure-next-auth.pkce.code_verifier when using ssl in development environment instead of next-auth.pkce.code_verifier

This is how I fixed the issue

import NextAuth from "next-auth";

export default NextAuth({
  debug: true,
  providers: [
    Providers.Apple({
      clientId: process.env.APPLE_CLIENT_ID,
      clientSecret: process.env.APPLE_CLIENT_SECRET,
    }),
  ],
  cookies: {
    pkceCodeVerifier: {
      name: "next-auth.pkce.code_verifier",
      options: {
        httpOnly: true,
        sameSite: "lax",
        path: "/",
        secure: true
      },
    },
  },
});

Source: #6898 (reply in thread)