AngularFireAuthGuard with multiple conditions

Question

I am working on a Ionic project which is using AngularFire. Application has two main features.

Feature 1. Requires users to create an account and login.
Feature 2. Doesn't require an account or logging in.

I am using AngularFireAuthGuard with "redirectUnauthorizedToLogin" pipe to control routing.

const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['login']);

{ path: '...', loadChildren: '...', canActivate: [AngularFireAuthGuard], data: { authGuardPipe: redirectUnauthorizedToLogin } },

Both features interact with FireStore. Due to security reasons, I want to implement Firebase Anonymous Sign-in. So, for the feature 2, I can control who can write to db without allowing permission to everyone. Meanwhile feature 1 will still require an account.

Here comes the problem because I couldn't find a way to add two conditions to the feature 1 guard something like

if (is anonymous || not logged in) redirectToLogin

As far as I can see, redirectUnauthorizedToLogin counts anonymous sign-in as authorized.

I checked the official documents and I see that there is an "IsNotAnonymous" built-in pipe but it is only referred once and I couldn't find any other usage of it.

I hope someone can help me about this.

Thanks in advance,

Ionic:

   Ionic CLI                     : 5.2.1
   Ionic Framework               : @ionic/angular 4.6.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.4.0

   "@angular/fire": "^5.2.1",
   "firebase": "^5.11.1",

Cordova:

   Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms : android 7.1.4

Utility:

   cordova-res : 0.6.0
   native-run  : 0.2.7

System:

   Android SDK Tools : 26.1.1 (D:\Sdk)
   NodeJS            : v11.4.0 (D:\nodejs\node.exe)
   npm               : 6.4.1
   OS                : Windows 10

score 1 · Answer 1 · answered Dec 01 '19 at 00:00

If you checkout the source code, you can see how they implemented isNotAnonymous here: https://github.com/angular/angularfire/blob/5.2.3/src/auth-guard/auth-guard.ts#L32 but the problem is that isNotAnonymous rejects but does not redirect. I think you can basically emulate this line: https://github.com/angular/angularfire/blob/5.2.3/src/auth-guard/auth-guard.ts#L37 to add the redirect.

These are pipe-able, so you should be good to go with:


import { AngularFireAuthGuard, isNotAnonymous } from '@angular/fire/auth-guard';

export const redirectAnonymousTo = (redirect: any[]) => 
  pipe(isNotAnonymous, map(loggedIn => loggedIn || redirect)
);

const redirectUnauthorizedToLogin = () => redirectAnonymousTo(['login']);

export const routes: Routes = [
  { path: '', component: AppComponent },
  { 
    path: 'items',
    component: ItemListComponent,
    canActivate: [AngularFireAuthGuard],
    data: { authGuardPipe: redirectUnauthorizedToLogin }
  }
];

If unauthenticated or anonymous, it will return false, so the redirect will happen, otherwise it will resolve to true.

I have not tried executing this code, but hopefully it will be a good start.

thanks a lot for looking at that! I will try that later and let you know. — Fulya D., Dec 01 '19 at 00:08
should be marked as accepted, you can also use the ...canActivate style, thanks a lot man — Christos Sirmakezis, Mar 12 '21 at 18:55

AngularFireAuthGuard with multiple conditions

1 Answers1