退出并始终弹出询问帐户Google Firebase

时间:2019-07-24 18:40:19

标签: javascript reactjs firebase firebase-authentication

我正在使用React和firebase,可以使用Google登录到该应用程序,也可以注销,但是如果我再次按login而不是询问我的帐户,请使用我以前的登录名用户。

我想要的是:当我退出并再次登录时,弹出窗口要求我提供一个帐户。

我已经尝试了几乎所有来自互联网的解决方案,而我尝试最多的是:

firebase.auth()。signOut(),firebase.getInstance.auth()。signOut(),当我想再次登录时,应用程序立即登录我,我想申请一个帐户,我不能无需任何其他帐户即可登录。

    import React from 'react';
import './App.scss';
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
import Navbar from './components/Navigation/'
import Home from './components/Home'
import MiCuenta from './components/MiCuenta'
/* import ListUsers from './components/ListUsers' */
import MyAccount from './components/MyAccount'
import SignIn from './components/SignIn'

import withFirebaseAuth from 'react-with-firebase-auth'
import * as firebase from 'firebase';
import 'firebase/auth';
import firebaseConfig from './components/FirebaseConfig/';

const firebaseApp = firebase.initializeApp(firebaseConfig);

const firebaseAppAuth = firebaseApp.auth(firebaseApp);

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      user: {
        username: '',
        edad: Number
      },
    }

    this.logout = () => firebase.auth().signOut()
    .then(function() {

    })
    .catch(function(error) {
    });

    this.loadData = this.loadData.bind(this);


  }



  loadData(){
    if(this.props.user){
      console.log(this.props.user.uid)
      let userRef = firebase.database().ref(`users`)
      let currentUser = userRef.child(this.props.user.uid);
      currentUser.on('value', data => {
        if (data.exists()) {
          this.setState({ user: data.val() })
          console.log(this.state.user)
        }
        else {
          firebase.database().ref('users/' + this.props.user.uid).set({
            username: this.props.user.displayName,
            nombre: 'string', 
            edad: 0,
            hobbies: ['futbol', 'tenis']
          });
        }
      }) 
    } else{
      console.log('not user')
    }
  }


  componentDidUpdate(prevProps) {
    if (this.props.user !== prevProps.user) {
      this.loadData()
    }
  }


  render() {
    const {
      user,
      signOut ,
      signInWithGoogle,
    } = this.props;


    return (
      <div className="App">
        {
          user
            ? 
            <div>
            <p>Hello, {this.state.user.username}</p> 
            <p>{this.state.user.edad}</p>
            </div>
            : <p>Please sign in. </p>
        }
        {
          user
            ?

            <React.Fragment>
              <Router>
                <div>
                  <button onClick={this.loadData}>loadData</button>
                  <Navbar signOut={this.logout} />
                  <Switch>
                    <Route path="/login" component={SignIn} />
                    <Route path="/Home" component={Home} />
                    <Route path="/MiCuenta" component={MiCuenta} />
                    <Route path="/MyAccount" component={() => <MyAccount userObject={this.state.user} />} />
             {/*        <Route exact path={"/ListUsers"} component={() => <ListUsers uid={user.uid} displayName={user.displayName} /> } /> */} 
                  </Switch>
                </div>
              </Router>
            </React.Fragment>
            :
            <div>
              <button onClick={signInWithGoogle}>Sign in with Google</button>
            </div>
        }

      </div>
    );
  }
}


const providers = {
  googleProvider: new firebase.auth.GoogleAuthProvider(),
};





// high order component 
export default withFirebaseAuth({
  providers,
  firebaseAppAuth,
})(App);

0 个答案:

没有答案