Handling email verification with a React app using production build

1
votes

We have a single page application (created using create-react-app) that uses React in the browser and a nodejs/express server on the backend. The application allows users to register, login, and perform various functions. After a user registers with an email address, the React app (via our backend server) sends an email to the user with an email verification link. The user clicks on the link (e.g. example.com/accountVerification/:id) which is opened in the browser. Once opened the React app then verifies the email address with the backend server and the user is now allowed to login.

This all works fine without issues when running the React app using the development build, i.e. using 'npm start'.

However, in production, we deploy a production build generated using 'npm run build'. We serve the app using nginx. In this environment nginx has been configured to serve the index.html file that was generated in the build process. Again, things work fine, except when using the email verification link which gives a 404. It seems that any trailing page after the '/' in the url fails and results in a 404.

So the question is, how are email verification links supposed to work when using a production build of a React app? Or more generally, why does a browser refresh fail (404) when running a production build of a React app?

1
reactjsemail-verification
Does this answer your question? React-router and nginx – Pedro Rio
@pedro-rio, that partially answers my question. However, I'm still trying to figure out how to support the email verification link. – Matt Wenger
Sorry for the delay in responding! I did resolve my issue. It was because the email verification link had the wrong port. Hence it was failing. – Matt Wenger

1 Answers

0
votes

You have to configure nginx to serve the index.html for all routes, so add:

location / { try_files $uri /index.html; }

to your nginx config.