Error: Uncaught (in promise) Error: AuthUI instance is deleted!

[nebrelbug]

I'm using React-Router, with code like this:

// Import FirebaseAuth and firebase.
import React from "react";
import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";
import firebase from "firebase";

// Configure Firebase.
const config = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID
};

firebase.initializeApp(config);

// Configure FirebaseUI.
const uiConfig = {
  // Popup signin flow rather than redirect flow.
  signInFlow: "popup",
  // Redirect to /signedIn after sign in is successful. Alternatively you can provide a callbacks.signInSuccess function.
  signInSuccessUrl: "/signedIn",
  signInOptions: [firebase.auth.GoogleAuthProvider.PROVIDER_ID]
};

export default class SignInScreen extends React.Component {
  render() {
    return (
      <div>
        <h1>My App</h1>
        <p>Please sign-in:</p>
        <StyledFirebaseAuth
          uiConfig={uiConfig}
          firebaseAuth={firebase.auth()}
        />
      </div>
    );
  }
}

And here's my App.js

import React, { PureComponent } from "react";
import { withRouter } from "react-router";
import { Route, Switch } from "react-router-dom";
import NavigationDrawer from "react-md/lib/NavigationDrawers/NavigationDrawer";
// import { ListItem } from "react-md";
import { toTitle } from "./utils";

import { navItems, NavItemLinks } from "./pages/NavItems";
import Home from "./pages/home";
import Citations from "./pages/citations";
import Connect from "./pages/connect";

const styles = {
  content: { minHeight: "auto" }
};

class RoutingExample extends PureComponent {
  constructor(props) {
    super();

    this.state = { toolbarTitle: this.getCurrentTitle(props) };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ toolbarTitle: this.getCurrentTitle(nextProps) });
  }

  getCurrentTitle = ({ location: { pathname } }) => {
    const lastSection = pathname.substring(pathname.lastIndexOf("/") + 1);
    if (lastSection === "") {
      return "Home";
    }

    return toTitle(lastSection);
  };

  render() {
    const { location } = this.props;
    return (
      <NavigationDrawer
        toolbarTitle="My App"
        mobileDrawerType={NavigationDrawer.DrawerTypes.MINI}
        tabletDrawerType={NavigationDrawer.DrawerTypes.CLIPPED}
        desktopDrawerType={NavigationDrawer.DrawerTypes.CLIPPED}
        navItems={NavItemLinks}
        contentId="main-demo-content"
        // footer={<ListItem primaryText="Drafts" />}
        contentStyle={styles.content}
        drawerTitle={this.state.toolbarTitle}
        contentClassName="md-grid"
      >
        <Switch key={location.pathname}>
          <Route path={navItems[0].to} exact component={Home} />
          <Route path={navItems[1].to} component={Citations} />
          <Route path={navItems[3].to} exact component={Connect} />
        </Switch>
      </NavigationDrawer>
    );
  }
}
export default withRouter(RoutingExample);

I won't explain all of the code, since it's irrelevant. The problem is that the 'Sign In with Google' button only shows up the first time I go to the '/connect' page. If I navigate again and go back, the Auth UI is gone, and when I look in the console I see: "Error: Uncaught (in promise) Error: AuthUI instance is deleted!"

My app also gets slower the more I navigate to and away from the 'connect' page, which makes me think that there might be a memory leak involved.

I have the same problem with the example on the front page using state.

I'd appreciate any help. Thanks!

[nebrelbug]

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.

[nebrelbug]

@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 :)

[mattkindy]

👍
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)

[daviddudas99]

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.

[estill01]

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.

[nebrelbug]

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

[daviddudas99]

@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.

[armoredelephant]

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.

[nodkrot]

+1

[tc1236231]

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.

[jhuleatt]

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

[sherbst]

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

[AlvesJorge]

Having this issue too

[dabhishek31]

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>
  );
}