OKTA Redirect fails

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.

  1. The okta admin console does not allow a ‘#’ to be part of my return url
    https://mycompany.com/#/dashboard

    How 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 = () =>

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);

I am not sure I understand - why do you need a # in the url? Also, have you tried encoding it as %23?

Hello,
There is an open GH issue for this. You may try adding a comment for status.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.