OktaAuth not working when used in Angualr site

Question

In my Angular application I have this function to direct to the login page:

const oktaConfig = Object.assign({
  onAuthRequired: (oktaAuth: any, injector: { get: (arg0: any) => any; }) => {
    const router = injector.get(Router);

    // redirect the user to your custom login page
    router.navigate('/login');
  }
}, myAppConfig.oidc);

One of my routes is as follows:

const routes: Routes = [
  { path: 'members', component: MembersPageComponent, canActivate: [ OktaAuthGuard ] },
...
];

and my login.status.component.html contains:

<button routerLink="/members" class="security-btn ml-1">Member</button>

When the Members button is clicked the user should be directed to the login page if they are not already logged in. In my app if this is done nothing visible happens on the page but the console gives this error:

ERROR Error: Uncaught (in promise): TypeError: commands.reduce is not a function computeNavigation@http://localhost:4200/vendor.js:53359:26 createUrlTree@http://localhost:4200/vendor.js:53291:34 createUrlTree@http://localhost:4200/vendor.js:56121:16 navigate@http://localhost:4200/vendor.js:56190:40 onAuthRequired@http://localhost:4200/main.js:160:16 handleLogin/<@http://localhost:4200/vendor.js:69640:31 __awaiter/<@http://localhost:4200/vendor.js:140249:71 ZoneAwarePromise@http://localhost:4200/polyfills.js:1613:29 __awaiter@http://localhost:4200/vendor.js:140245:12 handleLogin@http://localhost:4200/vendor.js:69633:64 canActivate/<@http://localhost:4200/vendor.js:69623:24 fulfilled@http://localhost:4200/vendor.js:140246:58 invoke@http://localhost:4200/polyfills.js:598:26 onInvoke@http://localhost:4200/vendor.js:37134:33 invoke@http://localhost:4200/polyfills.js:597:52 run@http://localhost:4200/polyfills.js:360:43 scheduleResolveOrReject/<@http://localhost:4200/polyfills.js:1502:36 invokeTask@http://localhost:4200/polyfills.js:632:31 onInvokeTask@http://localhost:4200/vendor.js:37121:33 invokeTask@http://localhost:4200/polyfills.js:631:60 runTask@http://localhost:4200/polyfills.js:404:47 drainMicroTaskQueue@http://localhost:4200/polyfills.js:808:35 invokeTask@http://localhost:4200/polyfills.js:717:21 invokeTask@http://localhost:4200/polyfills.js:1826:14 globalZoneAwareCallback@http://localhost:4200/polyfills.js:1852:27 Angular 11 resolvePromise resolvePromise scheduleResolveOrReject invokeTask onInvokeTask invokeTask runTask drainMicroTaskQueue invokeTask invokeTask globalZoneAwareCallback core.js:6479 Angular 3 RxJS 5 Angular 13

I think my issue has something to do with the way my parameters are passed in my function. Am I doing this correctly and if so, what am I doing wrong?

Answer 1

router.navigate('/login'); should have been router.navigate(['/login']);.