PKCE flow does not work

[viniciuscr]

Describe the bug
Using provider with specify PKCE auth flow does not work.
A provider such Okta expects a PKCE flow to work, this flow expect the follow params:

client_id=0oapu4btsL2xI0y8y356
&redirect_uri=http://localhost:3000/api/auth/callback/okta
&response_type=id_token token
&response_mode=fragment
&state=SU8nskju26XowSCg3bx2LeZq7MwKcwnQ7h6vQY8twd9QJECHRKs14OwXPdpNBI58
&nonce=Ypo4cVlv0spQN2KTFo3W4cgMIDn6sLcZpInyC40U5ff3iqwUGLpee7D4XcVGCVco
&scope=openid profile email

Using the protection: "pkce" config, does not seems to work, it also removes the param state.
I tried to create a custom provider, but I could not find any logic where the nonce param is set.

Steps to reproduce
I've used the Okta provider and tried with and without the protection: "pkce".

Expected behavior
protection: "pkce" should have the follow changes:

• keep the state param
• add nonce param
• response_type changed to id_token token code
• add response_mode = fragment

Screenshots or error logs
Error provided on next console does not match the errors returned by the okta api.
The real erros from the api would be complaining about missing params.

Feedback
there is a great doc about PKCE with okta here:
https://developer.okta.com/blog/2019/08/22/okta-authjs-pkce

• 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]

please provide a full reproduction. we are using PKCE at work (not with Okta) without any problems

[viniciuscr]

without given my credentials it's impossible to you to reproduce, unless you have a okta account.
Same problems was reported here, 9days ago:
#685 (comment)

[balazsorban44]

Some kind of information must be given, or we are as helpless as you are. As mentioned, I cannot see this issue occurring on our end, so there must be something special with your usecase/config. Providing more information is the key to resolve the problem. We could start by looking at your [...nextauth].js file and how you initiate the login flow from your code. Node, next-auth, Next.js versions, what kind of OS/Browser it is, etc.

#1367, #952 etc. might be similar if your problem happens on Safari. Looks like people have problems with those especially.

[viniciuscr]

I using last stable version or all libs:

 "next-auth": "^3.12.0",
 "next": "10.0.3",
 "react": "17.0.1",

For [...nextauth].js I followed the default config.

import NextAuth from "next-auth";
import Providers from "next-auth/providers";

export default NextAuth({
  providers: [
    Providers.Okta({
      clientId: "xxxxxxxx",
      domain: "xxxxxx.oktapreview.com/oauth2/xxxxxxxxxxx",
      protection: "pkce",
    }),
  ],
});

protection: "pkce" stops sending the state parameter, and still missing some params, such as nonce
I ave also tried to play around with a custom provider, but was not able to do any progress.

Tried passing response_type on params object and also direct on the authorizationUrl,
But the problem is the nonce code.
The console also alerts about response_type been invalid, it wants authorization_code or implicit, what okta does not accept.

{
      id: "okta",
      name: "Okta2",
      type: "oauth",
      version: "2.0",
      scope: "openid profile email",
      params: {
        response_type: "id_token token",
        response_mode: "fragment",
        redirect_uri: "http://localhost:3000/api/auth/callback/okta",
      },
      accessTokenUrl: `https://xxx.oktapreview.com/oauth2/xxxxxxx/v1/token`,
      authorizationUrl: `https://xxx.oktapreview.com/oauth2/xxxxxxx/v1/authorize/?response_type=id_token`,
      profileUrl: `https://xxx.oktapreview.com/oauth2/xxxxxxx/v1/userinfo/`,
      async profile(profile, tokens) {
        // You can use the tokens, in case you want to fetch more profile information
        // For example several OAuth provider does not return e-mail by default.
        // Depending on your provider, will have tokens like `access_token`, `id_token` and or `refresh_token`
        return {
          id: profile.id,
          name: profile.name,
          email: profile.email,
        };
      },
      clientId: "xxxx",
      protection: "pkce",
    },

I'm testing on a macos, chrome browser, does not to seems to be an issue

[balazsorban44]

As far as I can tell, authorization code with PKCE is what Okta also expects and recommends https://developer.okta.com/blog/2019/08/22/okta-authjs-pkce

nonce and state are (according to my understanding) not part of the PKCE flow, so they shouldn't be causing a problem here, I think.

Here is the specs for how we implement PKCE https://tools.ietf.org/html/rfc7636#section-4

Could you also provide the errors you are getting? Both from next-auth and Okta?

[viniciuscr]

When using the protection: "pkce"
I got this:
http://localhost:3000/api/auth/callback/okta?error=invalid_request&error_description=The+authentication+request+has+an+invalid+%27state%27+parameter.

without protection: "pkce"
I got this:
http://localhost:3000/api/auth/callback/okta?state=2e828fc976033919e8f99caee9c4774ca469d5359a650fbe9d3b5af09cfe7b04&error=invalid_request&error_description=PKCE+code+challenge+is+required+when+the+token+endpoint+authentication+method+is+%27NONE%27.

using the custom provider
I got this:
http://localhost:3000/api/auth/callback/okta#error=invalid_request&error_description=The+%27nonce%27+parameter+is+required+for+authorize+requests+with+either+the+%27id_token%27+or+%27token%27+response+types..

the params expected for okta with PKCE are the follow:
https://developer.okta.com/blog/2019/08/22/okta-authjs-pkce#replace-implicit-flow-with-pkce

Nextjs console gives me:

https://next-auth.js.org/errors#oauth_callback_error {
  statusCode: 400,
  data: `{"error":"invalid_request","error_description":"The token request must specify a 'grant_type'. Valid values: [authorization_code, implicit]"}`
}

adding

 params: {
        grant_type: "authorization_code" ..

gives me :

https://next-auth.js.org/errors#oauth_callback_error {
  statusCode: 400,
  data: '{"error":"invalid_grant","error_description":"The authorization code is invalid or has expired."}'
}

But, again, this next-auth erros, does not match the response from okta.

I do remember seeing the same params for Azure B2C.

[balazsorban44]

Thanks 👍, you provided plenty of information now, I hope this will help to debug this issue.

[viniciuscr]

As far as I can tell, authorization code with PKCE is what Okta also expects and recommends https://developer.okta.com/blog/2019/08/22/okta-authjs-pkce

nonce and state are (according to my understanding) not part of the PKCE flow, so they shouldn't be causing a problem here, I think.

Here is the specs for how we implement PKCE https://tools.ietf.org/html/rfc7636#section-4

Could you also provide the errors you are getting? Both from next-auth and Okta?

I think we should be looking at this doc: https://tools.ietf.org/html/rfc6749

[viniciuscr]

I've a suggestion to fix it:
#1565

[balazsorban44]

This has now been merged, and [email protected] will hopefully resolve your problem! Cheers! 🥳

[ranjeetthorat]

@viniciuscr is this resolved