firebase / firebase/firebaseui-web-react

React 18 StrictMode causes "AuthUI instance is deleted" error

Aperta
#172 4 commenti 9 reazioni 0 assegnatari Vedi su GitHub
Lingua principale
JavaScript
Stelle
1.3k
Fork
246
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

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:
- 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?

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.