NavigateByUrl doesn't work from onTokenReceived using angular-oauth2-oidc

Question

I'm using angular-oauth2-oidc package, I using implicit flow, and I can't migrate (at the moment) to code flow.

I would like to navigate to original url when the flow is ended, I have using preserving state as document suggest.

My problem is I can't navigate from onTokenReceived function, the promise resolved by navitageByUrl resolves with false but no errors on console:

export class AppComponent {
    url: string;    

    constructor(
        private oauthService: OAuthService, 
        private router: Router) {

        this.url = window.location.pathname; // Get requested url.
    }

    ngOnInit() {        
        this.oauthService.loadDiscoveryDocument().then(res => {
            console.log(res);
            this.oauthService.tryLogin({
                onTokenReceived: (info) => {
                    // Receive state and navitage to.
                    this.router.navigateByUrl(info.state).then(res => {
                        if (!res) {
                            console.error("Navigate to " + info.state + " after get token:" + res);
                        }
                    });
                }
            }).then(res => {
                if (!res) { // If not login init implicit flow passing url as state.
                    this.oauthService.initImplicitFlow(this.url);                
                }

            })
        })        

    }
}

However, It works if run after 100 miliseconds using setTimeout:

onTokenReceived: (info) => {
    // Receive state and navitage to.
    setTimeout(() => {
        this.router.navigateByUrl(info.state).then(res => {
            if (!res) {
                console.error("Navigate to " + info.state + " after get token:" + res);
            }
        });
    }, 100); // With less than 100 not works.
}

Someone can help me? Why navigateByUrl dosen't work?

score 2 · Answer 1 · answered Apr 11 '20 at 14:24

I have been debugging the angular router to know why the navigation resolves with false. I have seen that the navigation can be cancelled if other navigation starts. Well, I have logged the router events and I could see that other navigation start while my navigation is in process.

This is the log:

app.component.ts:31 NAVEvent- NavigationStart to /#id_token=eyJhbG(...hide for simplicity...)8da3798eac66
app.component.ts:31 NAVEvent- RoutesRecognized
app.component.ts:31 NAVEvent- GuardsCheckStart
app.component.ts:31 NAVEvent- ChildActivationStart
app.component.ts:31 NAVEvent- ActivationStart
app.component.ts:31 NAVEvent- GuardsCheckEnd
app.component.ts:31 NAVEvent- ResolveStart
app.component.ts:31 NAVEvent- ResolveEnd
app.component.ts:31 NAVEvent- ActivationEnd
app.component.ts:31 NAVEvent- ChildActivationEnd
app.component.ts:31 NAVEvent- NavigationEnd
app.component.ts:31 NAVEvent- Scroll
app.component.ts:50 TOKEN RECEIVED --> Here I received the token and init the navigation to original requested URL
app.component.ts:31 NAVEvent- NavigationStart to /data/orderByToken/f5c2a1af-b0fa-48ab-867d-d748f53d42fb
app.component.ts:31 NAVEvent- RouteConfigLoadStart
app.component.ts:31 NAVEvent- NavigationCancel   --> this cancel my navigation and causes false resolved.
app.component.ts:31 NAVEvent- NavigationStart to /welcome -> Angular navigate to /welcome due to I have a redirect on routing module.
app.component.ts:31 NAVEvent- RoutesRecognized
app.component.ts:31 NAVEvent- GuardsCheckStart
app.component.ts:31 NAVEvent- GuardsCheckEnd
app.component.ts:31 NAVEvent- ActivationEnd
app.component.ts:31 NAVEvent- ChildActivationEnd
app.component.ts:31 NAVEvent- NavigationEnd
app.component.ts:31 NAVEvent- Scroll

I have a redirect in angular route config like that:

{ path:"", redirectTo: "welcome", pathMatch: "full"}{ path:"", redirectTo: "welcome", pathMatch: "full"}

Is not a angular-oauth2-oidc issue ...

When the navigate promise is resolved with false, the navigation to /welcome is finished therefore I have decide to try again, run navigation another time, this time this works.

Something like:

this.router.navigateByUrl(state).then(res => {
  if (!res) {
    this.router.navigateByUrl(state);
  }
});

Since if navigation fails raises a exception, only when promise is resolve as false , without exception, is due to another navigation cancel yours navigation.

This solve my problem.

NavigateByUrl doesn't work from onTokenReceived using angular-oauth2-oidc

1 Answers1