How to solve React Vite 404 Error on Vercel

Question

I'm new to Stack Overflow and currently building an application using React Vite. I'm integrating the Spotify API into my application and implementing the Authorization feature using the Authorization Code with PKCE Flow guide provided by Spotify here.

The application works perfectly fine on my local machine. Now, I'm trying to deploy the app on Vercel. I have set up my environment variables in the Vercel project settings. As per the Spotify documentation, I need to specify the redirect_uri to which the OAuth service will redirect the user. I have set the redirect_uri value as http://localhost:5173/callback in my .env file locally. In the Vercel environment variables, I have set the redirect_uri value as https://project.vercel.app/callback.

However, when I run the application on Vercel, the flow works fine until I click the "Agree" button on the Spotify service. It then redirects to https://project.vercel.app/callback?code=...&state=..., but Vercel gives a 404 Not Found error.

I don't know if the react router is the problem or no, but here's my react router looks like

const routes = [
   {
      path: "/callback",
      Component: AuthCallback,
   }
]

export const router = createBrowserRouter([...routes]);

I've tried double check if there's any typo when I specified the redirect_uri on my local machine, Vercel environment variable, and Spotify developer dashboard. And I'm sure this is not a typo problem, and I don't really know what causing this issue.

I would greatly appreciate any thoughts or solutions you might have to solve this issue. Thank's.

Answer 1

I've found the solution for this issue, you just need to add a file called vercel.json in the root of the folder and paste this code.

{
    "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}

This configuration will prevent your web application to have a 404 error when you refresh the page or when you open other routes.