Lately, I’ve been in the process of migrating frontend code, which is built with ReactJS and TypeScript, to a VPS server. However, I encountered an issue during OAuth2.0 login where it got stuck at https://cowpte.com/authorized?code, displaying a 404 Not Found error.

Upon investigation and discussions with @soofstad and @sebastianvitterso, we identified that the frontend utilizes BrowserRouter for routing, which is client-side routing. This approach doesn’t support direct URL access and page refreshing. Consequently, when attempting to access https://cowpte.com/authorized?code, the server doesn’t have a route mapped for it.

For more details, refer to the GitHub thread: https://github.com/soofstad/react-oauth2-pkce/discussions/163#discussioncomment-9589636

To address this issue, we need to create a Node.js server to handle URL mapping, known as Isomorphic React or Server-Side Rendering (SSR), ensuring that all routes are processed by the server.

I conducted experiments with both SSR JavaScript and TypeScript versions. Relevant documentations and GitHub links can be found here.

https://www.jobyme88.com/?st_ai=server-side-rendering-1

https://www.jobyme88.com/?st_ai=server-side-rendering-2

https://github.com/tutehub/sample-reactjs

The next step involves integrating the successful TypeScript code samples into the COW PTE project.