Configuring the Angular router to `useHash: true` breaks `OktaAuthService.loginRedirect`

[RobinDeSchepper]

When I click the login button provided in the quickstart I get this error after a redirect from the /implicit/callback route:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'code'
Error: Cannot match any routes. URL Segment: 'code'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:2459)
    at CatchSubscriber.selector (router.js:2440)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:79)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:59)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:79)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:59)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:79)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:59)
    at ThrowIfEmptySubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:79)
    at resolvePromise (zone.js:836)
    at resolvePromise (zone.js:795)
    at zone.js:897
    at ZoneDelegate.invokeTask (zone.js:431)
    at Object.onInvokeTask (core.js:26246)
    at ZoneDelegate.invokeTask (zone.js:430)
    at Zone.runTask (zone.js:198)
    at drainMicroTaskQueue (zone.js:611)

I’m not testing this in a new empty app, it will be my next step to see if it also occurs in an empty project, strictly following the quickstart guide, but what could be the issue here? Nowhere in my project do I refer to any ‘code’ paths and it seems to happen during the process that I import straight from OktaAuthModule.

The entry point into that module is this call:

this.oktaAuth.loginRedirect('/home');

where this.oktaAuth is the OktaAuthService

[RobinDeSchepper]

It’s a bug!

It occurs if you set useHash: true on the router.

RouterModule.forRoot(routes, {
  useHash: true
})

I’ve made a StackBlitz example that reproduces the issue https://stackblitz.com/edit/angular-5bkkhr (just plug your credentials in the config in app.module.ts). I accept any and all symbolic rewards such as badges and bragging rights for my find. In absence of any such swagger my next bug report will go no further than: “it no worky worky, plz help”.

The stackblitz doesn’t work when you try it through the preview panel on the right but it will work if you visit the stackblitz’s standalone page.

[dudumabogdan]

We have the same issue, on a new Application. Issue was reported on December. Do we have any feedback on this issue? Any ideas for fixing the problem?

Quit important as we need to move our existing App from Cognito AWS to OKTA, thus we need to find a solution.

Thanks in advance for any feedback!

[beyondOkta]

This was a real pain in the butt!! But, I have a bare bones working example of how to resolve this issue available on github. You need to intercept the route via CanActivate and use @okta/okta-auth-js tokenManager instead of @okta/okta-angular CallbackComponent.

beyondJohn/OktaAngularIntegration

If my github repo saved your life (or maybe your day/week) please star it

Credits:I figured this out with a little help from https://github.com/okta/okta-oidc-js/issues/672 . Also Matt Raible made himself available for my first round of debugging/sanity checking questions https://www.okta.com/blog/author/matt-raible/

[naveen800]

Thanks for your solution. This helped me lot resolving my issues.

[keithb]

@beyondOkta

I am trying to implement your solution as I too am getting “the error” when logging in. However, OktaAuth is non-constructable!

oktaAuth = OktaAuth({
    clientId: this.CLIENT_ID,
    issuer: this.ISSUER,
    redirectUri: this.LOGIN_REDIRECT_URI,
    pkce: true
  });

Results in an error: This expression is not callable.
Type ‘typeof import(“c:/Repos/Ui/node_modules/@okta/okta-auth-js/lib/browser/index”)’ has no call signatures.ts(2349)

❯ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 9.1.6
Node: 14.15.0
OS: win32 x64

Angular: 9.0.7
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.7
@angular-devkit/build-angular     0.900.7
@angular-devkit/build-optimizer   0.900.7
@angular-devkit/build-webpack     0.900.7
@angular-devkit/core              9.0.7
@angular-devkit/schematics        9.1.6
@angular/cdk                      9.2.4
@angular/cli                      9.1.6
@angular/material                 9.2.4
@ngtools/webpack                  9.0.7
@schematics/angular               9.1.6
@schematics/update                0.901.6
rxjs                              6.5.5
typescript                        3.7.5
webpack                           4.41.2

Used the NPM command to install the Okta modules.

PS: I am very new to Angular.