LoginCallback URL not found in ReactJS application

I have a ReactJS application that I’m trying to use OIDC Okta with. I’m following the react-router-dom v6 examples here: okta-react/samples/routing/react-router-dom-v6 at master · okta/okta-react · GitHub.

I get to our Okta page (this is a corporate Okta server/setup and I have no control over it), enter our Smartcard PIN, and when I get redirected back to my application, I get “The requested URL is not found on this server”. I was under the impression that the LoginCallback route would handle this for me, but no matter what try, I cannot get the callback to work.

Here’s my App.js where the routes are defined:

      <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path="/tsadmin/login/callback" element={<LoginCallback loadingElement={<Loading />} />} />
          <Route path='/tsadmin' element={<RequiredAuth />} >
            <Route path='' element={<Dashboard />} />
          </Route>
        </Routes>
    </Security>

And my index.js:

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter basename='/tsadmin'>
    <React.StrictMode>
      <App />
    </React.StrictMode>,
  </BrowserRouter>    
)

Any ideas? I’ve been stuck on this for 3 or 4 days now.

Thanks,
Harry

This could be related to your proxy server, Nginx, or Apache configuration. Kindly verify whether the callback request is at least reaching your server using Postman. What does it return when you directly hit the URL? For example:

Proxy servers, load balancers, and other network appliances often obscure information about the request before it reaches the app:

https://<BASE_URL>/tsadmin/login/callback — does this return a 200?

Are you able to check for any logs when you manually make this request?
Is that URL publicly accessible over HTTPS?

Can you omit the React Router part and load this as a plain endpoint to see if it is currently being channeled correctly?