firebaseui-web-react

firebaseui-web-react copied to clipboard

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!

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.

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

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

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.

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.

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

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

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.

+1

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.

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

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

Having this issue too

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

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

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

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

Any other solution other than removing StrictMode?

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.

looks like we might have a fix here https://github.com/firebase/firebaseui-web-react/pull/173 hopefully it gets reviewed/merged soon

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.

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()}/>
    )
}

This problem is still very much present.

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

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",

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

The problem still persists, only removing strict mode works.

suffering this one too

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.