404 response at `implicit/bundle.js` when using okta-react library

[nryoung]

I am using the okta-react library to attempt to auth with my application. However, when I am getting redirected back to my application the ImplicitCallback component is attempting to redirect to http://localhost:6002/implicit/bundle.js which obviously doesn’t exist.

Here are the versions I am using:

@okta/okta-react: v1.2.0
react-router-dom: v4.3.1
react-router: v4.3.1
react: v16.8.6
webpack: v4.29.6

Here is my minimal setup

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import { Security } from '@okta/okta-react';

import App from './App';
import Loading from './common/components/Loading';

const AppWithOkta = () => {
  const oktaConfig = { <okta values are here> };
  if (!oktaConfig) {
    return <Loading />;
  }
  return (
    <Router>
      <Security issuer={oktaConfig.issuer} client_id={oktaConfig.clientId} redirect_uri={oktaConfig.redirectUri}>
        <App />
      </Security>
    </Router>
  );
};

ReactDOM.render(<AppWithOkta />, global.document.getElementById('root'));

app.jsx

import React from 'react';
import { hot } from 'react-hot-loader/root';
import { Switch, Route } from 'react-router-dom';
import { SecureRoute, ImplicitCallback } from '@okta/okta-react';

import SecureComponent from './secure-component';
import OtherSecureComponent from './other-secure-component';
import Login from './common/components/Login';

const App = () => (
  <Switch>
    <Route path="/implicit/callback" component={ImplicitCallback} />
    <Route path="/login" component={Login} />
    <SecureRoute path="/some-route" exact component={SecureComponent} />
    <SecureRoute path="/other-route" exact component={OtherSecureComponent} />
  </Switch>
);

export default hot(App);

Whenever I login to okta I get these two requests / responses (obfustcated obviously so as not to share secrets:

First call to /implicit/callback:

Invalid call to /implicit/bundle.js:

I am not sure why it would be trying to redirect to /implicit, I am wondering if this is a routing/redirect bug within the okta-react library?

[mraible]

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

[nryoung]

Holy crap! That worked!!! I have been spending days trying to figure out what is causing this… is this listed in the docs anywhere? This was brutal

[mraible]

It’s not really an Okta-specific thing, so it’s not in our docs. It’s more of something I’ve learned from my many years of web development.

If you think there would be a good place to add it in our docs, please let me know and I’ll do so.

[nryoung]

Fair enough. I have never run in to this issue writing a SPA before where I had to add that tag, I only ran in to this with the okta library. I do think it would be nice to mention in the main documentation or in the troubleshooting steps.

[Fieel]

@mraible

<base href="/" />

It’s a standard when developing SPA, but yeah i agree docs should be updated just for the saké of it

[naveen800]

@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’

[mraible]

If you’re using Apache in production, you need to configure it to serve up a SPA. That is, you need to configure it so all 404s go to index.html. I googled “configure apache for spa” and here’s the first result.

[naveen800]

@mraible thanks for response, even I followed this instruction but not working. Here is my rewrite rule:
<Directory “/archivedb/”>
Options Indexes MultiViews Includes
AllowOverride All
Order allow,deny
Allow from all

AddType application/vnd.ms-fontobject .eot
AddType font/truetype .ttf
AddType application/x-font-woff .woff
AddType font/opentype .otf

RewriteEngine On #RewriteBase /archivedb/ RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^.*$ - [NC,L] RewriteRule ^(.*) index.html [NC,L] #RewriteRule . /index.html [L]

[mraible]

Maybe this Stack Overflow Q&A will help?

[naveen800]

Sorry still no luck, IF update this below rule on httpd.conf

<Directory ~ “^/[\w+\d±]+”>
FallbackResource /index.html

500 Internal Server Error

Internal Server Error

The server encountered an internal error or misconfiguration and was unable to complete your request.

Please contact the server administrator at [no address given] to inform them of the time this error occurred, and the actions you performed just before this error.

More information about this error may be available in the server error log.

[mraible]

I’m sorry, I’m not an Apache expert. I’d suggest you ask a question on Stack Overflow where some experts probably exist.

[naveen800]

Ok thanks for your help, let me try on Stack Overflow

[naveen800]

@mraible ,

Issue resolved by following below link:

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

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!