Ich bin neu bei Firebase und habe erfolgreich eine Authentifizierung mit E-Mail/Passwort basierend auf dem, was ich aus den Dokumentationen/Beispielen online gesammelt habe, eingerichtet. Ich habe jedoch seltsames Verhalten bei der Registrierung festgestellt. Vor allem hier ist meine Feuerbasis Auth-Code, der in einer Funktion Reagieren Komponente sitzt:Firebase - Problem mit Auth während der Registrierung
class SignupComponentInner extends Component {
toggleSignupLayoverAction(event){
this.props.toggleSignupLayover("false")
}
signUp(e) {
e.preventDefault();
var firstName = $('.signup-first-name').val();
var lastName = $('.signup-last-name').val();
var userName = $('.signup-user-name').val();
var password = $('.signup-user-password').val();
var email = $('.signup-email').val();
var auth = firebase.auth();
const promise = auth.createUserWithEmailAndPassword(email,password).then(function(user) {
var user = firebase.auth().currentUser;
user.updateProfile({
displayName: userName,
}).then(function() {
// Update successful.
// new db code here
firebase.database().ref('users/' + user.uid).set({
firstName: firstName,
lastName: lastName,
userName: userName
})
// end new db code here
}, function(error) {
// An error happened.
});
}, function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// [START_EXCLUDE]
if (errorCode == 'auth/weak-password') {
alert('The password is too weak.');
} else {
console.error(error);
}
// [END_EXCLUDE]
});
promise.catch(e => console.log(e.message));
firebase.auth().onAuthStateChanged(firebaseUser => {
if(firebaseUser) {
console.log("logged in");
var sendUserId = firebaseUser.uid;
this.props.logUserIn(sendUserId)
} else {
console.log("not logged in")
}
});
}
render() {
return (
<div onClick={this.toggleSignupLayoverAction.bind(this)} className="signup-cont-par">
<div className="signup-component-inner">
<div className="signup-component-content" onClick={cancelBubble.bind(this)}>
<h2>Sign up today!</h2>
<form className="signup-form-elem">
<input placeholder="First Name" className="signup-first-name" type="text"></input>
<input placeholder="Last Name" className="signup-last-name" type="text"></input>
<input placeholder="Username" className="signup-user-name" type="text"></input>
<input placeholder="Password" className="signup-user-password" type="password"></input>
<input placeholder="Email Address" className="signup-email" type="text"></input>
<button onClick={this.signUp.bind(this)}>Sign Up</button>
</form>
</div>
</div>
</div>
)
}
}
So ist die Registrierung Teil funktioniert genau so, wie es sollte aber seinen den Login-Teil hier, das verursacht Probleme:
firebase.auth().onAuthStateChanged(firebaseUser => {
if(firebaseUser) {
console.log("logged in");
var sendUserId = firebaseUser.uid;
this.props.logUserIn(sendUserId)
} else {
console.log("not logged in")
}
});
Es wird im Grunde zweimal ausgeführt, wenn ich console.log zweimal "angemeldet" habe. Nicht sicher, warum das ist?
Das andere Problem ist die Funktion, die es von den Requisiten ruft this.props.logUserIn(sendUserId) Diese Funktion verbirgt grundsätzlich ein "create account" CTA und ersetzt es durch ein Hallo {{username}}. Der Benutzername wird bei der Registrierung aktualisiert, aber seltsamerweise wird er auf den Benutzernamen aktualisiert, den ich im vorherigen Register registriert habe! Hier ist die logUserIn Funktion, wenn es hilft:
logUserIn(userId) {
var db = firebase.database();
var ref = db.ref('/users/' + userId);
console.log(userId);
ref.once('value').then((snapshot) => {
var userObject = snapshot.val();
var loggedUserName = userObject.userName;
this.setState({
LoggedInUsername:loggedUserName
})
});
this.setState({
loggedInState:true,
LoggedInId:userId,
signingUp:"inactive"
})
},
Hier loggedUserName ist ein Zustand, der bis auf die Hauptkomponente geleitet wird, um den Benutzernamen zu zeigen, dass gerade erst registriert wurde (derjenige, der falsch ist die vorherige registrierten Person zeigt, wenn es sollte das Neueste zeigen). Nicht sicher, wo ich falsch gelaufen bin.