Firefox reloads page before redirecting to the authorization endpoint

[mariaisid]

Issue and Steps to Reproduce

Firefox reloads page before redirecting to the authorization endpoint, it only happens in Firefox not in chromium based navigators.

Versions

6.15.2

Screenshots

firefox: last network petitions before reloading:

chrome:

Expected

redirect to the authorization endpoint

Actual

reloads the page from the start

Additional Details

// App.tsx

import * as React from "react";
import { Provider } from "react-redux";
import { store, onLoad, withContext, fetchAuthConfig } from "./store";
import MainApp from "./MainApp";
import { FieldsContext, fields } from "@focus/formComponents";
import "normalize.css/normalize.css";
import "./App.scss";
import { Oidc } from "@focus/coreComponents";
/**
 * This component is the root component is in charge of injecting the store provider
 * and also manage the top level router
 * it provides the main structure of the application.
 */
function App() {
  return (
    <Provider store={store}>      <Oidc fechConfig={fetchAuthConfig}>        <FieldsContext.Provider value={fields.napeos}>          <MainApp store={store} onLoad={() => onLoad()} />        </FieldsContext.Provider>      </Oidc>    </Provider>  );
}

// oidc.tsx

import React, { useEffect } from "react";
import { OidcProvider, OidcSecure } from "@axa-fr/react-oidc";
import { connect } from "react-redux";
import { LoadingApp } from "@focus/focusUI";
// This configuration use the ServiceWorker mode only
// "access_token" will be provided automaticaly to the urls and domains configured inside "OidcTrustedDomains.js"
const defaultConfig = {
  redirect_uri: window.location.origin + "/#/authentication/callback",
  silent_redirect_uri:
    window.location.origin + "/#/authentication/silent-callback", // Optional activate silent-signin that use cookies between OIDC server and client javascript to restore the session
  service_worker_relative_url: "/OidcServiceWorker.js",
  service_worker_only: true,
  service_worker_convert_all_requests_to_cors: true,
};
interface Props {
  /** Components wrapped be the oidc authentification */
  children: JSX.Element;
  /** function to call for the auth config */
  fechConfig: () => void;
  /** Oidc configuration given by the backend */
  oidcConfig: {
    /** oidc client id */
    client_id: string;
    /** oidc scope */
    scope: string;
    /** oidc authority */
    authority: string;
    authenticationRequired: boolean;
  };
}
/**
 *
 * Component that handles the oidc configuration and wraps the app in oidc authentification
 *
 */
const Oidc = ({ children, oidcConfig, fechConfig }: Props) => {
  useEffect(() => {
    fechConfig();
  }, []);
  if (!oidcConfig || Object.keys(oidcConfig).length === 0)
    return <LoadingApp />;
  if (!oidcConfig.authenticationRequired) return children;
  const configuration = { ...defaultConfig, ...oidcConfig };
  return (
    <OidcProvider
      configuration={configuration}
    >      
       <OidcSecure>{children}</OidcSecure>
    </OidcProvider>  );
};
const mapStateToProps = (state) => ({
  oidcConfig: state.oidcConfiguration.oidcConfiguration
    ? state.oidcConfiguration.oidcConfiguration.content
    : undefined,
});
export default connect(mapStateToProps)(Oidc);

• Installed packages:

[guillaume-chervet]

Oo thank you @mariaisid for your issue. Does the demo works on mozilla? https://black-rock-0dc6b0d03.1.azurestaticapps.net/profile

I cannot reproduce it on it.

[jafin]

@mariaisid do you have any other serviceworkers registered? I had a similar issue with the CRA5 serviceworker and oidc serviceworker causing similar behaviour (only in Firefox).

[mariaisid]

@jafin that was the problem, thank you!