Implicit Callback issue for Angular failing to load css, js, … all assets when base url in index.html

Questions
1

Hi,
I have an angular 8 application and i have implemented Okta into my application using the example here. I am able to be redirected to Okta Login but when the redirect happens, the URL is :“http://localhost:4200/authorization-code/assets/scss/bootstrap.min.css” As you can see an excess “authorization-code” is added at the end. That fails as the redirect URL should just be http://localhost:4200. All resources are trying to be fetched from localhost:4200/authorization-code/main.js and all other files which fail.

My base-href :
Redirect URI : document.getElementsByTagName(‘base’)[0].href + ‘authorization-code/callback’,

image
image1759×444 25.7 KB

please let me know if i am missing something.
thanks

2

Can you try adding <base href="/" /> to the top of your index.html and see if that helps?

3

I tired adding that and got the same result.

4

Can you try hard-coding your redirect URI to http://localhost:4200? If that works, you should be able to use window.location.origin + '/authorization-code/callback'.

5

@mraible I tried hardcoding ‘http://localhost:4200/authorization-code/callback’ but got the same issue. I even tried setting the redirect URI manually by adding this “this.oktaAuth.setFromUri(‘http://localhost:4200/’);” in my app component but event this is ignored. I tried interceptor but those wont work as main.js cant be loaded.

6

I was able to get the sample you mentioned working with authorization-code/callback. Here’s how:

git clone https://github.com/okta/samples-js-angular.git
cd samples-js-angular/okta-hosted-login

Then I created an app on Okta with http://localhost:8080/authorization-code/callback as a login redirect URI.

spa-app
spa-app742×662 26.1 KB

Next, I created a testenv file in the samples-js-angular directory.

ISSUER=https://dev-133320.okta.com/oauth2/default
CLIENT_ID=0oa2ixujp77hbMZcU357

Then I changed src/app/app.config and app.module.ts to use this new redirectUri.

--- a/okta-hosted-login/src/app/app.config.ts
+++ b/okta-hosted-login/src/app/app.config.ts
@@ -4,7 +4,7 @@ export default {
   oidc: {
     clientId: `${CLIENT_ID}`,
     issuer: `${ISSUER}`,
-    redirectUri: 'http://localhost:8080/implicit/callback',
+    redirectUri: 'http://localhost:8080/authorization-code/callback',
     scopes: ['openid', 'profile', 'email'],
     pkce: true,
     testing: {
diff --git a/okta-hosted-login/src/app/app.module.ts b/okta-hosted-login/src/app/app.module.ts
index e3affe7..d48b5f3 100644
--- a/okta-hosted-login/src/app/app.module.ts
+++ b/okta-hosted-login/src/app/app.module.ts
@@ -34,7 +34,7 @@ const appRoutes: Routes = [
     component: HomeComponent,
   },
   {
-    path: 'implicit/callback',
+    path: 'authorization-code/callback',
     component: OktaCallbackComponent,
   },

After that, I ran ng serve and was able to successfully login.

7

Everyone, i was able to resolve this issue. It turned out to be Location Strategy in my route file. Apparently Okta call back route is not hashed and that makes sense. So if you removed Location Strategy in providers from the app.routing.ts, app loaded fine. Thanks guys.

1 Like
8

Thanks for replying and letting us know how you fixed it!

1 Like
9

@mraible, can you please help me out with similiar situation, my localhost is working as expected but when i delpoy code on PROD receiving error message.

Note: Code deployed on Apache HTTPD server

  1. Login works as expected
  2. redirect to OKTA login page
  3. After signin from OKTA received below error message

Not Found
The requested URL /archivedb/implicit/callback was not found on this server.Error: Cannot match any routes. URL Segment: ‘implicit/callback’

10

i am facing the same issues did you solved it

11

Followed this thread and which resolved my issues:

Github - GitHub - beyondJohn/OktaAngularIntegration: Using Okta OAuth to secure an Angular 8 app using {useHash:true} routing strategy

12

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.