Dealing with errors in Angular when using Firebase and observables can

I'm facing an issue with implementing error detection in Angular Firebase. Whenever new users log in to my website, they encounter a permission error in the database, which is displayed in the console.

My goal is to have auth.isApproved return false when this error occurs, but it currently does not do so. I attempted to add a .catch to the .switchMap function, but it was unsuccessful.

The error message in the console is as follows:

Uncaught Error: permission_denied at /authorization/users/VAST9WnazFUc6u9PQ5x74bOPIsJ2: Client doesn't have permission to access the desired data.

Component where the error is encountered:

this.auth.isApproved().subscribe(approved => {
  console.log(approved);

AuthService (auth):

isApproved(): Observable<boolean> {
    return this.user$
    .switchMap(user => this.DataService.getSharesDBUser(user.uid).valueChanges())
    .map(appUser => appUser.isApproved)
  }

DataService (DataService)

getSharesDBUser(userUID: string): AngularFireObject<firebaseDBUser> {
    return this.db.object('/authorization/users/' + userUID);
  }

Data Model Interface:

export interface firebaseDBUser {
  isAdmin: boolean;
  isApproved: boolean;
  name: string;
}

Answer №1

One possible solution could be to implement a try-catch block around the this.db.object(...) function call, if the error is not being caught by the catch operator within the valueChanges observable chain.

isApproved(): Observable<boolean> {
    return this.user$.switchMap(user =>
        this.DataService.getSharesDBUser(user.uid).valueChanges()
            .map(appUser => appUser.isApproved)
            .catch(() => Observable.of(false))
    )
}

In the event that the error is not occurring within the valueChanges observable chain, a try-catch block surrounding the this.db.object(...) function call may help in capturing the error. It's worth exploring this additional approach if the current implementation is not working as expected.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The TS2339 error has occurred because the "email" property cannot be found on the specified "Object" type

I encountered an issue while using Angular 5, here is the code snippet : signIn(provider) { this._auth.login(provider).subscribe( (data) => { console.log(data); this.hideForm = false; this.emaill = data.email; ...

Is the position of 'subscribe()' in the code important?

My query revolves around the positioning of code utilizing RxJS, specifically involving subscribe. If I were to place the following example inside a function: this.genericService.getXYZ().pipe( takeWhile(() => this.componentActive) ).subscribe ...

Looking to verify a file using ngx-file-drop in Angular 5 or higher?

I am currently implementing "ngx-file-drop" in Angular 6. <file-drop headertext="Drop files here" (onFileDrop)="dropped($event)" (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)" multiple> <span> ...

Extracting information from console output and displaying it in a table with angular2

https://i.stack.imgur.com/BMt6J.pngI am facing an issue with retrieving data from the console output and populating it into an HTML table. Can someone please assist me with this? Here is the HTML Code: <table class="table"> <tr> <t ...

Tips for extracting information from Firebase and showing it on a Google gauge chart

I'm having some trouble displaying data from Firebase on a gauge chart. I keep getting an error that says "Uncaught (in promise)". Here's the JavaScript code I've been working with: <script type="text/JavaScript"> google.ch ...

Issue with BehaviorSubject<Object[]> causing incorrect array data upon initial subscription

I am facing an issue with a BehaviorSubject where the first .subscribe callback is returning an Array with 6 Objects. Strangely, in console output, it shows length: 6, but every for-loop I iterate through the array only runs 5 times and even when I log arr ...

Sign in to Azure for an Angular application within the iFrame of another Angular application

I have two separate Angular apps, both enabled with Azure AD login. When accessed separately in the tab, they function properly - redirecting and obtaining the token without issue. Now, I aim to make Angular 1 the Parent and Angular 2 the child within a s ...

Exciting new venture utilizing Angular version 15 in combination with the latest Firebase 9

Recently, I set up node version 18.10.0 and attempted to start a fresh Angular 15 project using Firebase 9 for hosting, Firestore database, and authentication. However, after running the commands below, I noticed that the @angular/fire directory was missin ...

The flexibility of adjusting the percentage in the ng-circle-progress feature

Currently, I am utilizing ng-cycle-progress in my Angular progress. Here is the HTML code: <circle-progress [percent]="score" [radius]="100" [outerStrokeWidth]="16" [innerStrokeWidth]="8" [outerStrokeColor]="'#78C000'" [innerStrok ...

Customize the width of the intl-tel-input field using Angular

Utilizing the Nebular ngx-admin template in my Angular application, along with ng2-tel-input for mobile number input. Below is the HTML code I am using: <div class="form-control-group"> <label class="label" for=" ...

The AngularJS 2 application reports that the this.router object has not been defined

My function to sign up a user and redirect them to the main page is implemented like this: onSubmit(){ this.userService.createUser(this.user).subscribe(function (response) { alert('Registration successful'); localStor ...

What is the best method to display a service property within a controller?

If we consider the scenario where I have a controller named ctrlA with a dependency called serviceB, which in turn has a property known as propertyC. My development environment involves Angular and Typescript. When interacting with the user interface, the ...

Troubleshooting routing errors when deploying Angular 6 on hosting name.com

After loading my Angular 6 application using CLI in a standard hosting service at name.com, I encountered some issues. Here are the steps I followed: Ran 'ng build --prod' command This command generated the dist folder In the root directory of ...

Is it normal that aws-eventbridge-lambda does not generate a Lambda function?

I've been experimenting with the AWS CDK (Typescript) to enhance my knowledge. I'm interested in setting up a lambda function to run daily at a specific time or at intervals of N minutes. Since I anticipate having multiple functions, it would be ...

Coloring input fields in Angular Material 2

Changing Angular Material 2 Input Color <md-input-container > <input type="password" md-input placeholder="password"> </md-input-container> I am looking to change the color of the input field when it is clicked. Can anyone provide gu ...

What causes the data in tableview to constantly be in a random order?

Here is a relevant part of my code for my question. It works almost fine, except for one thing - the data is always sorted randomly. In terms of the code: I need to retrieve data (name of CoffeeShop and .jpg) from Firebase and display the photo in a tableV ...

Assign a value using the select component from Material UI

I just finished creating a dropdown menu const [selectedValue, setSelectedValue] = useState(''); const handleSelectionChange = (e: any) => { //setSelectedValue(e) console.log('value', selectedValue) } .... <Fo ...

Guide on setting up p-menubar in PrimeNG to expand in the opposite direction, from left to right, for the responsive

How can I modify the CSS styles or configure the p-menubar from PrimeNg to have it expand from right to left in the responsive version? Currently, when using the classes align-items-center flex justify-content-between, the menu remains stuck to the right e ...

Developing a Link Element in Angular 2

Exploring the creation of a wrapper component in Angular 2, inspired by tools like react-bootstrap. The goal is to avoid repeating the component structure each time and instead create a reusable component. The desired reusable component should have a stru ...

The resolution of a promise occurs upon the invocation of a function

I have a component A that has the capability to display an image: <img *ngIf="displayImgService.showImage" (click)="displayImgService.hideImage()" src="..."> Additionally, I've developed a service called manageImgS ...