我正在使用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);