firebase / firebase/firebaseui-web-react

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

Ouverte
#59 29 commentaires 14 réactions 1 personne assignée Réclamée par @jhuleatt Voir sur GitHub
Langage dominant
JavaScript
Étoiles
1.3k
Forks
246
Métriques de merge des PR
Aucune PR mergée en 30 j

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!

Guide de contribution

Ouvrir le guide de contribution

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.