invalid_client error

[jaffarhussain1011]

Hi,

I am using fief auth flow with the combination of chrome.identity.launchWebAuthFlow
I am able to get auth code but I am unable to get access token, and getting error 400 bad request , invalid_client.
I am using following code in extension page:

import { Fief } from "@fief/fief";

window.addEventListener("DOMContentLoaded", (event) => {
  document.querySelector("button").addEventListener("click", (e) => {
    const fief = new Fief({
      baseURL: "XXXXXX",
      clientId: "XXXXX", // removed
    });
    const redirectUrl = chrome.identity.getRedirectURL();

    fief
      .getAuthURL({
        redirectURI: redirectUrl,
        scope: ["openid"],
      })
      .then((url) => {
        console.log(url);
        chrome.identity.launchWebAuthFlow(
          { interactive: true, url: url },
          (responseUrl) => {
            console.log(responseUrl);
            const url = new URL(responseUrl);
            const params = new URLSearchParams(url.search);
            console.log(params);
            if (params.has("code")) {
              console.log(params.get("code"));
              fief
                .authCallback(params.get("code"), redirectUrl)
                .then((tokens, userInfo) => {
                  console.log(tokens, userInfo);
                })
                .catch((err) => {
                  console.log("accessTokenError", err);
                });
            }
          }
        );
      });
  });
});

CONSOLE OUTPUT

[frankie567]

Hello @jaffarhussain1011, welcome to Fief 👋

I'm not really familiar with the launchWebAuthFlow API but I think I understand why you get this.

Your Fief client is public, hence, we don't need to use the client secret at all. However, for security reasons, we enforce the use of PKCE in this case (https://docs.fief.dev/getting-started/clients/#public-clients). This is something that's handled automatically in our browser integration, but not in the base client.

Let's try something like this:

import { Fief, crypto } from "@fief/fief";

const getAuthURLWithPKCE = async (redirectUrl) => {
  // Fief helpers to generate a crypto challenge for PKCE
  const codeVerifier = await crypto.generateCodeVerifier();
  const codeChallenge = await crypto.getCodeChallenge(codeVerifier, 'S256');

  const authURL = await fief.getAuthURL({
    redirectURI: redirectUrl,
    scope: ["openid"],
    // Pass the challenge in the auth URL
    codeChallenge,
    codeChallengeMethod: 'S256',
  });

  // Return both the auth URL and the verifier so we can check it in the callback
  return [authURL, codeVerifier];
};

window.addEventListener("DOMContentLoaded", (event) => {
  document.querySelector("button").addEventListener("click", (e) => {
    const fief = new Fief({
      baseURL: "XXXXXX",
      clientId: "XXXXX", // removed
    });
    const redirectUrl = chrome.identity.getRedirectURL();

    getAuthURLWithPKCE(redirectUrl)
      .then(([url, codeVerifier]) => {
        console.log(url);
        chrome.identity.launchWebAuthFlow(
          { interactive: true, url: url },
          (responseUrl) => {
            console.log(responseUrl);
            const url = new URL(responseUrl);
            const params = new URLSearchParams(url.search);
            console.log(params);
            if (params.has("code")) {
              console.log(params.get("code"));
              fief
                .authCallback(params.get("code"), redirectUrl, codeVerifier) // Pass the code verifier to check the security challenge
                .then((tokens, userInfo) => {
                  console.log(tokens, userInfo);
                })
                .catch((err) => {
                  console.log("accessTokenError", err);
                });
            }
          }
        );
      });
  });
});

[jaffarhussain1011]

@frankie567 you are completely right, thanks a lost you saved my day.
After using your suggestion/code now its working perfectly fine and I am able to get the code!