Ensuring User Authentication in Angular with Firebase: How to Dynamically Hide the Login Link in Navigation Based on User's Login Status

Question

Ensuring User Authentication in Angular with Firebase: How to Dynamically Hide the Login Link in Navigation Based on User's Login Status

After successfully implementing Angular Firebase email and password registration and login, the next step is to check the user's state in the navigation template. If the user is logged in, I want to hide the login button and register button. I tried searching for tutorials on how to achieve this and came across using AuthService and AuthInfo as shown here:

https://github.com/angular-university/angular-firebase-app/blob/master/src/app/shared/security/auth.service.ts

The challenge I'm facing is that these tutorials involve a lot of promises and concepts that I'm not familiar with, which can be confusing. I'm looking for a simpler approach and guidance from someone who can assist me.

Below are snippets of my current code:

Navigation -

<ul class="nav navbar-nav">
    <li><a routerLink="" routerLinkActive="active">Home</a></li>
    <li><a routerLink="login" routerLinkActive="active" *ngIf="!authInfo?.isLoggedIn()">Login</a></li>
    <li><a routerLink="register" routerLinkActive="active" *ngIf="!authInfo?.isLoggedIn()">Register</a></li>
    <li><a routerLink="quiz" routerLinkActive="active">Quiz</a></li>
</ul>

Auth service file containing user creation and login logic for Firebase -

@Injectable({
    providedIn: 'root'
})
export class AuthService {
    private user: Observable<firebase.User>;
    constructor(private _firebaseAuth: AngularFireAuth, private router: Router) {
        // Logic for initializing user

        ...

    }

    // Methods for logging in and registering users

    ...

}

... (more content follows)

angular typescript firebase firebase-authentication

Answer 1

Answer №1

To ensure persistence, it is recommended to utilize session handling for consistent user authentication even after page refreshes.

Simply create and manage a property like loggedIn within your AuthService service -

public loggedIn = false;

constructor(private _firebaseAuth: AngularFireAuth, private router: Router) {
    this.loggedIn = !!sessionStorage.getItem('user');
}

// Save the current user's email in the session upon successful login
setCurrentUser(email: String): void {
    sessionStorage.setItem('user', email);
    this.loggedIn = true;
}

// Retrieve the email of currently logged in user from session
getCurrentUser(): string | any {
    return sessionStorage.getItem('user') || undefined;
}

// Clear the session data when user logs out
logout() {
    sessionStorage.removeItem('user');
    this.loggedIn = false;
    // ... additional logout logic here
}

// Method to determine if a user is logged in
isLoggedIn() {
    return this.loggedIn;
}

Your updated method logUserIn would look like this -

logUserIn(email, pass) {
    firebase.auth().signInWithEmailAndPassword(email, pass).catch(function (error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        console.log("error" + error);
    })

    if (this.userDetails) {
        email = this.userDetails.email;
        console.log("hello im user" + " " + email);
        // Save user details in session here --->
        this.setCurrentUser(email);
    } else {
        console.log("not working");
    }

    this.router.navigate(['']);
}

When logging out, remember to call the logout() method as demonstrated above.

Lastly, include this check in your HTML template -

<li><a routerLink="login" routerLinkActive="active" *ngIf="!auth.isLoggedIn()">Login</a></li>

Answer 2

To ensure persistence, it is recommended to utilize session handling for consistent user authentication even after page refreshes.

Simply create and manage a property like loggedIn within your AuthService service -

public loggedIn = false;

constructor(private _firebaseAuth: AngularFireAuth, private router: Router) {
    this.loggedIn = !!sessionStorage.getItem('user');
}

// Save the current user's email in the session upon successful login
setCurrentUser(email: String): void {
    sessionStorage.setItem('user', email);
    this.loggedIn = true;
}

// Retrieve the email of currently logged in user from session
getCurrentUser(): string | any {
    return sessionStorage.getItem('user') || undefined;
}

// Clear the session data when user logs out
logout() {
    sessionStorage.removeItem('user');
    this.loggedIn = false;
    // ... additional logout logic here
}

// Method to determine if a user is logged in
isLoggedIn() {
    return this.loggedIn;
}

Your updated method logUserIn would look like this -

logUserIn(email, pass) {
    firebase.auth().signInWithEmailAndPassword(email, pass).catch(function (error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        console.log("error" + error);
    })

    if (this.userDetails) {
        email = this.userDetails.email;
        console.log("hello im user" + " " + email);
        // Save user details in session here --->
        this.setCurrentUser(email);
    } else {
        console.log("not working");
    }

    this.router.navigate(['']);
}

When logging out, remember to call the logout() method as demonstrated above.

Lastly, include this check in your HTML template -

<li><a routerLink="login" routerLinkActive="active" *ngIf="!auth.isLoggedIn()">Login</a></li>

Answer 3

Answer №2

Here's a more straightforward method to achieve this task. For detailed instructions, refer to the official Github documentation at: https://github.com/angular/angularfire/blob/master/docs/auth/getting-started.md

The steps you need to follow are...

myPage.component.ts

import { AngularFireAuth } from '@angular/fire/auth';
//...
constructor(public authFire: AngularFireAuth) { }

myPage.component.html

<div *ngIf="(authFire.user | async)">User is currently logged in</div>
<div *ngIf="!(authFire.user | async)">User is currently logged out</div>

Answer 4

Here's a more straightforward method to achieve this task. For detailed instructions, refer to the official Github documentation at: https://github.com/angular/angularfire/blob/master/docs/auth/getting-started.md

The steps you need to follow are...

myPage.component.ts

import { AngularFireAuth } from '@angular/fire/auth';
//...
constructor(public authFire: AngularFireAuth) { }

myPage.component.html

<div *ngIf="(authFire.user | async)">User is currently logged in</div>
<div *ngIf="!(authFire.user | async)">User is currently logged out</div>

Ensuring User Authentication in Angular with Firebase: How to Dynamically Hide the Login Link in Navigation Based on User's Login Status

Answer №1

Answer №2

Similar questions

Guide to sending jQuery data back to main class in TypeScript

What is the best way to implement react-password-checklist with zod?

Transforming Boolean data types into text within an Angular 2 client-side application

Utilizing ngFor to iterate over items within an Observable array serving as unique identifiers

Encountering a multitude of challenges when attempting to seamlessly integrate aframe into an angular2 project, especially when incorporating unit tests

Tips for verifying the presence of a Firestore Document reference within a JavaScript array of Document references

You cannot assign type 'Node | null' to type 'Node' when attempting to loop through HTML elements in TypeScript

The array contains data, yet the console is displaying a length of 0 for the array

Tips for adjusting the radio button value similarly to a checkbox in Angular 2 using *ngFor

What is the process for retrieving information from Sanity?

Storing response data as a variable in TypeScript with Angular 2 can be achieved by declaring a variable

What is the best way to account for the 'elvis operator' within a given expression?

Angular 2, using Jasmine and Karma for testing, encountered an error with the HTTP testing API, which returned an error message stating: {"isTr

What is the proper way to declare app.use using TypeScript with the node.js Express module?

Retrieve information prior to CanActivation being invoked

Utilizing a function within the catchError method

Troubleshooting Angular 2: (keyup) event not functioning on Tour of Heroes Tutorial

The potential object null may lead to an absence of the 'value' property in the type 'EventTarget'

Trying to automatically select a checkbox upon page load in Angular 6

Allow users to upload .docx and .xlsx file types with an input field of