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

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?

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

1 Like

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

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. :wink:

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

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.