Error: Uncaught (in promise) Error: AuthUI instance is deleted! about firebaseui-web-react HOT 29 OPEN

I too was having this problem. I removed the <React.StrictMode> from index.js and the issue was resolved.

from firebaseui-web-react.

Removing StrictMode was the only thing that has worked for me... would rather not have to do that though.

from firebaseui-web-react.

I'm getting a similar issue -- if you have more than one instance of the component, something (the component?) deletes the inner children DOM nodes of the other instances. Of note, the component uses the id label, so if you have more than one instance of the component you're overloading the id (in this case, 'firebaseui_container'). Not a solution, but perhaps helpful for finding one.

from firebaseui-web-react.

Hi, I solved the issue by adding something like :

import React, { useState, useEffect } from "react";
import firebase from "../utils/firebase/firebase";
import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";


const uiConfig = {
  signInSuccessUrl: "/",
  signInOptions: [firebase.auth.EmailAuthProvider.PROVIDER_ID]
}

export default function Home() {
  const [widget, setWidget] = useState(null);

  useEffect(() => {
    setWidget(<StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />)
  }, [])

  return (
    <div>
      {widget}
    </div>
  );
}

from firebaseui-web-react.

This problem is still very much present.

from firebaseui-web-react.

With Nextjs and create-next-app it worked by changing:

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false, // changed from true to false
  swcMinify: true,
}

module.exports = nextConfig

from firebaseui-web-react.

The problem still persists, only removing strict mode works.

from firebaseui-web-react.

I removed the <React.StrictMode> from index.js and the issue was resolved.

from firebaseui-web-react.

Exactly the same bahaviour as nebrelbug (OP). I still cannnot figure out what is wrong.
I get message "Error: AuthUI instance is deleted!" even with first load of login page. But login renders and works fine. After redirect there is no component at all.

from firebaseui-web-react.

I'm getting a similar issue -- if you have more than one instance of the component, something (the component?) deletes the inner children DOM nodes of the other instances. Of note, the component uses the id label, so if you have more than one instance of the component you're overloading the id (in this case, 'firebaseui_container'). Not a solution, but perhaps helpful for finding one.

Same here. I had this error when there was more than one instance of the component rendered on the screen. The error went away as I removed the duplicate component.

from firebaseui-web-react.

For anyone coming in late 2023, an easy workaround is shown in this firebase issue.

Basically, create your own StyledFirebaseAuth component (from source in the linked issue) and get rid of react-firebaseui. The firebaseui package is required instead.

from firebaseui-web-react.

I just checked my web app without the '/connect' page, and it works fine, with no slowdown. I'm pretty sure the problem has to do with firebaseui-web-react.

I also got this error when using the example with state:

Warning: Can’t call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

from firebaseui-web-react.

@nicolasgarnier is there any possibility you could look into this? I'm stuck in the middle of a project because I can't get auth set up :)

from firebaseui-web-react.

👍
This is also occurring for me. Fresh load of page gives me

Error: AuthUI instance is deleted!
    at Db (../node_modules/firebaseui/dist/npm.js:408:435)
    at ab (../node_modules/firebaseui/dist/npm.js:407:496)
    at dm (../node_modules/firebaseui/dist/npm.js:350:357)
    at jm (../node_modules/firebaseui/dist/npm.js:351:214)
    at Jn (../node_modules/firebaseui/dist/npm.js:404:219)
    at start (../node_modules/firebaseui/dist/npm.js:403:387)
    at Of (../node_modules/firebaseui/dist/npm.js:180:251)
    at If (../node_modules/firebaseui/dist/npm.js:181:264)
    at Jf (../node_modules/firebaseui/dist/npm.js:178:54)

from firebaseui-web-react.

@estill01 @daviddudas99 were you able to find any solutions?

from firebaseui-web-react.

@nebrelbug no I don't have a final solution. I have workaround for my web app. First login works just fine. Login, logout and than login again is the issue. So after each log out I reload whole page. Not elegant but it works fine.

from firebaseui-web-react.

I was able to get around this by moving my uiConfig to the top App component, and dispatching it to state.

const App = () => {
  const [state, dispatch] = useImmerReducer(scoutDataReducer, initialState);

  const uiConfig = {
    signInFlow: 'popup',
    signInOptions: [
      firebase.auth.GoogleAuthProvider.PROVIDER_ID
    ],
  };
  useEffect(() => {
    dispatch({ type: 'config', config: uiConfig });
  }, []);

Then I set a conditional on the StyledFirebaseAuth component to render if there is a config.

import React from 'react';
import firebase from 'firebase/app';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import 'firebase/auth';

const SignInContainerA = props => {
    const { config } = props;
    return (
        <>
            {config && <StyledFirebaseAuth uiConfig={config} firebaseAuth={firebase.auth()} />}
        </>
    );
};

export default SignInContainerA;

Not sure if helpful, but worked for me. Initially had the uiConfig directly in the SignInContainerA component and was getting the same error.

from firebaseui-web-react.

+1

from firebaseui-web-react.

Hm, maybe we can solve this by using a ref instead of a static id.

from firebaseui-web-react.

@jhuleatt Any progress on this? I am having this issue in version 5.0.2

from firebaseui-web-react.

Having this issue too

from firebaseui-web-react.

Any other solution other than removing StrictMode?

from firebaseui-web-react.

I think there is specifically an issue with it in React 18. I have gotten AuthUI to work on React 17 with no issues; but once the project is upgraded to react 18 this error occurs if strict mode is enabled. The react team did mention that 18 could cause some apps to break given strict mode got more strict this patch.

from firebaseui-web-react.

looks like we might have a fix here
#173
hopefully it gets reviewed/merged soon

from firebaseui-web-react.

I suggest that the id of the auth ui be generated with useId or any other random thing, that will allow multiple UIs in a single page.

from firebaseui-web-react.

don't know if this will cause any other issues but this works for me meanwhile:

const ui = new firebaseui.auth.AuthUI(firebase.auth());

function App(props) {

    useEffect(() => {
        const oldDelete = ui.delete
        ui.delete = () => {
        }
        return () => {
            ui.delete = oldDelete
        }
    })
    // .... some other code
    return (
        <FirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()}/>
    )
}

from firebaseui-web-react.

I too was having this problem. I removed the <React.StrictMode> from index.js and the issue was resolved.

thank, thanks actually works for me.
I was upgrading nextjs to 13.1, react 18 and got this error and removing the strict from the next.config was the only thing that fixed it

from firebaseui-web-react.

Still issue for me, removing strict mode fixed it as a workaround for now

    "next": "12.3.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-firebaseui": "^6.0.0",

from firebaseui-web-react.

suffering this one too

from firebaseui-web-react.