Update to 26.2.2: URL encoded redirect urls in Angular application

[djoho]

Describe the bug

After Upgrade to keycloak-js 26.2.2 a page refresh in the browser leads to issues with the Angular router. It seems that the redirect urls arrive in url encoded form in the router like '/%2Fadmin%2Fmaintenance%2Fscripts%3D' whereas with keycloak-js 26.2.1 they were in the form '/admin/maintenance/scripts'

Version

26.2.2

Expected behavior

With keycloak-js 26.2.1, the Angular router gets the redirect urls without url encoding. This is working fine.

If I am on a page with the url http://localhost:4500/#/admin/maintenance/scripts and perform a page refresh in the browser, the Angular router gets the following events.

Router Event: NavigationStart router_module.mjs:1418:19 NavigationStart(id: 1, url: '/admin/maintenance/scripts') router_module.mjs:1419:19 Object { id: 1, url: "/admin/maintenance/scripts", type: 0, navigationTrigger: "imperative", restoredState: null } router_module.mjs:1420:19 Angular is running in development mode. debug_node.mjs:18311:17 .... Router Event: NavigationEnd router_module.mjs:1418:19 NavigationEnd(id: 1, url: '/admin/maintenance/scripts', urlAfterRedirects: '/admin/maintenance/scripts') router_module.mjs:1419:19 Object { id: 1, url: "/admin/maintenance/scripts", urlAfterRedirects: "/admin/maintenance/scripts", type: 1 }

Actual behavior

With keycloak-js 26.2.2, the Angular router gets the redirect urls in url encoded form, which it cannot handle.

If I am on a page with the url http://localhost:4500/#/admin/maintenance/scripts and perform a page refresh in the browser, the Angular router gets the following events.

Router Event: NavigationStart router_module.mjs:1418:19 NavigationStart(id: 1, url: '/%2Fadmin%2Fmaintenance%2Fscripts%3D') router_module.mjs:1419:19 Object { id: 1, url: "/%2Fadmin%2Fmaintenance%2Fscripts%3D", type: 0, navigationTrigger: "imperative", restoredState: null } router_module.mjs:1420:19 Angular is running in development mode. debug_node.mjs:18311:17 Router Event: NavigationError router_module.mjs:1418:19 NavigationError(id: 1, url: '/%2Fadmin%2Fmaintenance%2Fscripts%3D', error: Error: NG04002: Cannot match any routes. URL Segment: '%2Fadmin%2Fmaintenance%2Fscripts%3D') router_module.mjs:1419:19 Object { id: 1, url: "/%2Fadmin%2Fmaintenance%2Fscripts%3D", error: Error, target: undefined, type: 3 }

How to Reproduce?

On an initialized and logged in Angular application with an url like http://localhost:4500/#/admin/maintenance/scripts perform a page reload.

Anything else?

Is this a bug or did I miss to adapt to some behavioural change?

Kind regards

[2manyvcos]

This issue is unrelated to Angular, it also occurs in other configurations (in a React application in our case).

[jonkoops]

Please provide a reproducible example that does not involve a framework such as Angular or React, I have a plain web application that can be used to reproduce it (fork if needed).

This issue is likely caused by some bug fixing that was done for 26.2.2 (see #230). Could you validate this issue was also present in 26.2.0?

[djoho]

I tested it with 26.2.0 and 26.2.1 and both versions work fine. The behaviour must have changed from 26.2.1 to 26.2.2

I will see, if I can reproduce this with your web app. But this will probably be next week, until I can try this.

[jonkoops]

Very strange, I wonder what it could be. It is very likely related to the part of the code that parses the callback URL. Are you using responseMode with fragment, or query?

[djoho]

It seems that the fragment is used.

Yes, you were right, the issue seems to be with the callback parsing

Replacing the #parseCallbackParams function with the one before commit Use built-in APIs to parse URLs (https://github.com/keycloak/keycloak-js/pull/143[)](https://github.com/keycloak/keycloak-js/commit/82924d01cf4d81f32fe63120a0d171d69cb8a4db) solves my issues

This is the old one I used instead:

#parseCallbackParams(paramsString, supportedParams) {
        var p = paramsString.split('&');

        /** @type {ParsedCallbackParams} */
        var result = {
            paramsString: '',
            oauthParams: {}
        }
        for (var i = 0; i < p.length; i++) {
            var split = p[i].indexOf("=");
            var key = p[i].slice(0, split);
            if (supportedParams.indexOf(key) !== -1) {
                result.oauthParams[key] = p[i].slice(split + 1);
            } else {
                if (result.paramsString !== '') {
                    result.paramsString += '&';
                }
                result.paramsString += p[i];
            }
        }
        return result;
    }

I will keep digging

[djoho]

The difference is, that the current #parseCallbackParams(paramsString, supportedParams) function returns the result.paramsString in urlencoded form and contains an additional = at the end
%2Fadmin%2Fmaintenance%2Fscripts=

Whereas before this was returned unencoded
/admin/maintenance/scripts

Modifying the new #parseCallbackParams(paramsString, supportedParams) function and replacing the return result

paramsString: params.toString(), -> https://github.com/jonkoops/keycloak-js/blob/7383bdd5c2fd8bd970cdfd640be3d0ea94cb319d/lib/keycloak.js#L1105

with

paramsString: decodeURIComponent(params.toString()).slice(0, -1),

solves the issue.

I know that it is not a solution, but eventually it helps understanding the issue?

[jonkoops]

Thanks for diving into this @djoho, that should be plenty of information to go on, appreciate the detailed debugging. It seems that the likely solution is to split the original route path off the returned fragment before parsing the arguments. I am currently bogged down on onboarding on a different project, so I likely won't be able to look at this until Friday (when I have some free time).

In the meantime, I am marking this as 'help wanted' in case anyone would like to provide a fix (also assigning Copilot to see if it can provide a solution). Even a failing test that reproduces this behavior would be appreciated! If nobody gets to it, I will try to have a proper fix in at the end of the week.