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

What is the best way to showcase a variable from a typescript file in an HTML file with Angular?

An error has occurred in the tipo-struttura component file in an Angular application connected with a Spring backend and SQL database. The error message indicates that there is a TypeError where the

What is the best way to obtain an array of downloadable links from Firebase Storage and then store it in an object to be saved in a MongoDB

What's the best way to determine the event type when a mouseDown occurs in React while working on a canvas?

Runtime AbstractControl in Angular 2

Utilizing Angular http.post to retrieve data from Cloud Function via POST request

Encountering a GitHub REST API CORS issue while attempting to fetch a public repository's git archive

I am having trouble with the TypeScript compiler options not being detected in Visual Studio 2015

Facing issues during the unit testing of an angular component method?

Steps to include a horizontal divider in the footer section of an angular-material table

Steps for modifying the look of a button to display an arrow upon being clicked with CSS

Issue with Vue 3 / Typescript: Unable to locate variable name in template

What is the best method for regularly importing large JSON datasets into Cloud Firestore?

How to update path parameters in Angular 2 without triggering a redirect

Configuration error with MultiCapabilities

Exploring how to set dropdown menu width for Angular2 mat-select options

Execution of the RxJS pipe Finalize operator initiated prior to Observable finalization

Firing an Event with a specific target value using Jasmine

tips for utilizing a variable for inferring an object in typescript

What is the best way to pass a specific property from a parent component to a child component in Angular when a button is clicked?