CODEWITHSUNDEEP
angularfireauth-guard
Fulya D.
Fulya D.

Reputation: 592

AngularFireAuthGuard with multiple conditions

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

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 ([email protected])
   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

Upvotes: 2

Views: 4148

Answers (1)

nephiw
nephiw

Reputation: 2046

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.

Upvotes: 1

Related Questions