Hiding elements in FireBase and Angular based on user identification

Question

Hiding elements in FireBase and Angular based on user identification

Currently venturing into the world of Firebase in conjunction with AngularJS after previously working with php and server-side rendered pages.

I am grappling with how to securely hide specific parts of an application from certain users. I have three distinct levels of users - guests, members, and admins. Using ng-show based on user type can hide elements client-side, but the data is still being sent to the user.

An applicable scenario:

The menu options vary depending on the user's level. My initial thought was to use ngshow and check for the uuid, but revealing the admin's uuid seems like a major security risk.

Another idea was to store the menu items in a database and retrieve them as needed. However, this approach could lead to numerous deliberate 'unauthorized access attempts' by certain users.

What is the proper way to address this issue? It feels like there must be a crucial aspect regarding client-only applications that utilize Firebase services that I am overlooking.

javascript angularjs firebase firebase-realtime-database firebase-authentication

Answer 1

Answer №1

Inspect the userStatus method within the service layer and its implementation in other layers.

Service Layer :

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { AngularFireAuthModule, AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';

@Injectable()
export class AuthService {

  user: Observable<firebase.User>;
  
  constructor(private fireAuth: AngularFireAuth) {
  }

  loginGoogle() {

    this.fireAuth.auth.signInWithPopup(new firebase.auth.EmailAuthProvider())
      .catch(function (error) {
        alert('Please try again');
      });
  }

  logout() {
    this.fireAuth.auth.signOut();
  }

  userStatus() {
    return this.fireAuth.authState;
  }
}

Navbar Component :

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { Observable } from 'rxjs/Observable';
import * as firebase from 'firebase/app';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {

  user: Observable<firebase.User>;

  constructor(private authservice: AuthService) {
    this.user = this.authservice.userStatus();
  }

  ngOnInit() {
  }

  login() {
    this.authservice.loginGoogle();
  }

  logout() {
    this.authservice.logout();
  }
}

Here is the Navbar view, where you can display or hide elements based on whether the user is authenticated :

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" routerLink="/">Firebase</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item ">
        <a class="nav-link" routerLink="/">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" *ngIf="(user | async)?.uid" routerLink="/listings">Listings</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" *ngIf="(user | async)?.uid" routerLink="/add-listing">Add Listing</a>
        </li>
    </ul>
    <ul class="navbar-nav navbar-right">
      <li class="nav-item">
        <a class="nav-link" *ngIf="!(user | async)?.uid" (click)="login()">Login</a>
        <a class="nav-link" *ngIf="(user | async)?.uid" (click)="logout()">Logout</a>
      </li>
    </ul>
    <div *ngIf="(user | async)?.uid">
        <img src="{{(user | async)?.photoURL}}" style="width:30px;height:30px;">
        <br> Email: {{(user | async)?.email}}
        <br> Name: {{(user | async)?.displayName}}
      </div>
  </div>
</nav>

Answer 2

Inspect the userStatus method within the service layer and its implementation in other layers.

Service Layer :

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { AngularFireAuthModule, AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';

@Injectable()
export class AuthService {

  user: Observable<firebase.User>;
  
  constructor(private fireAuth: AngularFireAuth) {
  }

  loginGoogle() {

    this.fireAuth.auth.signInWithPopup(new firebase.auth.EmailAuthProvider())
      .catch(function (error) {
        alert('Please try again');
      });
  }

  logout() {
    this.fireAuth.auth.signOut();
  }

  userStatus() {
    return this.fireAuth.authState;
  }
}

Navbar Component :

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { Observable } from 'rxjs/Observable';
import * as firebase from 'firebase/app';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {

  user: Observable<firebase.User>;

  constructor(private authservice: AuthService) {
    this.user = this.authservice.userStatus();
  }

  ngOnInit() {
  }

  login() {
    this.authservice.loginGoogle();
  }

  logout() {
    this.authservice.logout();
  }
}

Here is the Navbar view, where you can display or hide elements based on whether the user is authenticated :

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" routerLink="/">Firebase</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item ">
        <a class="nav-link" routerLink="/">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" *ngIf="(user | async)?.uid" routerLink="/listings">Listings</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" *ngIf="(user | async)?.uid" routerLink="/add-listing">Add Listing</a>
        </li>
    </ul>
    <ul class="navbar-nav navbar-right">
      <li class="nav-item">
        <a class="nav-link" *ngIf="!(user | async)?.uid" (click)="login()">Login</a>
        <a class="nav-link" *ngIf="(user | async)?.uid" (click)="logout()">Logout</a>
      </li>
    </ul>
    <div *ngIf="(user | async)?.uid">
        <img src="{{(user | async)?.photoURL}}" style="width:30px;height:30px;">
        <br> Email: {{(user | async)?.email}}
        <br> Name: {{(user | async)?.displayName}}
      </div>
  </div>
</nav>

Hiding elements in FireBase and Angular based on user identification

An applicable scenario:

Answer №1

Similar questions

Deleting Firestore ancestor documents and sub-collections that do not exist

Error in JSON Format Detected in Google Chrome Extension

Unable to set the active tab using $rootScope

Navigating production mode in nuxtjs and uncovering errors

Converting long date format to short date format: yyyy-mm-dd

Tips for showcasing the Phaser game screen exclusively within a React route

Resolving a CSS Layout Dilemma: How to Overlay Sidebar on Wrappers

Create a form in a React component that allows the user to input information

The Vue.js component is only refreshing after I manually refresh the browser page

How can I resolve the issue of encountering the "Modal dialog present: If you navigate away from this page, any unsaved changes will be lost" message while using Internet Explorer with

Step-by-step guide for serving static JavaScript files using NextJS

Using AJAX for uploading files upon a change event rather than upon submission

Replace existing styled-component CSS properties with custom ones

Tips for organizing multiple TextField components within a Grid container using Material-UI

Having trouble getting my JavaScript code to function properly on Firefox browser

Tips for arranging bar series in the NVD3 multibar angularJS directive

What is the best way to retrieve EXIF data following the AJAX loading of images?

When attempting to submit form data, req.file returns as undefined

Storing data in a text or HTML file using server-side JavaScript

Modify the paragraph's class upon clicking the radio button