In my Angular 6 application, I've implemented a login feature using Firebase's Google login. The interface includes a button labeled Login when the user is logged out, and changes to Logout with the current email address displayed when the user is logged in.
Here is an example of the code:
<p *ngIf="isLoggedIn()" class="text-white" style="margin-bottom: 0; padding-left: 10px">{{ afAuth.auth.currentUser.email }}</p>
<button *ngIf="!isLoggedIn()" class="btn btn-danger" type="button" (click)="login()">Log In</button>
<button *ngIf="isLoggedIn()" class="btn btn-danger" type="button" (click)="logout()">Log Out</button>
constructor(private afAuth: AngularFireAuth) {
}
isLoggedIn() {
return this.afAuth.auth.currentUser;
}
login() {
try {
this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider());
} catch (e) {
console.log(e.message);
}
}
logout () {
try {
this.afAuth.auth.signOut().then(() => {
this.hideAllViews();
});
} catch (e) {
console.log(e.message);
}
}
The functionality works correctly, but there's an issue where if a user is already logged in and refreshes the page, it initially shows the Login button instead of displaying the email and Logout button. Once the user interacts with the page, the correct state is shown.
It appears that the HTML loads before checking the isLoggedIn() method.
To address this, I've added the following workaround inside the constructor:
setTimeout(function () {
},
I'm seeking guidance on the best way to resolve this issue in line with Angular practices.