firebase / firebase/firebaseui-web-react

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

Open
#59 29 comments 14 reactions 1 assignee Claimed by @jhuleatt View on GitHub
Dominant language
JavaScript
Stars
1.3k
Forks
246
PR merge metrics
No merged PRs in 30d

Description

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 (


My App


Please sign-in:




);
}
}
```
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 (
}
contentStyle={styles.content}
drawerTitle={this.state.toolbarTitle}
contentClassName="md-grid"
>






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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.