Okta authentication works locally but fails in Docker production build with 404 error

Other Questions NPM
1

I’m having trouble with my React app using Okta for authentication. It works fine when I run it locally with npm run dev, but when I build it for production using Docker, I get a 404 error after logging in.

The app uses react-router-dom v5.34 and Vite. Here’s a simplified version of my setup:

// main.jsx
createRoot(document.getElementById('root')).render(
  <Router>
    <App />
  </Router>
);

// App.jsx
function App() {
  return (
    <OktaWrapper authClient={authClient} restorePathAfterLogin={restorePathAfterLogin}>
      <Routes>
        <ProtectedRoute path='/' element={<Dashboard />} />
        <Route path='/auth/callback' element={<AuthCallback />} />
      </Routes>
    </OktaWrapper>
  );
}

The error occurs when Okta tries to redirect back to my app after login. I think I need to configure my backend to handle the callback route, but I’m not sure how to do this with my Docker setup.

I’ve tried adding a redirect in my Nginx config, but it feels like a hack:

server {
  listen 8080;
  root /usr/share/nginx/html;
  
  location / {
    try_files $uri $uri/ /index.html;
  }
  
  error_page 404 /index.html;
}

This works, but it doesn’t seem like the right solution. How can I properly handle the Okta callback in my Docker production build?

2

I’ve dealt with this exact headache before, and it’s a common stumbling block when moving from local to Docker. The issue isn’t with Okta per se, but how Docker handles routing for single-page apps.

Here’s what worked for me: instead of messing with Nginx, I added a simple express server to serve my static files. In your Dockerfile, instead of using Nginx, install express and create a server.js file:

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(8080);

This catches all routes and serves your index.html, allowing React Router to handle routing client-side. Don’t forget to update your Dockerfile to use Node instead of Nginx and run this server.

Also, double-check your Okta config to ensure the callback URL matches your production domain. This combo should solve your 404 woes without any hacky solutions.

3

I’ve encountered a similar issue with Okta authentication in a Docker production environment. The problem likely stems from how your app handles client-side routing in production.

Instead of modifying the Nginx config, I’d suggest updating your Vite configuration. Add a base URL that matches your production environment:

// vite.config.js
export default defineConfig({
  base: '/app/',
  // other config options
})

This ensures that your app’s assets are loaded correctly in production. Also, make sure your Okta configuration includes the correct redirect URI for your production environment.

If the issue persists, consider implementing a catch-all route in your React app to handle potential 404s:

<Route path='*' element={<Navigate to='/' replace />} />

This approach maintains your routing logic within the React app, providing a more robust solution for production deployments.

4

hey mate, i had a similar issue with my docker setup. the problem’s prolly with how your app handles routes in production. instead of messing with nginx, try adding a simple express server to serve your static files. it’s way easier and works like a charm.

basically, create a server.js file that uses express to serve your build folder and catch all routes. then update your dockerfile to use node instead of nginx. don’t forget to double-check your okta config for the right callback url too!