AngularFire router guards redirectUnauthorizedTo not working with ng build --prod

anisabboud commented 5 years ago

Version info

Angular: 8.0.1 Firebase: 6.2.0 AngularFire: 5.2.1 tsconfig.json "target": "es5"

Steps to set up and reproduce

Setup a Firebase project with auth router guards https://github.com/angular/angularfire2/blob/master/docs/auth/router-guards.md and https://github.com/RaphaelJenni/FirebaseUI-Angular

Use ...canActivate(redirectUnauthorizedTo(['login'])) like below:

const appRoutes: Routes = [
{
path: '',
...canActivate(redirectUnauthorizedTo(['login'])),
children: [
  { path: 'calendar', component: CalendarComponent },
  { path: '',
    redirectTo: 'calendar',
    pathMatch: 'full'
  },
],
},
{
path: 'login',
component: LoginComponent,
...canActivate(redirectLoggedInTo([''])),
},
{ path: '**',
redirectTo: '/',
pathMatch: 'full'
},
];

Everything works great with ng serve or ng build, but with ng build --prod, the router guard redirectUnauthorizedTo(['login']) stops working. I.e., the user isn't redirected to /login, and can access the protected routes without logging in.

Debug output

There are no errors in the console. The redirection just doesn't occur. Using RouterModule.forRoot(appRoutes, { enableTracing: true }), confirms that.

With ng build (redirection to /login works):

With ng build --prod:

