Infinite redirect loop with improper configuration

[dev-mansonthomas]

Bug Report or Feature Request (mark with an x)

- [X] bug report -> please search issues before submitting
- [ ] feature request

OS and Version?

MacOs Mojave 10.14.6 (18G95), Chrome 77.0.3865.90

Versions

ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 8.3.5
Node: 10.16.2
OS: darwin x64
Angular: 8.2.7
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.5
@angular-devkit/build-angular     0.803.5
@angular-devkit/build-optimizer   0.803.5
@angular-devkit/build-webpack     0.803.5
@angular-devkit/core              8.3.5
@angular-devkit/schematics        8.3.5
@angular/cdk                      8.2.0
@angular/cli                      8.3.5
@angular/fire                     5.2.1
@angular/flex-layout              8.0.0-beta.26
@angular/material                 8.2.0
@ngtools/webpack                  8.3.5
@schematics/angular               8.3.5
@schematics/update                0.803.5
rxjs                              6.5.3
typescript                        3.5.3
webpack                           4.39.2

Repro steps

Hi,

I'm migrating an app from angularjs to angular8 (so new to angular8).

I still don't understand how to use those two properties:

  authGuardFallbackURL
  authGuardLoggedInURL

While experimenting I reach a point where google chrome enter an infinite loop and I've to kill the tab using the activity monitor from MacOsX.

Chrome displaying this in the developer console:

Throttling navigation to prevent the browser from hanging. See https://crbug.com/882238. Command line switch --disable-ipc-flooding-protection can be used to bypass the protection

It happens when I invert the expected values :

      authGuardFallbackURL: '/welcome', 
      authGuardLoggedInURL: '/login',  

This should be detected and prevented. I still dont totally get these option because with the following values :

authGuardFallbackURL: '/login', 
authGuardLoggedInURL: '/welcome'

After a successful login, the browser is not redirected to the authGuardLoggedInURL, so I don't get what this property is for.

Additional questions :

• is there a mailing list, forum etc... to have some kind of help ?
• the $event here:

<ngx-auth-firebaseui (onSuccess)="printUser($event)" (onError)="printError()">

what kind of object it is ? where's the doc for it? I need to retrieve the Firebase JWT to implement something similar to this : https://cloud.google.com/appengine/docs/standard/python/authenticating-users-firebase-appengine

printError : shouldn't it have some parameter, like the error?

Desired functionality

detect infinit loop and break it, print useful info in the dev console to help to fix the issue.

Mention any other details that might be useful

full project is here: https://github.com/dev-mansonthomas/RedCrossQuestFrontEnd

[dev-mansonthomas]

About the onSuccess

Can the documentation be update to include the type of the event :

import { User } from 'firebase/app';

In order to get the JWT token, it can be done this way :

<ngx-auth-firebaseui (onSuccess)="printUser($event)"
                     (onError)="printError($event)">
</ngx-auth-firebaseui>


  printUser(user:User) {
    console.log(user);
    user.getIdTokenResult().then((idTokenResult:IdTokenResult)=> console.log(idTokenResult.token));    
}

[AnthonyNahas]

@dev-mansonthomas thanks for opening this issue!

  authGuardFallbackURL
  authGuardLoggedInURL

these properties are needed to redirect the client when the user is authenticated or not! Howerver, the routes are relative the parent route and should be 100% valid! Otherwise you will become errors from angular!

I will try to improve the docs!

2. $event

you have write!

The object emitted is a plain js object which is not typed because it's from the firbase js client sdk!

I will try to map it to my own interface !

[cunundrummer]

This might be a little late but,

I looked at the source (I had trouble too, so I implemented my own guards) and from what I see, when authentication fails, the activated route (the route you want for authenticated users) is halted, and the router navigates back to the specified fallback Url, stopping the navigation process - causing the user to stays put. So far so good.

However, when the authentication passes, there is no authguardLoggedInUrl implementation (I checked the references | implementations in my ide). So from what I see from both source and experimenting, that could be ignored.

Note: the canActivate() method will fire before the route is activated. The method will first check if the user is valid (up to the coder), and if not, halt the previous router process, and will navigate to authGuardFallbackURL. As for the redirect query param, it is the previous attempted url 'stored'. I tend to not use it, but it could be normalized (for cleaner url) in your routes array with the redirectTo: property. It's use case dependent.

If authentication passes, you can return true and continue to your route as an authenticated user. Not necessary to apply a router.navigate(...) here.

I hope this helps. I implemented my own guard before I looked into it.