Token Request Error in Safari

[synapxe-siang13]

Issue and Steps to Reproduce

Random error when using Safari browser to try the https://black-rock-0dc6b0d03.1.azurestaticapps.net/profile-secure-component

Step to produce

1. Go to https://black-rock-0dc6b0d03.1.azurestaticapps.net/profile-secure-component
2. Enter login info
3. If login is successful, logout again and repeat steps 1 and 2.

Versions

7.22.32

Screenshots

Expected

No authentication error

Actual

Authentication error in service worker mode.

Additional Details

• code_verifier is not replaced by the Service worker.

[baesslerpa]

@synapxe-siang13 did you manage to solve this issue?
I am having the exact same problem. The Error randomly occurs in Safari.
response from token route is { “error”: “invalid_grant”, “error_description”: “grant request is invalid” }
the server is logging PKCE verification failed.

We noticed an extra _default attached to the code verifier param which seems also been attached in @synapxe-siang13 request
code_verifier=CODE_VERIFIER_SECURED_BY_OIDC_SERVICE_WORKER_default_default

[synapxe-siang13]

@baesslerpa not able to resolve.

@guillaume-chervet Can help to verify this issue?

[guillaume-chervet]

Hi @synapxe-siang13 , do you have more details about your issue. For example your configuration and service worker configuration and some code?
Does it happen sometime or everytime?

[synapxe-siang13]

@guillaume-chervet Hi, the issue happened randomly in Safari. From what I have observed, this issue does not occur in Chrome. You may verify this issue with https://black-rock-0dc6b0d03.1.azurestaticapps.net/profile-secure-component, I tested with the above demo URL, this issue happened as well. But I am not sure the configuration with your demo URL.

[baesslerpa]

function App() {
  const config: OidcConfiguration = {
    client_id: import.meta.env.VITE_CLIENT_ID,
    redirect_uri: import.meta.env.VITE_REDIRECT_URI,
    silent_redirect_uri: import.meta.env.VITE_SILENT_REDIRECT_URI,
    scope: "openid profile email ecapi offline_access",
    authority: import.meta.env.VITE_AUTHORITY,
    demonstrating_proof_of_possession: false,
    service_worker_relative_url: `/OidcServiceWorker.js?v=${axaPackage.version}`,
    service_worker_only: false,
  };
  return (
    <>
      <HelmetProvider>
        <OidcProvider
          configuration={config}>
          <RouterProvider router={router} />
        </OidcProvider>
      </HelmetProvider>
    </>
  );
}

Service worker files are not modified

    "postinstall": "node ./node_modules/@axa-fr/react-oidc/bin/copy-service-worker-files.mjs ./public",

this is the configuration we are running.
as @synapxe-siang13 mentioned the error appears randomly in Safari (Mac and IOS) but appears like every second or third try.

[baesslerpa]

function PageError() {
  // show loader while ios bug is not fixed
  useEffect(() => {
    setTimeout(() => {
      console.log("navigating to root");
      window.location.href = "/";
    }, 1000);
  }, []);

  return (
    <div className="w-screen h-screen flex items-center justify-center flex-col">
      <Spinner />
    </div>
  );
}

this works as a temporary fix

[guillaume-chervet]

I have missed the message with the extra default @baesslerpa @synapxe-siang13 , i have may be an idea . I will take a look next week.
Your safari is on mobile or desktop ?

[baesslerpa]

@guillaume-chervet happens on both platforms, I even had this bug once on chromium based browser (Arc)