My React Vite app is authenticating fine locally 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

Questions
,
1

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 seemed to be closed before the answer was provided.

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;"]

All help will be greatly appreciated!

2

Hi there @sabrams61 ,

Welcome to the community!

SPAs require routing rules when hosting prod builds on a web server. You’ll see the same 404 error on any deep routes, not just in the authentication callback. Dev servers normally handle the routing rules for us so it’s not something we see during local development.

You’ll need to configure the web server you’re using in the Docker environment to handle SPA routes.

Happy coding!

1 Like
3

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