oidc-client: Firefox on infinite loop Uncaught (in promise) TypeError: registration.active is null

Issue and Steps to Reproduce

Uncaught (in promise) TypeError: registration.active is null

For some reason on Firefox, there will be an infinite loop on Loading. On Chrome everything works mostly alright. I’m using Okta as an identity provider, but the same problems seem to appear when using IdentityServer Demo.

Versions

react-oidc v6.13.4 & v6.14.0 tested Firefox 109.0 (64-bit)

Screenshots

registration.active is null

Expected

To work the same way as it works on Chrome as it should be.

Actual

Additional Details

Installed packages:

  "dependencies": {
    "@axa-fr/react-oidc": "^6.14.0",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/icons-material": "^5.11.0",
    "@mui/material": "^5.11.7",
    "@reduxjs/toolkit": "^1.9.2",
    "@types/jest": "^29.4.0",
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@types/react-helmet": "^6.1.6",
    "axios": "^1.3.1",
    "bootstrap": "^5.2.3",
    "dayjs": "^1.11.7",
    "fhirpath": "^3.3.1",
    "http-proxy-middleware": "^2.0.6",
    "jquery": "^3.6.3",
    "markdown-to-jsx": "^7.1.9",
    "merge": "^2.1.1",
    "oidc-client": "^1.11.5",
    "oidc-client-ts": "^2.2.1",
    "onchange": "^7.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-helmet": "^6.1.0",
    "react-redux": "^8.0.5",
    "react-router-bootstrap": "^0.26.2",
    "react-scripts": "^5.0.1",
    "reactstrap": "^9.1.5",
    "redux": "^4.2.1",
    "rimraf": "^4.1.2",
    "web-vitals": "^3.1.1",
    "workbox-background-sync": "^6.5.4",
    "workbox-broadcast-update": "^6.5.4",
    "workbox-cacheable-response": "^6.5.4",
    "workbox-core": "^6.5.4",
    "workbox-expiration": "^6.5.4",
    "workbox-google-analytics": "^6.5.4",
    "workbox-navigation-preload": "^6.5.4",
    "workbox-precaching": "^6.5.4",
    "workbox-range-requests": "^6.5.4",
    "workbox-routing": "^6.5.4",
    "workbox-strategies": "^6.5.4",
    "workbox-streams": "^6.5.4"
  },

App.tsx with oidcConfiguration

import { Routes, Route, BrowserRouter as Router } from "react-router-dom";
import AppRoutes from "./AppRoutes";
import Layout from "./components/Layout";
import { OidcProvider } from "@axa-fr/react-oidc";

const oidcConfig = {
  client_id: process.env.REACT_APP_CLIENT_ID!,
  redirect_uri: window.location.origin + "/authentication/callback",
  silent_redirect_uri:
    window.location.origin + "/authentication/silent-callback",
  scope: "openid profile email roles",
  authority: `https://dev-XXXXXXX.okta.com/oauth2/default`,
  service_worker_relative_url: "/OidcServiceWorker.js",
  service_worker_only: false,
};

const baseUrl = document.getElementsByTagName("base")[0].getAttribute("href")!;

const App = () => {

  return (
    <OidcProvider configuration={oidcConfig} onEvent={onEvent}>
      <Router basename={baseUrl}>
        <Layout>
          <Routes>
            {AppRoutes.map((route, index) => {
              const { element, ...rest } = route;
              return <Route key={index} {...rest} element={element} />;
            })}
          </Routes>
        </Layout>
      </Router>
    </OidcProvider>
  );
};

export default App;

About this issue

Original URL
State: closed
Created a year ago
Comments: 23 (15 by maintainers)

Most upvoted comments

Ok I found my issue with Firefox, My app originated from CRA4. The entry point after root.Render has this in the boilerplate code

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Which appears fine in Chrome/Edge. But Firefox was getting into the described issue above from the OP. Commenting out the serviceWorker.unregister() (and optionally the associated import to init the worker) line fixed the page reload loop.

I wasn’t able to debug this, but the CRA serviceworker.ts has this reload code (perhaps this is triggering the page reload.

function checkValidServiceWorker(swUrl: string, config?: Config) {
    // Check if the service worker can be found. If it can't reload the page.
    fetch(swUrl)
        .then((response) => {
            // Ensure service worker exists, and that we really are getting a JS file.
            const contentType = response.headers.get('content-type');
            if (response.status === 404 || (contentType != null && contentType.indexOf('javascript') === -1)) {
                // No service worker found. Probably a different app. Reload the page.
                navigator.serviceWorker.ready.then((registration) => {
                    registration.unregister().then(() => {
                        window.location.reload();
                    });
                });
            } else {
                // Service worker found. Proceed as normal.
                registerValidSW(swUrl, config);
            }
        })
        .catch(() => {
            console.log('No internet connection found. App is running in offline mode.');
        });
}

I don’t know much about service workers, are you allowed just one?
If so perhaps there needs to be some indication there is already a service worker and complain ?

EDIT: To answer my own question

A service worker registration of an identical scope url when one already exists in the user agent causes the existing service worker registration to be replaced. https://w3c.github.io/ServiceWorker/#service-worker-registration-concept

jafin on Mar 2, 2023