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

No matter what I attempt, my presentation refuses to align in the center

Utilize Google Sheets to extract information from a web address containing quotation marks

"Efficiently handle JSON and binary data passing with the enhanced functionality of Express Body Parser

Limitations exist when trying to open multiple tabs using the same link in Express puppeteer

Tips for sending multiple values in a data object using jQuery AJAX

Record the success or failure of a Protractor test case to generate customized reports

Navigating variable columns and rows in a static column table

Unable to locate the element within a component using Cypress

Multiple buttons in a single field

Preventing default behavior in a JQuery post request

Learning how to utilize getDerivedStateFromProps over componentWillReceiveProps in React

Toggle the functionality of the login button in foundation

Showing Stationary Pictures at Full Size in OpenLayers

Why is it not performing as expected when removing all non-numeric elements from the array?

How can I securely store passwords for web scraping with Puppeteer to ensure maximum safety?

Creating a unique chrome extension that swaps out HTML and JavaScript components

Receiving JSON objects from Javascript in Django Views

Oops! The system encountered a problem while trying to identify the value `Han` for the property `Script

Eliminate the navigation bar option from a website template

Activate audio when the link is clicked