firebase / firebase/firebaseui-web-react

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

Offen
#59 29 Kommentare 14 Reaktionen 1 zugewiesene Person Beansprucht von @jhuleatt Auf GitHub ansehen
Vorherrschende Sprache
JavaScript
Sterne
1.3k
Forks
246
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

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!

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.