Getting 404 after OKTA authentication for Angular app

Questions
1

Hi,

I have created a sample Angular app with okta SDK by following the instruction from Okta guidelines

When I run the application in my local network ( with ng serve ) it works fine.

It redirected to my Okta login page and on successful login it shown my home page also.

But when I build the application and deploy it on tomcat server, it is showing 404 page instead of my home page.

It redirected to my okta login page and on successful login it should redirect to my home page but instead of home page it is showing 404 page

NOTE: the same build is working fine in my local but when I ran it on Tomcat, it is showing 404 page instead of home page on successful login of okta.

below are my configurations from angular side,

oidc: {
clientId: ‘XXXXXXXXXX’,
issuer: ‘https://XXX/oauth2/default/’,
redirectUri: 'https://XXX/compliance/callback,
scopes: [‘openid’, ‘profile’, ‘email’],
pkce: true
},

oktaerror

2

Which page are you 404’ing on? Have you added the domain for your app hosted on Tomcat as a Trusted Origin?

3

We are getting 404 on callback component, also could you please let us know where to add the domain as trusted origin?

4

Did you modify the callback component to use that /compliance/callback route instead of the default /login/callback?

If you change your redirectUri to https://XXX/login/callback and add the same to the Sign-in redirect URIs in Okta, does it work?

If you do want to use that /compliance route instead, you’ll need to update the config for your routes so that /compliance/callback is associated with the OktaCallbackComponent, found in app.module.ts in our sample.

5

Hi Andrea,

Okta callback component has already been added in app.module.ts with route /compliance/callback here is the screenshot,
image

but still we are getting an issue, do we need to do any changes in tomcat configuration?

6

Might be worth checking your server to make sure it is correctly configured for al the routes being used by your app.

7

Hi Andrea,

Before integrating with Okta it was working as expected but when we integrate with Okta and deployed it on Tomcat from that point of time we are getting issue.
Actually we also added rewrite rule from server.xml so that every 404 it route to index.html but still we are facing the issue, Could you please suggest what would have gone wrong.

Regards,
Vipul Nimbale

8

I have not tested this on tomcat but it may be of help Rewrite Valve

Another Sample.

9

Hi Vipul,

I did test this with tomcat 8.5.69 using the Okta Hosted Angular Sample Application.
Here is what I did to get it to work.

For the ng build make sure to specify the application context you plan to use when deploying too tomcat.

ng build --base-href /oktahosted/

In the Angular modules.ts the path will not contain this application context, nor will the redirectUri passed when creating Okta provider. So for my app,

  {
    path: 'login/callback',
    component: OktaCallbackComponent,
  },

and
redirectUri: '/login/callback'

In tomcat in the webapps directory create your context (oktahosted) folder and copy over all the files from the Angular dist directory. Verify the index.html base href value is your context,
<base href="/oktahosted/">

Edit the tomcat …/conf/server.xml file and add the RewriteValve,

<Host name="localhost"  appBase="webapps"
            unpackWARs="true" autoDeploy="true">
    <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />
    ...
</Host>

Create a file …/conf/Catalina/localhost/rewrite.config in tomcat and add,

RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/oktahosted/(.*) /oktahosted/index.html

specifying your application context.

In Okta for your SPA application configuration, add a entry in Sign-in redirect URIs to include the application context your application will be deployed to.
http://localhost:8080/oktahosted/login/callback

You most likely will want to add an entry for the logout redirect URIs as well.

This is what I did in order to get our sample app to work. If you run into issues testing, open the browser dev tools, in the network tab make sure the values you expect to be passed in the /authorize call. Redirect URI that includes your application context,

http://localhost:8080/oktahosted/login/callback

In tomcat you should also be able to set the rewrite valve only for your application via WEB-INF, but I would try this setup first in order to get it working.

10

Hi Eric,

Thanks for your solution , we tried it and it worked on localhost but when we tried to do same procedure on UAT server still we are getting same 404 issue.

One thing would like mention that we have a different subdomain on UAT, so we added new host in server.xml also we added new rewrite.config in the Catalina folder with folder name of sub domain but still no luck.

Regards,
Vipul Nimbale

11

Any update on this, we tried all possible solution but not sure where what is the issue, could it be WAF issue can someone suggest here?