So have developed a React application making use of the okta-react library.
Developing on my local machine, it works fine and does everything as expected.
I build it and deploy it onto an Apache server and it seems LoginCallback is not processing - the app redirects to Okta, gets a session and sends a code back to the app but does not go anywhere.
I’ve run a build of the app locally and it continues to work as expected and have tried deploying the app via serve (proxied back to Apache) and it still behaves as if deployed directly to Apache.
below is the code for the app
import ReactDOM from 'react-dom'
import { BrowserRouter, Route } from 'react-router-dom'
import './css/base.css'
import App from './App'
import * as serviceWorker from './serviceWorker'
import { Security, SecureRoute, LoginCallback } from '@okta/okta-react'
import { OktaAuth } from '@okta/okta-auth-js'
import OKTA from './config/okta'
const oktaAuth = new OktaAuth({
issuer: `${OKTA.OKTA_ORG_URL}/oauth2/default`,
redirectUri: `${window.location.origin}/login/callback`,
clientId: `${OKTA.CLIENT_ID}`
}),
AuthenticatedCallback = (auth, ori) => {
const u = window.location.origin + (ori || '/')
window.location = u
return u
}
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<Security oktaAuth={oktaAuth} restoreOriginalUri={AuthenticatedCallback}>
<SecureRoute path={'/'} render={()=><App oktaAuth={oktaAuth}/>}/>
<Route path={'/login/callback'} component={LoginCallback}/>
</Security>
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
)
This is the Apache config for the deployed directory:
<Directory /var/www/demo/html/rps>
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [L]
</Directory>
Is this problem likely an apache setting issue or have I misconfigured the application Okta? Otherwise are there any other suggestions as to how I should troubleshoot this?