I need the hashbang to work pushState = false

[chdev77]

About 6 months ago I created a proto of Identity Server 3 with AspNet Identity and an Aurelia app. Also with the suggested pushState = true for the Aurelia router. At the time was told to shelve the proto but, was working great. Fast-forward to 6+ months of Aurelia development and now dusting off the proto for OIDC. We now have many items using the hashbang, google tag manager and a WordPress homepage to name a few. So, everything works until I set pushState = true. I've tried many different configs with the redirect urls without any luck. I do not know how to create a hack to make this work or even where to start.

Any ideas would be very helpful.

[chdev77]

I have the open-id-connect-configuration

export const oidcConfig = {
  loginRedirectModuleId: 'home',
  logoutRedirectModuleId: 'home',
userManagerSettings: {
    post_logout_redirect_uri: `${environment.openidConfig.urls.host}/#/signout-oidc`,
    redirect_uri: `${environment.openidConfig.urls.host}/#/signin-oidc`,
}

app.js
config.options.pushState = false;

I can get the IdSvr login and authenticate but redirecting to the aurelia app I get the following...

deep-extend.ts:148 ERROR [app-router] TypeError: Cannot set property 'route' of undefined
at http://localhost:9000/scripts/vendor-bundle.js:47048:17
From previous event:
at AppRouter._createRouteConfig (http://localhost:9000/scripts/vendor-bundle.js:47047:10)
at catchAllHandler (http://localhost:9000/scripts/vendor-bundle.js:46939:23)
at evaluateNavigationStrategy (http://localhost:9000/scripts/vendor-bundle.js:47085:38)
at AppRouter._createNavigationInstruction (http://localhost:9000/scripts/vendor-bundle.js:47028:16)
at AppRouter.loadUrl (http://localhost:9000/scripts/vendor-bundle.js:47626:19)
at BrowserHistory._loadUrl (http://localhost:9000/scripts/vendor-bundle.js:42881:55)
at BrowserHistory.activate (http://localhost:9000/scripts/vendor-bundle.js:42780:21)
at AppRouter.activate (http://localhost:9000/scripts/vendor-bundle.js:47681:20)
at http://localhost:9000/scripts/vendor-bundle.js:47652:31
at
From previous event:
at http://localhost:9000/scripts/vendor-bundle.js:47651:24
at http://localhost:9000/scripts/vendor-bundle.js:47657:16
at AppRouter.registerViewPort (http://localhost:9000/scripts/vendor-bundle.js:47664:10)
at new RouterView (http://localhost:9000/scripts/vendor-bundle.js:55446:19)
at Object.invokeWithDynamicDependencies (http://localhost:9000/scripts/vendor-bundle.js:41238:20)
at InvocationHandler.invoke (http://localhost:9000/scripts/vendor-bundle.js:41220:168)
at Container.invoke (http://localhost:9000/scripts/vendor-bundle.js:41484:25)
at ProviderResolver.get (http://localhost:9000/scripts/vendor-bundle.js:50089:74)
at Container.get (http://localhost:9000/scripts/vendor-bundle.js:41423:23)
at Container.elementContainerGet [as get] (http://localhost:9000/scripts/vendor-bundle.js:50144:17)
at HtmlBehaviorResource.create (http://localhost:9000/scripts/vendor-bundle.js:52111:58)
at applyInstructions (http://localhost:9000/scripts/vendor-bundle.js:50246:33)
at ViewFactory.create (http://localhost:9000/scripts/vendor-bundle.js:50467:9)
at HtmlBehaviorResource.create (http://localhost:9000/scripts/vendor-bundle.js:52123:41)
at http://localhost:9000/scripts/vendor-bundle.js:52571:18
From previous event:
at CompositionEngine.createController (http://localhost:9000/scripts/vendor-bundle.js:52570:10)
at CompositionEngine._createControllerAndSwap (http://localhost:9000/scripts/vendor-bundle.js:52532:19)
at CompositionEngine.compose (http://localhost:9000/scripts/vendor-bundle.js:52618:21)
at TemplatingEngine.compose (http://localhost:9000/scripts/vendor-bundle.js:52881:38)
at Aurelia.setRoot (http://localhost:9000/scripts/vendor-bundle.js:42191:21)
at http://localhost:9000/scripts/app-bundle.js:391:22
From previous event:
at Object.configure (http://localhost:9000/scripts/app-bundle.js:390:21)
at http://localhost:9000/scripts/vendor-bundle.js:40770:29
From previous event:
at config (http://localhost:9000/scripts/vendor-bundle.js:40765:56)
at http://localhost:9000/scripts/vendor-bundle.js:40801:14
From previous event:
at bootstrap (http://localhost:9000/scripts/vendor-bundle.js:40800:26)
at http://localhost:9000/scripts/vendor-bundle.js:40787:9
at
From previous event:
at run (http://localhost:9000/scripts/vendor-bundle.js:40782:61)
at Object. (http://localhost:9000/scripts/vendor-bundle.js:40807:37)
at Object.execCb (http://localhost:9000/scripts/vendor-bundle.js:34678:33)
at Module.check (http://localhost:9000/scripts/vendor-bundle.js:33865:51)
at Module.enable (http://localhost:9000/scripts/vendor-bundle.js:34158:22)
at Object.enable (http://localhost:9000/scripts/vendor-bundle.js:34539:39)
at Module. (http://localhost:9000/scripts/vendor-bundle.js:34143:33)
at http://localhost:9000/scripts/vendor-bundle.js:33116:23
at each (http://localhost:9000/scripts/vendor-bundle.js:33041:31)
at Module.enable (http://localhost:9000/scripts/vendor-bundle.js:34095:17)
at Module.init (http://localhost:9000/scripts/vendor-bundle.js:33770:26)
at http://localhost:9000/scripts/vendor-bundle.js:34442:36

[nmocruz]

I think that we can't use # simbols on the redirect urls because the identity server is using fragements to send tokens states etc. something ${callbackUrl}#token=(...) and so token will mess with routing match.

I solved this be using a callback.html page that redirects back to '/' after. Not sure if is a good soluction but seems like the aurelia-router is not able to detect redicted to routes because fragments are used to send values in the redirect url.

Maybe instead of register redirect_uri as a aurelia router, it should be handled by a different mechanism just for these urls

[pimvd]

Please can you share your callback.html? What do I have to do in callback.html besides the redirect?

[nmocruz]

is a regular html. with a body like this <body> <script src="oidc-client.js"></script> <script> new Oidc.UserManager().signinRedirectCallback().then(function () { window.location = "/"; }).catch(function (e) { console.error(e); }); </script> </body> was doing the job a few version ago, not sure about now.

…

[pimvd]

Thanks! It works!

[koenbeuk]

You can also handle authentication yourself in aurelia's configure method (by default located in main.ts). in one of my projects:

async function configure() {
    .......
    await aurelia.start();

    // this code runs before the aurelia-router kicks in
    if (window.location.hash.indexOf("#id_token") > -1) {
            let openIdConnect = aurelia.container.get(OpenIdConnect) as OpenIdConnect;
            let isSilentLogin = window.top !== window.self;
            if (isSilentLogin) {
                await openIdConnect.userManager.signinSilentCallback();
            } else {
                await openIdConnect.userManager.signinRedirectCallback();
            }
    }

    aurelia.setRoot(PLATFORM.moduleName("app"));
}

[arnederuwe]

I'll see if we can get this baked in, or at least documented