React app authenticates with Okta and is fine when using "npm run dev", but in production with Docker build, I get a 404 error in redirect back

Question

I have an app built with React and Vite. I am using react-router-dom v 5.34. I’ve got the app authenticating fine locally with Okta Preview and redirecting back to my correct page using npm run dev but when I do a production build through Docker, after authenticating, I get a 404 error:

http://localhost:3000/login/callback?code=Q7sYx5KPaVRBNkay88iwZf8HGFXgCzBUrEFpIxsFIkc&state=dQTVcMfPjOGl7pFYjWjt4PhtOnGlLyUOCOBg6TKPD3aGv73WjQRyYw9Qb74H1G6v

This is what the general code looks like:

main.tsx

createRoot(document.getElementById("root")!).render(
    <Router>
        <App />
    </Router>
)

app.tsx

<Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
        <Switch>
                <SecureRoute path="/" exact={true}>
                    <SetLayoutAfterAuthentication />
                </SecureRoute>
                <Route exact path={window.configData.oktaLoginCallback}>
                    <LoggedOut />
                </Route>
        </Switch>
</Security>

The gist of the problem seems to be:

To resolve this issue, your back-end must be configured to redirect requests coming on /implicit/callback endpoint to index.html.

This is where I get stuck because I don’t know how to do this. I’ve looked at a bunch of other posts here with very similar requests but they didn't provide the answer I need.

In the Docker logs, I see this:

2025-01-14 14:50:41 2025/01/14 19:50:41 [error] 35#35: *7 open() "/usr/share/nginx/html/login/callback" failed (2: No such file or directory), client: 172.17.0.1, server: localhost, request: "GET /login/callback?code=hbFq3ojKQ74ReTI-25AlH5TP3hYRP155acDvj5Pfimg&state=n0hj6vHi3Jjt1tvJVhNEulySJEE4IXAIeVFbzRBe1Kbyr2YdgQJTM9qSnKHgXifn HTTP/1.1", host: "localhost:3000"
2025-01-14 14:50:41 172.17.0.1 - - [14/Jan/2025:19:50:41 +0000] "GET /login/callback?code=hbFq3ojKQ74ReTI-25AlH5TP3hYRP155acDvj5Pfimg&state=n0hj6vHi3Jjt1tvJVhNEulySJEE4IXAIeVFbzRBe1Kbyr2YdgQJTM9qSnKHgXifn HTTP/1.1" 404 555 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36" "-"

This is what's in the Dockerfile for the build:

...
# Run the build command to generate production-ready artifacts
RUN npm run build

FROM nginxinc/nginx-unprivileged:1.24-alpine-slim as app

# Copy the built React app to Nginx's web server directory
COPY --from=build /app/dist /usr/share/nginx/html

EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]

Update from January 21:

I was able to get this working, but with a kluge and I'm looking for a proper fix. This is the part of the Dockerfile I updated:

# Run the build command to generate production-ready artifacts
RUN npm run build

FROM nginxinc/nginx-unprivileged:1.24-alpine-slim as app

# Copy the built React app to Nginx's web server directory
COPY --from=build /app/dist /usr/share/nginx/html
COPY <<-'EOF' /etc/nginx/conf.d/default.conf
server {
    listen       8080;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html;
        try_files $uri /index.html$is_args$args;
    }

    error_page 404 /index.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}
EOF

CMD ["nginx", "-g", "daemon off;"]

Basically, I am redirecting the 404 error to go to index.html, which is obviously not the correct way to do this. But without that line, the page gets stuck on the 404. How do I fix this code to be proper?