Angular-auth-oidc-client: Angular Router navigations should be (probably) triggered with navigateByUrl() function

Created on 19 Mar 2021  路  7Comments  路  Source: damienbod/angular-auth-oidc-client

Describe the bug
Currently all side effects or catchError functions use this.router.navigate() function to redirect to one of the predefined routes
This works great but fails when users enter URL with query params.
(i.e http://example.com?foo=5&bar=10)

This actually is a known bug in Angular Router
(see https://github.com/angular/angular/issues/28917)

The workaround would be to use navigateByUrl() instead.
(for example: this.router.navigateByUrl(this.configurationProvider.openIDConfiguration.postLoginRoute);)

To Reproduce
Steps to reproduce the behavior:

  1. Go to 'http://example.com?foo=5&bar=10'
  1. Set postLoginRoute to '/?foo=5&bar=10

  2. See error in console:
    (Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: '%3Ffoo%3D5&bar%3D10')

Expected behavior
After navigation there shouldn't be any error in console and the Address bar should contain URL with query params

Screenshots
N/A

Desktop (please complete the following information):

  • OS: Win 10
  • Browser chrome
  • Version 89.0.4389.90

Smartphone (please complete the following information):
N/A

Additional context
N/A

bug good first issue

Most helpful comment

@damienbod @FabianGosebrink
If it is OK with You i can create a PR which switches navigate to navigateByUrl().

All 7 comments

Can you try to set postLoginRoute with "location.path()". Location from '@angular/common' is normalized. It works for me with long and complex path with many query parameter to set post login route. There is no error in my console.

I've seen the double encoding issue in the browser at times. I have not nailed down the situation when it occurs though, so this change would be welcome :)

After some checks we found an issue related to encoding.
If you will pass in config: redirectUrl an url with query params in the end you will get 400 error from your authentication service
because in body you will get something like this:

image

In the beginning url was : https://domainname.com:8443/users?a=5&aware=test&code=somedata&state=somedata

The reason is *UrlService * method getRedirectUrl :

getRedirectUrl() {
        var _a;
        const redirectUrl = (_a = this.configurationProvider.openIDConfiguration) === null || _a === void 0 ? void 0 : _a.redirectUrl;
        if (!redirectUrl) {
            this.loggerService.logError(`could not get redirectUrl, was: `, redirectUrl);
            return null;
        }
        return redirectUrl;
    }

There is no encoding for using URL in form body in request to the authentication service.

@damienbod @FabianGosebrink
If it is OK with You i can create a PR which switches navigate to navigateByUrl().

Hey @TomaszKasowicz , sure, that'd be awesome!

@FabianGosebrink
The fix is ready but I cannot push the changes (I'm getting Please make sure you have the correct access rights)

You have to fork this project into you github account and then do a new branch describing your feature and check in on that. Then from there you can do a PR.

Was this page helpful?
0 / 5 - 0 ratings