Cannot GET /implicit/callback

Question

I am integrating okta in my react application for SSO, I followed steps mentioned in okta developer's guide

Here is my index.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { Security, ImplicitCallback } from '@okta/okta-react';
import HomePage from './components/home/HomePage';
import ReactDOM from 'react-dom';

const config = {
  issuer: 'https://XXX.oktapreview.com',
  redirect_uri: window.location.origin + '/implicit/callback',
  client_id: '0oxxxxxxxxxxxxx7'
}

class App extends Component {
  render() {
    return (
      <Router>
        <Security issuer={config.issuer}
                  client_id={config.client_id}
                  redirect_uri={config.redirect_uri}
        >
          <Route path='/' exact={true} component={HomePage}/>
          <Route path='/implicit/callback' component={ImplicitCallback}/>
        </Security>
      </Router>
    );
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

constantly getting Cannot GET /implicit/callback. My app configuration in okta is like below: enter image description here

I am guessing something wrong with webpack config.

Please post all your code. – Colin Ricardo Apr 28 '18 at 08:47 — Colin Ricardo, Apr 28 '18 at 08:47
updated details let me know if you need something else. – Ripple Gupta Apr 29 '18 at 08:59 — Ripple Gupta, Apr 29 '18 at 08:59

score 0 · Answer 1 · answered Apr 29 '18 at 14:22

looks like issue with webpack only, when i removed , publicPath: '/' it worked locally atleast but still not on production environment

output: {
        path: __dirname + '/dist',
        filename: "index_bundle.js",
        publicPath: '/',
        crossOriginLoading: 'anonymous'
    }

Has someone faced this before?

score -1 · Answer 2 · answered May 11 '18 at 04:12

The /implicit/callback is just another route. You could just add google.com and it will redirect to that. This is my component from Okta react sample and it works. hope it helps

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { Security, SecureRoute, ImplicitCallback } from '@okta/okta-react';
import Home from './Home';
import Login from './Login';
import Protected from './Protected';
import Sprotected from './Sprotected';

function onAuthRequired({history}) {
  history.push('/login');
}

class App extends Component {
  render() {
    return (
      <Router>
        <Security issuer='https://mytrainingcompany.okta.com/oauth2/default'
                  client_id='0oa88p4tcET4KPJwg2p6'
                  redirect_uri={window.location.origin + '/implicit/callback'}
                  onAuthRequired={onAuthRequired} >
          <Route path='/' exact={true} component={Home} />
          <SecureRoute path='/protected' component={Protected} />
          <SecureRoute path='/pro' component={Sprotected} />
          <Route path='/login' render={() => <Login baseUrl='https://mytrainingcompany.okta.com' />} />
          <Route path='/implicit/callback' component={ImplicitCallback} />
        </Security>
      </Router>
    );
  }
}

export default App;

Cannot GET /implicit/callback

2 Answers2