firebase / firebase/firebaseui-web-react

React 18 StrictMode causes "AuthUI instance is deleted" error

Ouverte
#172 4 commentaires 9 réactions 0 personnes assignées Voir sur GitHub
Langage dominant
JavaScript
Étoiles
1.3k
Forks
246
Métriques de merge des PR
Aucune PR mergée en 30 j

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:

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?

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par localiser les implémentations de componentDidMount et componentWillUnmount du composant wrapper, puis comparez leur comportement de nettoyage avec le cycle de vie de React 18 StrictMode décrit ici. Reproduisez le problème dans une application locale React 18 StrictMode et vérifiez que le nettoyage laisse l’instance AuthUI utilisable et que l’UI s’affiche sans l’erreur de suppression.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
firebase, javascript, react
Domaine
authentication, frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
45/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.