Connecting AngularFirebaseAuth: Running server API immediately following Firebase authentication?

Question

Connecting AngularFirebaseAuth: Running server API immediately following Firebase authentication?

My authentication process relies on two key factors:

Using Firebase auth (email and password)
Making a server API call to retrieve the complete customer entity from the database based on the firebaseID. The user must exist in both places for successful authentication.

I have implemented authGuards that are based on an isAuthenticated() function returning an Observable. This is necessary because during page refreshes, the guard needs to wait for the authentication process to finish before redirecting the user.

The issue I am facing is with managing all the asynchronous calls and RxJS operations. Currently, the serverAPI auth is called every time the isAuthenticated function is invoked. How can I refactor this to ensure that the server call is made only once while still maintaining the async behavior and handling reloads effectively?

AuthService :

paste here AuthService code...

AuthGuard :

paste here AuthGuard code...

Thank you

javascript angular typescript firebase rxjs

Answer 1

Answer №1

If you want to update your checkProfile() function to return an observable instead of the one from a http request or promise when encountering an error, you can do so by first checking if the user is already authenticated (assuming that the userRole is valid since it's saved after the call to the backend). If they are authenticated, you can simply return a newly created observable without making another call to the backend. However, if the user is not yet authenticated, then you will proceed with making the request and emitting your observable based on the result of the HTTP call. The following example demonstrates how you can achieve this in a way that only requires making the call once:

checkProfile() {
  return new Observable((observer) => {
    if (this.userRole) {
      observer.next();
      observer.complete();
    } else {
      this.callAuthApi().pipe(
          map((customer) => {
            if (!customer || customer.hasRole() === "anonymous") {
              observer.error(new Error(AuthService.AUTH_ERROR_ROLE));
              observer.complete();
            }
            this.userRole = customer.getRole();
            observer.next();
            observer.complete();
          })
      );
    }
  });
}

Answer 2

If you want to update your checkProfile() function to return an observable instead of the one from a http request or promise when encountering an error, you can do so by first checking if the user is already authenticated (assuming that the userRole is valid since it's saved after the call to the backend). If they are authenticated, you can simply return a newly created observable without making another call to the backend. However, if the user is not yet authenticated, then you will proceed with making the request and emitting your observable based on the result of the HTTP call. The following example demonstrates how you can achieve this in a way that only requires making the call once:

checkProfile() {
  return new Observable((observer) => {
    if (this.userRole) {
      observer.next();
      observer.complete();
    } else {
      this.callAuthApi().pipe(
          map((customer) => {
            if (!customer || customer.hasRole() === "anonymous") {
              observer.error(new Error(AuthService.AUTH_ERROR_ROLE));
              observer.complete();
            }
            this.userRole = customer.getRole();
            observer.next();
            observer.complete();
          })
      );
    }
  });
}

Answer 3

Answer №2

ReactiveX can be a bit challenging to grasp at first with its steep learning curve, but it packs a punch in terms of power.

1. Making a single server call

Utilize shareReplay for this purpose.

To understand the workings of shareReplay better, check out this example

//shareReplay example
ngOnInit() {    
    const tods$ = this.getTodos();
    tods$.subscribe(console.log);// 1st sub
    tods$.subscribe(console.log);// 2st sub
}

getTodos(): Observable<Todo[]> {
return this.http.get<Todo[]>(this.url)
  .pipe(
    tap(() => console.log('Request')),
    shareReplay(1) // compare with comment and uncomment
  );
}

Output with shareReplay

Request
[Object, Object, Object]
[Object, Object, Object]

Output without shareReplay

Request
[Object, Object, Object]
Request
[Object, Object, Object]

Implementing shareReplay in your auth service code is beneficial.

//auth.services.ts
import { shareReplay } from 'rxjs/operators';
...

this.user$ = this.afAuth.authState.pipe(
    tap(user => {
        console.log('login user$ here', user)
    }),
    switchMap(user => {
        if (user) {
            //do something
            return this.db.object(`users/${user.uid}`).valueChanges();
        } else {
            return of(null);
        }
    }),
    shareReplay(1)  //**** this will prevent unnecessary request****
);

2. Using async and await toPromise()

//auth.service.ts
...
getUser() {
    return this.user$.pipe(first()).toPromise();
}

//auth.guard.ts
...
async canActivate(next: ActivatedRouteSnapshot
  , state: RouterStateSnapshot
): Promise<boolean> {

  const user = await this.auth.getUser();
  //TODO your API code or other conditional authentication here

  if (!user) {
    this.router.navigate(['/login']);
  }
  return !!user;    
}

I hope this information proves helpful!

Answer 4

ReactiveX can be a bit challenging to grasp at first with its steep learning curve, but it packs a punch in terms of power.

1. Making a single server call

Utilize shareReplay for this purpose.

To understand the workings of shareReplay better, check out this example

//shareReplay example
ngOnInit() {    
    const tods$ = this.getTodos();
    tods$.subscribe(console.log);// 1st sub
    tods$.subscribe(console.log);// 2st sub
}

getTodos(): Observable<Todo[]> {
return this.http.get<Todo[]>(this.url)
  .pipe(
    tap(() => console.log('Request')),
    shareReplay(1) // compare with comment and uncomment
  );
}

Output with shareReplay

Request
[Object, Object, Object]
[Object, Object, Object]

Output without shareReplay

Request
[Object, Object, Object]
Request
[Object, Object, Object]

Implementing shareReplay in your auth service code is beneficial.

//auth.services.ts
import { shareReplay } from 'rxjs/operators';
...

this.user$ = this.afAuth.authState.pipe(
    tap(user => {
        console.log('login user$ here', user)
    }),
    switchMap(user => {
        if (user) {
            //do something
            return this.db.object(`users/${user.uid}`).valueChanges();
        } else {
            return of(null);
        }
    }),
    shareReplay(1)  //**** this will prevent unnecessary request****
);

2. Using async and await toPromise()

//auth.service.ts
...
getUser() {
    return this.user$.pipe(first()).toPromise();
}

//auth.guard.ts
...
async canActivate(next: ActivatedRouteSnapshot
  , state: RouterStateSnapshot
): Promise<boolean> {

  const user = await this.auth.getUser();
  //TODO your API code or other conditional authentication here

  if (!user) {
    this.router.navigate(['/login']);
  }
  return !!user;    
}

I hope this information proves helpful!

Connecting AngularFirebaseAuth: Running server API immediately following Firebase authentication?

Answer №1

Answer №2

Similar questions

What is the best way to utilize AJAX for displaying data within a div element?

Check to see if one string is beginning to resemble another string

Using Vue Js, I utilized Axios to make a call within a function, receiving and storing the retrieved data into an array

Unable to save text to file in both Javascript and PHP

Bring back enhanced assortment using Mongoose

Having trouble resolving a missing dependency warning with the useEffect React Hook in my Next.js app. Any tips on how to fix this

Tips on sending form data, including a file, to Ajax using the onclick() method

Clicking on the menu in mobile view will cause it to slide upward

sending a response to the web browser

Extracting object properties and tallying their occurrences

Combining arrays to append to an array already in place

"Utilizing GroupBy and Sum functions for data aggregation in Prisma

Having trouble resolving all parameters for the service in an Angular2 test with Jasmine mocking

What potential outcomes arise from independently initiating multiple components simultaneously?

Tips for indicating errors in fields that have not been "interacted with" when submitting

Is this code correct for passing a variable to another form?

Using d3 or ajax to read a local file containing tab-separated values may result in a syntax error appearing in the Firefox development console

AngularFire: Retrieve the $value

Accessing the properties of a module in Javascript - a foolproof guide to making the most

Only retrieve one result from v-for loop depending on the key value