Error The code_verifier cookie was not found when trying to use with PKCE

[vtrphan]

Describe the bug

I got an error : The code_verifier cookie was not found when trying to use NextAuth with protection option set to 'pkce' and identity provider is Azure B2C. I check the cookie but it was there under the name next-auth.pkce.code_verifier. Why does it say code_verifier_cookie not found ?

Steps to reproduce
Steps to reproduce the behavior.

Include a link to public repository which can be used to reproduce the behaviour.

Expected behavior
No error happens

Screenshots or error logs
If applicable add screenshots or error logs to help explain the problem.

Additional context
Add any other context about the problem here.

Feedback
Documentation refers to searching through online documentation, code comments and issue history. The example project refers to next-auth-example.

• Found the documentation helpful
• Found documentation but was incomplete
• Could not find relevant documentation
• Found the example project helpful
• Did not find the example project helpful

[balazsorban44]

Could you please provide a reproduction/some code?

Also what browser/device do you use? We have seen similar problems on iOS devices/Safari

You could try debugging as well, see if it gives you more useful info.

[vtrphan]

a full reproduction i cannot post, but i use a Mac with Chrome, and use Azure B2C with the option "protection" set to 'pkce', then comes the error. Using "protection" set to "state" also not works, i got error that the State value is invalid. So i have to set "protection" to "none".

[vtrphan]

i was trying to use it with Azure B2C (not Azure AD) , and with "protection" set to 'pkce' i got that error. I don't know from where it comes. When i check the browser cookie, i see the code_verifier cookie is there, but i still got the error

[balazsorban44]

could you confirm if the problem persists on a non-Apple device?

[vtrphan]

i don't have any windows machine so i can't really test it. But you think this is related to Apple devices?

[balazsorban44]

#952 #656 suggest that

[viniciuscr]

a full reproduction i cannot post, but i use a Mac with Chrome, and use Azure B2C with the option "protection" set to 'pkce', then comes the error. Using "protection" set to "state" also not works, i got error that the State value is invalid. So i have to set "protection" to "none".

@balazsorban44 it seems to be the same problem that I'm facing with Okta, setting the protection: pkce wont send the state param.

When using the protection: pkce, it should pass in both handlers, state-handler and pkce-handler, so we will have the state param when using the pkce protection.
pkce would also still require the nonce param, maybe another handler for that? or the pkce-handler should take care of it.
At least okta and azure b2c require this extra params, maybe some other option for protection could imply that the params must be add, so it won’t break the providers that work without this params.

protection:"pkce"
protection:"pkce-extra" //some better name here.

[goldfishgam3r]

I'm getting the exact same issue, authenticating to Azure B2C using "pkce": "OAuthCallbackError: The code_verifier cookie was not found."
For reference I am using Windows, so not an issue related with Apple.

[wjkawecki]

I'm getting the exact same issue, authenticating to Azure B2C using "pkce": "OAuthCallbackError: The code_verifier cookie was not found."
For reference I am using Windows, so not an issue related with Apple.

The same for me. It looks like the req.cookies object is empty on the callback request from my IdentityServer.

https://github.com/nextauthjs/next-auth/blob/main/src/server/lib/oauth/pkce-handler.js#L23

[balazsorban44]

@wjkawecki make sure you enable PKCE in the IDS client as well. We use it at work as well, and PKCE works just fine.

[balazsorban44]

So I think I made some progress on this. Could someone of you how is hitting this problem check if the suggested cookie changes have any effect? @vtrphan @goldfishgam3r? Also, could someone verify if they use response_mode=form_post?

#1664 (comment)

[Jordan-Hall]

@balazsorban44 Im using that response mode and cookies are empty

[balazsorban44]

have you seen the linked issue? I was told it worked for them

[Jordan-Hall]

Sorry what i meant to say

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

yes that fixed it :)

[balazsorban44]

super! since we are using cookies, for now, I don't think we have a better solution, but since third party cookies seem to go away in a few years in the future, we might have to find something else. but for now I'm closing this.

[georgeportillo]

Here's what fixed it for me:

LinkedInProvider({
      clientId: process.env.LINKEDIN_CLIENT_ID,
      clientSecret: process.env.LINKEDIN_CLIENT_SECRET,
      authorization: {
        params: { scope: 'openid profile email' },
      },
      issuer: 'https://www.linkedin.com',
      jwks_endpoint: 'https://www.linkedin.com/oauth/openid/jwks',
      profile(profile, tokens) {
        const defaultImage =
          'https://cdn-icons-png.flaticon.com/512/174/174857.png';
        return {
          id: profile.sub,
          name: profile.name,
          email: profile.email,
          image: profile.picture ?? defaultImage,
        };
      },
   })