Trouble with reloading page with expired JWT token


Admittedly this is an edge case but it does happen and the errors, for me, are not illuminating enough to pinpoint the problem.

I am in the auth root on a page. With the JWT expired I press reload and I stay in the auth root but nothing shows up on the nav bar and I also get a blank page. I can then hit reload again and this time It reloads the public root and takes me to the login page.

If it determines that the token is expired via this code in the authoriseStep function:

checkAuthentication(navigationInstruction: NavigationInstruction, next: Next) {
    if (this.authService.hasTokenExpired(this.authService.getIdentity())) {
        console.log("just before forceReturnToPublic");
    console.log("after the if");

its directed to the forceReturnToPublic()

forceReturnToPublic(): Promise<any> {
    console.log("gets here");
    return Promise.resolve()
        .then(() => this.pipelineProvider.reset())
        .then(() => this.authService.clearIdentity())
        .then(() => this.router.navigate("/", { replace: true, trigger: false }))
        .then(() => this.router.reset())
        .then(() => this.aurelia.setRoot(PLATFORM.moduleName('public/public/public'))
        .then(() => this.router.navigate('login'))

With this it should go to the public root and be directed to the login page. It does this if it finds an expired token on page change but if the token is expired and a reload is made it stays in the auth root and I get the following error in the console (I have also included the detail):

    aurelia - logging - console.js:47 ERROR [app - router] Error: Unable to find module with ID: not - found
    at WebpackLoader.<anonymous>(aurelia - loader - webpack.js:187)
    at step (aurelia - loader - webpack.js:36)
    at - loader - webpack.js:17)
    at aurelia- loader - webpack.js:11
    at new Promise(<anonymous>)
    at 54.__awaiter (aurelia - loader - webpack.js:7)
    at WebpackLoader.54.WebpackLoader._import(aurelia - loader - webpack.js:152)
    at WebpackLoader.<anonymous>(aurelia - loader - webpack.js:252)
    at step (aurelia - loader - webpack.js:36)
    at - loader - webpack.js:17)
    error @ aurelia-logging - console.js:47
        (anonymous) @ aurelia-logging.js:31
    processResult @ aurelia-router.js:1772
        (anonymous) @ aurelia-router.js:1725
    Promise resolved (async)
        (anonymous) @ aurelia-router.js:1724
    Promise resolved (async)
    _dequeueInstruction @ aurelia-router.js:1697
        (anonymous) @ aurelia-router.js:1688
    _queueInstruction @ aurelia-router.js:1685
        (anonymous) @ aurelia-router.js:1631
    Promise resolved (async)
    loadUrl @ aurelia-router.js:1630
    _loadUrl @ aurelia-history - browser.js:285
    navigate @ aurelia-history - browser.js:230
    navigate @ aurelia-router.js:801
        (anonymous) @ app.ts: 170
    Promise resolved (async)
        (anonymous) @ app.ts: 170
    Promise resolved (async)
    app / app / app.AuthorizeStep.forceReturnToPublic @ app.ts: 169
    app / app / app.AuthorizeStep.checkAuthentication @ app.ts: 138
        (anonymous) @ app.ts: 122
    Promise resolved (async)
    app / app / @ app.ts: 122
    next @ aurelia-router.js:112
    Promise resolved (async)
    run @ aurelia-router.js:1413
    next @ aurelia-router.js:112
    iterate @ aurelia-router.js:1191
    processDeactivatable @ aurelia-router.js:1194
    run @ aurelia-router.js:1125
    next @ aurelia-router.js:112
        (anonymous) @ aurelia-router.js:577
    Promise resolved (async)
    run @ aurelia-router.js:575
    next @ aurelia-router.js:112
    run @ aurelia-router.js:125
        (anonymous) @ aurelia-router.js:1724
    Promise resolved (async)
    _dequeueInstruction @ aurelia-router.js:1697
    activate @ aurelia-router.js:1674
        (anonymous) @ aurelia-router.js:1652
    Promise resolved (async)
    registerViewPort @ aurelia-router.js:1651
    RouterView @ router-view.js:74
    invokeWithDynamicDependencies @ aurelia-dependency - injection.js:425
    invoke @ aurelia-dependency - injection.js:400
    invoke @ aurelia-dependency - injection.js:671
    get @ aurelia-templating.js:1990
    get @ aurelia-dependency - injection.js:610
    elementContainerGet @ aurelia-templating.js:2045
    create @ aurelia-templating.js:4032
    applyInstructions @ aurelia-templating.js:2147
    create @ aurelia-templating.js:2368
    create @ aurelia-templating.js:4044
        (anonymous) @ aurelia-templating.js:4530
    Promise resolved (async)
    createController @ aurelia-templating.js:4529
    _createControllerAndSwap @ aurelia-templating.js:4491
    compose @ aurelia-templating.js:4577
    compose @ aurelia-templating.js:4841
    setRoot @ aurelia-framework.js:111
        (anonymous) @ boot.ts: 32
    Promise resolved (async)
    configure @ boot.ts: 28
        (anonymous) @ aurelia-bootstrapper.js:124
    Promise resolved (async)
    config @ aurelia-bootstrapper.js:119
        (anonymous) @ aurelia-bootstrapper.js:155
    Promise resolved (async)
    bootstrap @ aurelia-bootstrapper.js:154
        (anonymous) @ aurelia-bootstrapper.js:141
    Promise resolved (async)
    run @ aurelia-bootstrapper.js:136
        (anonymous) @ aurelia-bootstrapper.js:161
    44 @ app.js?v = Z4Ii12MRI4PN2sHqRdWd7J33vvu4huS - Zstn3trn1EU:16051
    __webpack_require__ @ bootstrap 24f087875c150a481cde: 659
    fn @ bootstrap 24f087875c150a481cde: 85
    82 @ app.js?v = Z4Ii12MRI4PN2sHqRdWd7J33vvu4huS - Zstn3trn1EU:23299
    __webpack_require__ @ bootstrap 24f087875c150a481cde: 659
    0.__webpack_exports__.e @ bootstrap 24f087875c150a481cde: 708
        (anonymous) @ bootstrap 24f087875c150a481cde: 708
    auth - service.ts:63 GET http://localhost:3000/api/jwt/JWTStatus 401 (Unauthorized)

Instead of redirecting it stays in the auth root but unauthorised and also because you are unathorised nothing comes up on the nav menu either.

NOTE: the forceReturnToPublic() function runs and it should stop there and redirect but it runs through the function and returns back to print “after the if” in the console screen… it never gets redirected back to the login screen in the public root…

Why is it erroring, why doesn’t the forceReturnToPublic() work - return the user back to the login screen?


What are the calls to .reset() doing? I appreciate from the Guides that there are different scenarios with child routers that I’ve not encountered, but I’ve never needed to reset providers or pipelines, or call .setRoot more than once at startup (setRoot “Instantiates the root component and adds it to the DOM”).

I’d have expected that just the following would have sufficed:

return Promise.resolve()
  .then(() => this.router.navigate("login"))

When it navigates to login I believe the page pipeline will run from the beginning, and any authentication steps in that pipeline (depending on router config) would also be run.