400 invalid_grant error during OAuth2 authentication with PKCE

[pcnoic]

Hello everyone,

We've been facing an issue with the /api/token endpoint in our OAuth2 authentication flow, specifically when implementing the Proof Key for Code Exchange (PKCE).

We're managing the entire flow from our frontend application. In order to adhere to the PKCE protocol, we've written two functions: one to generate a code verifier and another to generate a code challenge from the verifier. Here they are:

// Generate a code verifier
function generateCodeVerifier() {
    var array = new Uint32Array(28);
    window.crypto.getRandomValues(array);
    return Array.from(array, dec => ('0' + dec.toString(16)).substr(-2)).join('');
}

// Generate a code challenge from a given code verifier
function generateCodeChallenge(codeVerifier) {
    return window.crypto.subtle.digest('SHA-256', new TextEncoder().encode(codeVerifier))
        .then(arrayBuffer => {
            var array = new Uint8Array(arrayBuffer);
            var string = Array.from(array, dec => ('0' + dec.toString(16)).substr(-2)).join('');
            return btoa(string).replace(/=/g, '').replace(/\+/g, '-').replace(/\//g, '_');
        });
}

We then send a POST request to the /api/token endpoint, following the protocol described in the documentation:

var xhr = new XMLHttpRequest();
var clientId = "<hidden>";
var codeVerifier = getCookie('code_verifier');

xhr.open('POST', 'https://parkawheel.fief.dev/api/token');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
var data=`grant_type=authorization_code&code=${code}&client_id=${clientId}&redirect_uri=${encodeURIComponent("http://localhost:5500/portal/src/")}&code_verifier=${codeVerifier}`;

Despite following these steps and making our endpoint a public client, we're facing a 400 invalid_grant error response from the server. We're having a hard time understanding what might be the root cause of this issue.

Any ideas or assistance would be greatly appreciated!

[frankie567]

Hello @pcnoic 👋

Two things about this:

1. Are you sure you passed the code_challenge and code_challenge_method in query parameters when redirecting to /authorize? It's key so the code can be verified later when generating the token.
2. I've not checked your implementation in details but our JS client already provides ready-to-use functions to generate the code verifier and challenge. You can see how to use it here: https://docs.fief.dev/going-further/pkce/#javascript-integration

[pcnoic]

Hey @frankie567 and thanks for your amazing work!

So, redirecting to /authorize:

var authUrl = "https://example.fief.dev/authorize";
var oauthUrl = `${authUrl}?response_type=${responseType}&client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scope}&code_challenge=${codeChallenge}&code_challenge_method=S256`;
window.location.href = oauthUrl;

So, to answer your question; yes, both the code_challenge and code_challenge_method are being passed. Thanks for pointing me to the javascript integration docs. If I fail to implement it properly I will rely to your library for doing it.

[pcnoic]

Integrating the official JS client works like a charm. Thanks again @frankie567. Closing the discussion.