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

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!

[tobysaville]

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

[ahantke1]

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