Notice that logging the AngularFireAuth.user observable (in yellow) shows that in the first case, it evaluated to null before the routing ended so the guard worked properly. However, in the second case, the routing was performed before the auth state was evaluated (the observable hasn't emitted), and the guard didn't wait for it so it didn't work.

Expected behavior

Route guards should work with ng build --prod.

Actual behavior

Route guards work with ng build but not with ng build --prod.

JGSolutions commented 5 years ago

For me I can't even get close as i get these errors. Then again I am lazy loading my modules

ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[AngularFireAuthGuard]: StaticInjectorError(Platform: core)[AngularFireAuthGuard]: NullInjectorError: No provider for AngularFireAuthGuard! NullInjectorError: StaticInjectorError(AppModule)[AngularFireAuthGuard]: StaticInjectorError(Platform: core)[AngularFireAuthGuard]: NullInjectorError: No provider for AngularFireAuthGuard!

Segfaultd commented 5 years ago

@JGSolutions just add it in the providers of your app.module.ts, like a normal guard

JGSolutions commented 5 years ago

@Tyldar Thanks it works

rickbeumers commented 5 years ago

For me I can't even get close as i get these errors. Then again I am lazy loading my modules

ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[AngularFireAuthGuard]: StaticInjectorError(Platform: core)[AngularFireAuthGuard]: NullInjectorError: No provider for AngularFireAuthGuard! NullInjectorError: StaticInjectorError(AppModule)[AngularFireAuthGuard]: StaticInjectorError(Platform: core)[AngularFireAuthGuard]: NullInjectorError: No provider for AngularFireAuthGuard!

You should add AngularFireAuthGuardModule to your imports for the correct importing.

@anisabboud I came here with the same issue, seems like something is not working when minified.

javanese84 commented 5 years ago

Same issue here, works like it should with ng serve and after ng build --prod all routes are accessible. Is there a solution for this?

ajheunis commented 5 years ago

Yup I have the same issue as @anisabboud. Works perfectly in other circumstances, but on a production build the AuthGuards don't run. Also tried with a custom guard with the same result. Thank you.

sasa95 commented 5 years ago

Same issue here.

javanese84 commented 5 years ago

Is there any news about this? This is currently a showstopper in my project :-(

helloejsulit commented 5 years ago

Still waiting for a fix for this.

d-c-mate commented 5 years ago

I have the same problem, I just want a auth guard like :

// app-routing.module.ts
import { AngularFireAuthGuard, loggedIn, redirectLoggedInTo } from '@angular/fire/auth-guard';

const redirectLoggedInToHome = redirectLoggedInTo(['/']);

const routes: Routes = [
  { path: '', component: HomeComponent },
  // { path: 'search', component: SearchComponent },
  // { path: 'search:query', component: SearchComponent },
  { path: 'login', component: LoginComponent, canActivate: [AngularFireAuthGuard], data: { authGuardPipe: redirectLoggedInToHome }},
  { path: 'register', component: RegisterComponent, canActivate: [AngularFireAuthGuard], data: { authGuardPipe: redirectLoggedInToHome }},
  { path: 'my-account', component: AccountComponent, canActivate: [AngularFireAuthGuard], data: { authGuardPipe: loggedIn }},
  { path: 'events', component: EventsComponent },`
];

but have this when i'm logged in and I try to go in '/login' for example : dczqdzq

EDIT

I just confused loggedIn() and redirectUnauthorizedTo()

// app-routing.module.ts
const redirectLoggedInToHome = () => redirectLoggedInTo(['/']);
const redirectUnauthorizedToHome = () => redirectUnauthorizedTo(['/']);

// app-routing.module.ts
  { path: 'login', component: LoginComponent, canActivate: [AngularFireAuthGuard], data: { authGuardPipe: redirectLoggedInToHome }},
  { path: 'register', component: RegisterComponent, canActivate: [AngularFireAuthGuard], data: { authGuardPipe: redirectLoggedInToHome }},
  { path: 'my-account', component: AccountComponent, canActivate: [AngularFireAuthGuard], data: { authGuardPipe: redirectUnauthorizedToHome }},

Don't forget to add AngularFireAuthGuard in app providers and imports

// app.module.ts
imports: [
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,
    AngularFireAuthModule,
    AngularFireStorageModule,
],
providers: [
    AuthService,
    AngularFireAuthGuard,
  ],

devinshoemaker commented 5 years ago

The solution posted in issue #2099 works for me in production and non-production mode.

https://github.com/angular/angularfire2/issues/2099#issuecomment-503403712

helloejsulit commented 5 years ago

I can confirm the solution in #2099 works for me too. Thanks for sharing @devinshoemaker!

epicquestgames commented 5 years ago

Is there gonna be proper fix ?

jzarzeckis commented 5 years ago

Waiting for a proper fix too.

n3nikita commented 5 years ago

Same problem here. the solution in #2099 works for me but how can I make it works for redirectLoggedInTo?

ghost commented 5 years ago

Faced same problem. #2099 solution worked for me.. Can you please update https://github.com/angular/angularfire2/blob/master/docs/auth/router-guards.md documentation with this issue detail so other developers can make decision accordingly.

benbabics commented 4 years ago

Despite adding AngularFireAuthGuard and AngularFireAuthGuardModule to app.module.ts, I am encountering the NullInjectorError but it complains there isn't a provider for Router, even though I am importing RouterModule in there as well!

errors.ts:30 ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[AngularFireAuthGuard -> Router]: 
  StaticInjectorError(Platform: core)[AngularFireAuthGuard -> Router]: 
    NullInjectorError: No provider for Router!
NullInjectorError: StaticInjectorError(AppModule)[AngularFireAuthGuard -> Router]: 
  StaticInjectorError(Platform: core)[AngularFireAuthGuard -> Router]: 
    NullInjectorError: No provider for Router!

I have demonstrated this on a StackBlitz Project: https://stackblitz.com/edit/angular-scftvu

Gbuomprisco commented 4 years ago

I am experiencing a similar issue as @benbabics, but only with SSR.

Here's the stack trace:

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(HomePageModule)[AngularFireAuthGuard -> Router -> Router -> Router -> Router]: 
  NullInjectorError: No provider for Router!
NullInjectorError: R3InjectorError(HomePageModule)[AngularFireAuthGuard -> Router -> Router -> Router -> Router]: 
  NullInjectorError: No provider for Router!

jpelton-stroud commented 4 years ago

You should add AngularFireAuthGuardModule to your imports for the correct importing.

Thanks to @ArrowsOff for this tip; didn't realize AuthGuard was its own module; importing in root resolved the NullInjectorError, but then I was hit w/ the source.lift is not a function issue Id'd in #2099, resolved by these two posts in that thread.

Sure would be nice if this were documented...

jenskragelund commented 4 years ago

I am experiencing the exact same issue as @benbabics when running my project on StackBlitz. However, when serving the same project on my desktop everything seems to work fine 😕

harshal6094 commented 4 years ago

@JGSolutions just add it in the providers of your app.module.ts, like a normal guard

that also worked for me.

etonyali commented 9 months ago

I solved this with the below code:

// app.module.ts
imports: [
    ...
    provideAuth(() => {
        if (Capacitor.isNativePlatform()) {
            return initializeAuth(getApp(), {
                persistence: indexedDBLocalPersistence,
            });
        } else {
            return getAuth();
        }
    }),
]

angular / angularfire