firebase / firebase/firebaseui-web-react
Error: Uncaught (in promise) Error: AuthUI instance is deleted!
- Lingua principale
- JavaScript
- Stelle
- 1.3k
- Fork
- 246
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Descrizione
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!
Guida per i contributori
Apri la guida per i contributori
Valutazione
Questa issue non è ancora stata valutata.