Hi,
I’m tring to create a new Web Application and integrate with my company’s OKTA SSO.
I was able to get this working when I do it manually from the browser and postman. I used “authorization_code” flow and called /authorize endpoint with a code and used the returned code given in the response to invoke the /token endpoint and get the OAUTH2 Access Token. It works fine from postman.
I’m trying to do the same from my ReactJS WebApp but it fails to redirect properly. I need someone to validate it. Please help. Thank you.
-
The okta admin console does not allow a ‘#’ to be part of my return url
https://mycompany.com/#/dashboardHow should I enter the above url as the OKTA Admin console wouldn’t allow ‘#’
App.js
import React, { Component } from ‘react’;
import { HashRouter, Route, Switch, withRouter } from ‘react-router-dom’;
import { Security, SecureRoute, LoginCallback } from ‘@okta/okta-react’;
import { OktaAuth } from ‘@okta/okta-auth-js’;
import ‘./App.scss’;
const loading = () =>
// Containers
const DefaultLayout = React.lazy(() => import(’./containers/DefaultLayout’));
// Pages
const Login = React.lazy(() => import(’./views/Pages/Login/Login’));
const Register = React.lazy(() => import(’./views/Pages/Register’));
const Page404 = React.lazy(() => import(’./views/Pages/Page404’));
const Page500 = React.lazy(() => import(’./views/Pages/Page500’));
const OktaRedirect = React.lazy(() => import(’./views/Theme/Login/Redirect’ ));
class App extends Component {
constructor(props) {
super(props);
this.onAuthRequired = this.onAuthRequired.bind(this);
this.oktaAuth = new OktaAuth({
issuer: 'https://mycompany.okta.com/oauth2/ausa4errt55RffeDr1',
clientId: '0oa9wpouomc3o300i2ee2',
redirectUri: 'http://mycompany.com:port/dashboard',
scope: 'openid email profile',
onAuthRequired: this.onAuthRequired,
pkce: false
});
}
onAuthRequired() {
this.props.history.push(’/login’);
}
render() {
return (
<React.Suspense fallback={loading()}>
<Route exact path="/login" name=“Login Page” render={props => <Login {…props}/>} />
<Route exact path="/redirect" name=“Redirect” render={props => <OktaRedirect {…props}/>} />
<Route exact path="/register" name=“Register Page” render={props => <Register {…props}/>} />
<Route exact path="/404" name=“Page 404” render={props => <Page404 {…props}/>} />
<Route exact path="/500" name=“Page 500” render={props => <Page500 {…props}/>} />
<SecureRoute path="/" name=“Home” render={props => <DefaultLayout {…props}/>} />
</React.Suspense>
);
}
}
export default withRouter(App);