bug: angular fire guards doesnt' work on mobile about capacitor-firebase-authentication

[robingenz]

Hi ,
thank you for your request.
I need more information, such as what configuration you are using this plugin in, to help you out.
Please provide a Minimal, Reproducible Example (see How to create a Minimal, Reproducible Example).

[mburger81]

Hello I created a PR on your demo app, in browser this is just working fine, but this should not work on capacitor app on android. Can you test it, I can not build your demo on mobile right now but it should reproduce

When you have a loo to the code compare, I really did only few lines of code

robingenz/capacitor-firebase-authentication-demo#73

[robingenz]

My demo app uses native authentication. If you want to use Angularfire Guards, you need to use the Firebase JS SDK. This requires some modifications: see https://github.com/robingenz/capacitor-firebase-authentication/blob/main/docs/firebase-js-sdk.md.
The other possibility would be that you create your own guards which call https://github.com/robingenz/capacitor-firebase-authentication#getcurrentuser.

Is there a way you can handle this anyway? If not we have to make our own guards, but it should be nice if we can use the standards.

So to answer your question: Unfortunately there is nothing I can do about it. You have to use one of the two options and implement the adjustments in your app.

For this reason, I am closing this issue. Please let me know if you have any further questions.

[mburger81]

@robingenz Yeah I know but the problem of the custom guards with FirebaseAuthentication.getCurrentUser() is that when I do a page reload for example on developing he current user is not available when guard is called, just a 1-2 seconds later

I'll have a look on doing it with skipNativeAuth, may I ask, which is the diff using firebase js sdk instead of using native auth, I mean from your part. Less performant or what else?

[robingenz]

Yeah I know but the problem of the custom guards with FirebaseAuthentication.getCurrentUser() is that when I do a page reload for example on developing he current user is not available when guard is called, just a 1-2 seconds later

Maybe this service will help you:

import { Injectable } from '@angular/core';
import {
  FirebaseAuthentication,
  User,
} from '@robingenz/capacitor-firebase-authentication';
import { Observable, ReplaySubject } from 'rxjs';
import { map, take } from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
})
export class FirebaseAuthenticationService {
  private currentUserSubject = new ReplaySubject<User | undefined>(1);

  constructor() {
    FirebaseAuthentication.addListener('authStateChange', result => {
      this.currentUserSubject.next(result.user || undefined);
    });
  }

  public get currentUser$(): Observable<User | undefined> {
    return this.currentUserSubject.asObservable();
  }

  public get currentUserId$(): Observable<string | undefined> {
    return this.currentUserSubject.asObservable().pipe(map(user => user?.uid));
  }

  public getCurrentUser(): Promise<User | undefined> {
    return this.currentUser$.pipe(take(1)).toPromise();
  }

  public getCurrentUserId(): Promise<string | undefined> {
    return this.currentUserId$.pipe(take(1)).toPromise();
  }

  public async signInWithApple(): Promise<void> {
    await FirebaseAuthentication.signInWithApple();
  }

  public async signInWithGoogle(): Promise<void> {
    await FirebaseAuthentication.signInWithGoogle();
  }

  public async signOut(): Promise<void> {
    await FirebaseAuthentication.signOut();
  }

  public async getIdToken(): Promise<string> {
    const result = await FirebaseAuthentication.getIdToken();
    return result.token;
  }
}

I use this in my apps to deal with this behavior.

I'll have a look on doing it with skipNativeAuth, may I ask, which is the diff using firebase js sdk instead of using native auth, I mean from your part. Less performant or what else?

Please have a look at the FAQ. I just extended it to include this question.

[mburger81]

Okay but in this scenario I have to wait a lot to get resolved the guards, something which ends in my opinion in a laggy behaviour.
Now I'm using the skipNativeAuth with your example, which works fine. Perhaps you should also describe in this scenario you have also to signout from both layers doing something like this

public async logout(): Promise<void> {s
   await FirebaseAuthentication.signOut();

   return signOut(this.auth);
 }

At least I have todo it

[robingenz]

Okay but in this scenario I have to wait a lot to get resolved the guards, something which ends in my opinion in a laggy behaviour.

Yes that's right, you have to wait for the Promise. I have implemented a custom SplashScreen for it, which supports web.

Perhaps you should also describe in this scenario you have also to signout from both layers doing something like this

Thanks for the tip. I will add that.