firebase / firebase/firebaseui-web-react
React 18 StrictMode causes "AuthUI instance is deleted" error
- Dominant language
- JavaScript
- Stars
- 1.3k
- Forks
- 246
- PR merge metrics
- No merged PRs in 30d
Description
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](https://github.com/firebase/firebaseui-web#tips-for-initializing-a-new-ui-instance-with-the-same-auth-instance), 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:
```ts
useEffect(() => {
let firebaseUiWidget: firebaseui.auth.AuthUI;
let userSignedIn = false;
let unregisterAuthObserver: ReturnType;
// 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?
Contributor guide
Assessment
This issue has not been assessed yet.