Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React 18 StrictMode causes "AuthUI instance is deleted" error #172

Open
notsidney opened this issue Apr 23, 2022 · 4 comments · May be fixed by #173
Open

React 18 StrictMode causes "AuthUI instance is deleted" error #172

notsidney opened this issue Apr 23, 2022 · 4 comments · May be fixed by #173

Comments

@notsidney
Copy link

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:

Uncaught (in promise) Error: AuthUI instance is deleted!

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

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?

@Pranavb333
Copy link

I was facing this error too, just tried it again without using Strict Mode. It works fine when Strict Mode is disabled.

@adamhwoodworth
Copy link

I was facing this error too, just tried it again without using Strict Mode. It works fine when Strict Mode is disabled.

Check out the docs on about strict mode in React 18, it is mounting components twice intentionally to flush out errors for you because components should be resilient with re-mounting. If your app does not work with strict mode enabled then it could break in production.

@gpichot
Copy link

gpichot commented May 9, 2022

To complete @notsidney solution, I am using this in my app:

import React from "react";
import { Auth, onAuthStateChanged } from "firebase/auth";
import * as firebaseui from "firebaseui";

import "firebaseui/dist/firebaseui.css";

const ELEMENT_ID = "firebaseui_container";

export default function FirebaseAuth({
  uiConfig,
  firebaseAuth,
  className,
}: {
  uiConfig: firebaseui.auth.Config;
  firebaseAuth: Auth;
  className?: string;
}) {
  React.useEffect(() => {
    let userSignedIn = false;

    // Get or Create a firebaseUI instance.
    const 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.
    const 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, firebaseAuth]);

  return <div className={className} id={ELEMENT_ID} />;
}

@gvillenave
Copy link

Fixed with #173

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
5 participants