Angularfire: AngularFireAuthGuard is letting non-authenticated users move to the protected pages

[javebratt]

The AngularFireAuthGuard seems stopped working, there are no errors on the console or displayed to the user, it just lets users continue to the page even when the page has the guard code and the user is not authenticated.

Version info

Angular: 8.1.2

Firebase: 6.6.2

AngularFire: 5.2.1

Other (e.g. Ionic/Cordova, Node, browser, operating system):

I'm using Ionic Framework with "@ionic/angular": "^4.10.0" running on the web. I tried this on Chrome and Firefox and 2 followers also emailed me about this.

How to reproduce these conditions

I created the guard, added it to the app.module.ts provider's array, then in the routing module I'm doing:

import { redirectUnauthorizedTo, canActivate } from '@angular/fire/auth-guard';

const redirectToLogin = redirectUnauthorizedTo(['login']);

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  {
    path: 'home',
    loadChildren: () =>
      import('./home/home.module').then(m => m.HomePageModule),
    ...canActivate(redirectToLogin)
  },
  { path: 'login', loadChildren: './pages/login/login.module#LoginPageModule' },
];

It doesn't block non-authenticated users, it just lets everyone move to the home page.

Debug output

No errors on the console, logs, or anything.

Expected behavior

Non authenticated users should be redirected to the login page.

Actual behavior

Users got to the home page.

[ealtuna]

@javebratt is this happening also in development mode or only in production?

[chongkong]

I'm also having the same issue. My code almost identical to his, and only occurs when built in production mode. Using version 5.2.3.

import { map } from "rxjs/operators";

const loggedInWithCorpAccount = map((user: User | null) => {
  if (!user || !user.email || !user.email.endsWith("@google.com"))
    return ["login"];
  else return true;
});

const routes: Routes = [
{
  path: "privatePath",
  component: PrivateComponent,
  ...canActivate(loggedInWithCorpAccount)
}
];

I'm a bit busy now and don't have enough time to explain mine (asking your understanding) but wanted to say I'm on the same issue.

[ArrowsOff]

This is a known bug I think, the workaround is using the full version of canActivate:

{ 
    path: 'privatePath', 
    component: PrivateComponent,  
    canActivate: [AngularFireAuthGuard], 
    data: { authGuardPipe: loggedInWithCorpAccount }
},

That should work with a AoT build

[javebratt]

@javebratt is this happening also in development mode or only in production?

For me, it was happening in both.

This is a known bug I think, the workaround is using the full version of canActivate

Thanks, I'll check it out

[magnusmel]

Similiar issue with AngularFireGuard,
he angularfireguard https://github.com/angular/angularfire/blob/master/docs/auth/router-guards.md method to block unauthorized access to routes, works fine on the localhost when I change the code from '=>' to '=' that is from

const redirectUnauthorizedToLanding = () => redirectUnauthorizedTo(['auth/login']); to the below code:

const redirectUnauthorizedToLanding = redirectUnauthorizedTo(['auth/login']);
However it fails to prevent unauthorized users accessing pages meant for authorized personnel , This happens when its deployed on google Firebase cloud host , unlike the localhost.

I am guessing its an issue with the build process...

My Code from app-routing.module.ts:

import { AngularFireAuthGuard, loggedIn, redirectLoggedInTo } from '@angular/fire/auth-guard'; import { redirectUnauthorizedTo, canActivate } from '@angular/fire/auth-guard';

const redirectUnauthorizedToLanding = redirectUnauthorizedTo(['auth/login']);

const routes: Routes = [
  { path: '', redirectTo: '/walkthrough', pathMatch: 'full' },
  { path: 'walkthrough', loadChildren: () => import('./walkthrough/walkthrough.module').then(m => m.WalkthroughPageModule) },
  { path: 'getting-started', loadChildren: () => import('./getting-started/getting-started.module').then(m => m.GettingStartedPageModule) },
  { path: 'auth/login', loadChildren: () => import('./login/login.module').then(m => m.LoginPageModule) },
  { path: 'auth/signup', loadChildren: () => import('./signup/signup.module').then(m => m.SignupPageModule) },
  // tslint:disable-next-line:max-line-length
  { path: 'auth/forgot-password', loadChildren: () => import('./forgot-password/forgot-password.module').then(m => m.ForgotPasswordPageModule) },
  {
    path: 'app',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule),
    ...canActivate(redirectUnauthorizedToLanding)
  },
  {
    path: 'contact-card',
    loadChildren: () => import('./contact-card/contact-card.module').then(m => m.ContactCardPageModule),
    ...canActivate(redirectUnauthorizedToLanding)
  },

IONIC CLI OUTPUT

Ionic CLI                     : 5.4.10 (/home/xyz/.nvm/versions/node/v10.17.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.7.4
   @angular-devkit/build-angular : 0.802.1
   @angular-devkit/schematics    : 8.2.1
   @angular/cli                  : 8.2.1
   @ionic/angular-toolkit        : 2.0.0

Capacitor:

   Capacitor CLI   : 1.1.1
   @capacitor/core : 1.1.1

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v10.17.0 (/home/xyz/.nvm/versions/node/v10.17.0/bin/node)
   npm    : 6.11.3
   OS     : Linux 5.3

[magnusmel]

I solved the issue by changing the parameters like shown here :
{
path: 'app',
loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule),
canActivate: [AngularFireAuthGuard], data: {authGuardPipe: redirectUnauthorizedToLanding }
},

[rtpHarry]

seems related to #2099 / https://github.com/angular/angular/issues/29374

[jamesdaniels]

Addressed in v6