firebase / firebase/firebaseui-web-react

React 18 StrictMode causes "AuthUI instance is deleted" error

Abierto
#172 4 comentarios 9 reacciones 0 asignados Ver en GitHub
Lenguaje dominante
JavaScript
Estrellas
1.3k
Forks
246
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

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?

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza localizando las implementaciones de componentDidMount y componentWillUnmount del componente wrapper; después, compara su comportamiento de limpieza con el ciclo de vida de React 18 StrictMode descrito aquí. Reproduce el problema en una aplicación local de React 18 StrictMode y verifica que la limpieza deje utilizable la instancia de AuthUI y que la UI se renderice sin el error de eliminación.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
firebase, javascript, react
Área
authentication, frontend
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
45/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.