React 18 StrictMode causes "AuthUI instance is deleted" error

Start by locating the wrapper component's componentDidMount and componentWillUnmount implementations, then compare their cleanup behavior with the React 18 StrictMode lifecycle described here. Reproduce the issue in a local React 18 StrictMode app and verify that cleanup leaves the AuthUI instance usable and the UI renders without the deletion error.

When using react-firebaseui in React 18 with Strict Mode enabled and running a local dev server, the UI doesn’t render at all and produces this error in the console:

This is because of a change in behavior in Strict Mode to support concurrent features in React 18. Now components are mounted twice. See:

• https://github.com/reactwg/react-18/discussions/19
• https://github.com/reactwg/react-18/discussions/18

It seems the culprit is the deletion of the AuthUI instance when the component is unmounted. Reading the firebaseui documentation, it seems that this isn’t necessary to do, since the firebaseUiWidget property will either get the existing instance or create a new one.

I’ve ported the existing componentDidMount and componentWillUnmount code to a useEffect and removed the instance deletion, and used the modular v9 version of onAuthStateChanged. This seems to work for me:

useEffect(() => {
  let firebaseUiWidget: firebaseui.auth.AuthUI;
  let userSignedIn = false;
  let unregisterAuthObserver: ReturnType<typeof onAuthStateChanged>;

  // Get or Create a firebaseUI instance.
  firebaseUiWidget =
    firebaseui.auth.AuthUI.getInstance() ||
    new firebaseui.auth.AuthUI(firebaseAuth);

  if (uiConfig.signInFlow === "popup") firebaseUiWidget.reset();

  // We track the auth state to reset firebaseUi if the user signs out.
  unregisterAuthObserver = onAuthStateChanged(firebaseAuth, (user) => {
    if (!user && userSignedIn) firebaseUiWidget.reset();
    userSignedIn = !!user;
  });

  // Render the firebaseUi Widget.
  firebaseUiWidget.start("#" + ELEMENT_ID, uiConfig);

  return () => {
    unregisterAuthObserver();
    firebaseUiWidget.reset();
  };
}, [uiConfig]);

Is there something that I’m missing that would require the instance to be deleted entirely?