Token request fails after successful authorization in Next.js

[lmyslinski]

Issue and Steps to Reproduce

Hi, I've tried 3 different OIDC providers (Keycloak, Jumpcloud, Google) and in every one I have the exact same problem: the sign in is successful, however the subsequent request to token fails with 40x (depending on the provider). I have absolutely no idea what could be the cause of this.

Here's the current OIDC config that I'm testing:

export const googleConfig = {
  authority: "https://accounts.google.com/",
  client_id: "452838147726-ja27ntbpa0o38r8stmsqaiohasaog1bg.apps.googleusercontent.com",
  redirect_uri: "https://demo.mlnative.com/authentication/callback",
  scope: "openid profile email"
}

I can't really think of where to go further with this, as the OIDC provider doesn't provide any logs to investigate the 400. I'm happy to create some reproducible example, I'm not exactly sure whether this is an issue with the library itself. I suppose I could update the nextjs-demo and host it on vercel?

Any help would be greatly appreciated

Versions

6.14.1

Screenshots

Expected

Actual

Additional Details

• Installed packages:

[guillaume-chervet]

Hi @lmyslinski , thank you very much for your issue and help. I will be able to test it this afternoon. Did you try the version 6.13.4? It probably works.

[guillaume-chervet]

Hi @lmyslinski , did you configure oidc provider to use your configuration as client side with pkce? Whithout a secret?

[lmyslinski]

Hi @lmyslinski , did you configure oidc provider to use your configuration as client side with pkce? Whithout a secret?

I've thought about doing that, however, now that PKCE is mandatory I didn't find any option to do so on any provider. By the docs, looks like it's enabled by default on Google's end. Unfortunately, after downgrading to 6.13.4 still the same, however, there seems to be more stuff in the console:

[lmyslinski]

Same story with a local keycloak instance:

[lmyslinski]

I've deployed the next.js demo from a fork of master, same story with a fresh google config:

[lmyslinski]

I've set up a fully reproducible example on Vercel with a custom Jumpcloud account that you can use:

https://react-oidc-token-error.vercel.app/

email: oidc@react.com password: BJP5kzp-htg*nya9xwr

As for the OIDC configuration, Jumpcloud says they support "whatever's required by the relaying party" (whatever that means). I can't believe that Google nor Jumpcould would not support this out of the box

https://support.jumpcloud.com/support/s/article/Single-Sign-On-SSO-with-OpenID-Connect-OIDC

Repo with source: https://github.com/lmyslinski/react-oidc

[guillaume-chervet]

hi @lmyslinski ,

did you tried this one bellow ?

for the google configuration, I don't think they allow client side, so secret should be bring at client side (it work for demo but not for production). Here a sample : https://github.com/AxaGuilDEv/react-oidc/blob/bcf81907f5abf3493141c272a3a7c819bb968c4d/packages/react/src/configurations.ts#L79

[lmyslinski]

Yeah that's the problem, I'm not allowed to change that by hand, as supposedly it's enabled by default. When you fetch the OIDC well-known config it does say that it's supported:

    "token_endpoint_auth_methods_supported": [
        "client_secret_post",
        "client_secret_basic",
        "private_key_jwt",
        "none"
    ],

Damn, based on what you're saying it does sound like you have to go with having the secret on the client side - I've tried that with Jumpcloud as a workaround and it did work, it just seems wild. Thanks for help, I guess I'll have to go with that then