Cannot GET Implicit Callback for Angular 8

Questions
1

Hi, I have an Angular 8 application that I would like to use Okta to authenticate users. I created a developer account & console and the authentication works depend on how I start my application. When I said it works, I mean the application will redirect me to the Okta Sign-In dialog and return me back to the original starting point.

If I start my Angular application using this command “ng serve --port 4200 -o”, then the authentication worked flawlessly. However, if I use this command “ng server --port 4200 -o -base-ref /myapp/”, then I will get Cannot GET /implicit/callback.

I am relatively new to Angular and Okta; therefore, I am not clear what the issue is? Can you help?

Thank you.

2

If you want to change the base href of your app, you’ll need to change the login redirect URI as well. Instead of using http://localhost:4200/implicit/callback, you’ll need to use http://localhost:4200/<your-base-href>/implicit/callback. You’ll also need to change the route for the OktaCallbackComponent:

const appRoutes: Routes = [
  {
    path: '<your-base-href>/implicit/callback',
    component: OktaCallbackComponent
  },
  ...
]
3

I followed your instruction and it did not quite work. Perhaps, it is due to my lack of knowledge on the configuration. I included my configuration from the developer console and my client-side code below.

Error

OktaDeveloperForumQuestionOnImplicitCallback-ErrorOutput
OktaDeveloperForumQuestionOnImplicitCallback-ErrorOutput1129×644 66.3 KB

Raw Text

(upload://nQuPwF65KCmp6oo04KdqheZg2a6.png)
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ‘implicit/callback’
Error: Cannot match any routes. URL Segment: ‘implicit/callback’
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:852)
at resolvePromise (zone.js:809)
at zone.js:913
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:26246)
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push…/node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at drainMicroTaskQueue (zone.js:601)
at ZoneTask.push…/node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:502)
at invokeTask (zone.js:1693)

Angular TypeScript

const ISSUER = 'https://dev-xxxxx.okta.com/oauth2/default';
const CALLBACK_PATH = 'BusinessContinuity/implicit/callback';
const REDIRECT_URI = 'http://localhost:4200/BusinessContinuity/implicit/callback';
const CLIENT_ID = 'xxxxxxxxxxxxxxxx';

const config = {
  issuer: ISSUER,              
  redirectUri: REDIRECT_URI,   
  clientId: CLIENT_ID,
  scopes: ['openid', 'profile', 'email'],
  pkce: true
};

Route
{
path: CALLBACK_PATH,
component: OktaCallbackComponent
}

Developer Console Configuration

OktaDeveloperForumQuestionOnImplicitCallback
OktaDeveloperForumQuestionOnImplicitCallback719×661 24.5 KB

4

Maybe it’s easier to ask: why do you want to do this? It seems like you’re making things harder than they need to be, but I’m guessing you have a good reason for wanting to have a base-href that’s not the default.

5

I inherited this project from a previous developer and I don’t know what his rationale was for doing it either. Since I am so new to Angular, I did not question it.

The only difference is that the URL would read like this without the base-ref: http://localhost:4200/home instead of http://localhost:4200/base-ref/home.

I am curious if it has anything to do with IIS virtual directory or not.

Thank you for your help.

6

Can you any help please, i’m having issues implicit/callback

I’m using Angular 8, OKTA and Apache httpd server. FYI I did updated .htaccess

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ‘implicit/callback’
Error: Cannot match any routes. URL Segment: ‘implicit/callback’
at ar.noMatchError (main-es2015.2b92338aaa6db165e9da.js:1)
at tt.selector (main-es2015.2b92338aaa6db165e9da.js:1)
at tt.error (main-es2015.2b92338aaa6db165e9da.js:1)
at l._error (main-es2015.2b92338aaa6db165e9da.js:1)
at l.error (main-es2015.2b92338aaa6db165e9da.js:1)
at l._error (main-es2015.2b92338aaa6db165e9da.js:1)
at l.error (main-es2015.2b92338aaa6db165e9da.js:1)
at l._error (main-es2015.2b92338aaa6db165e9da.js:1)
at l.error (main-es2015.2b92338aaa6db165e9da.js:1)
at Ue._error (main-es2015.2b92338aaa6db165e9da.js:1)
at v (polyfills-es2015.5b10b8fd823b6392f1fd.js:1)
at v (polyfills-es2015.5b10b8fd823b6392f1fd.js:1)
at polyfills-es2015.5b10b8fd823b6392f1fd.js:1
at a.invokeTask (polyfills-es2015.5b10b8fd823b6392f1fd.js:1)
at Object.onInvokeTask (main-es2015.2b92338aaa6db165e9da.js:1)
at a.invokeTask (polyfills-es2015.5b10b8fd823b6392f1fd.js:1)
at s.runTask (polyfills-es2015.5b10b8fd823b6392f1fd.js:1)
at _ (polyfills-es2015.5b10b8fd823b6392f1fd.js:1)

7

hi naveen i am also facing same problem did you got any solution?

8

@tharun_97

Issue resolved by following below link:

1 Like