9

I'm following this guide https://developer.okta.com/quickstart/ to add authentication to my React App. I've set everything as per the guide, and I get the id token from the demo preview site. The log says the authentication is successful and provides an id token back. This is how the redirect looks like.

On the redirect I get this error: Cannot GET /implicit/callback displayed in the browser. Where did I go wrong?

This is how my index.js looks like in React:

import { Security, SecureRoute, ImplicitCallback } from '@okta/okta-react';

ReactDOM.render((
  <HashRouter>
    <Switch>
        <Security issuer={config.issuer}
                  client_id={config.clientId}
                  redirect_uri={config.redirect_uri} >
            <Route path='/' exact={true} component={Full}/>
            <Route path='/implicit/callback' component={ImplicitCallback} />
        </Security>
    </Switch>
  </HashRouter>
), document.getElementById('root'));

I think it might have something to do with HashRouter and CoreUI but I don't know what exactly is the problem as I can get it running with the normal create-react-app template.

Adriano
  • 2,862
  • 4
  • 25
  • 37
Salmaan P
  • 601
  • 1
  • 6
  • 25
  • 1
    I just went through the steps in the React Quickstart and was able to get everything to work. You can find my project at https://github.com/mraible/okta-react-quickstart. – Matt Raible Nov 11 '17 at 09:30
  • I was able to get it up and running using the create-react-app template. For this one I am using CoreUi https://github.com/mrholek/CoreUI-React/tree/master/React_Starter . Can't seem to get it running there. If it's not much work could you have a glance and see if it can be done there. Thanks so much! – Salmaan P Nov 12 '17 at 22:19
  • @MattRaible any idea on how to accomplish this using HashRouter instead of BrowserRouter? – Salmaan P Dec 19 '17 at 18:51
  • could it be an issue with webpack? – Salmaan P Dec 19 '17 at 20:57

1 Answers1

2

It was an issue with Webpack. Setting devServer.historyApiFallback: true and output.publicPath: '/' in webpack config fixed the issue.

HashRouter still didn't work, had to use BrowserRouter.

Salmaan P
  • 601
  • 1
  • 6
  • 25