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.