Authentication Fails Between Vercel Frontend and Render Backend: Tokens Not Transmitted

Frontend
1

I’m struggling with a deployment issue for my web app. The frontend is on Vercel and the backend on Render’s free tier. I’m using Node.js, Express, MongoDB, and Passport.js for Google OAuth.

Here’s the problem:

  • Everything works fine locally
  • Google login works when deployed
  • But protected routes fail with 401 Unauthorized errors

I’ve set up CORS and Axios like this:

// Backend CORS setup
app.use(cors({
  origin: 'https://my-app.vercel.app',
  credentials: true,
  // other options...
}));

// Frontend Axios config
const api = axios.create({
  baseURL: 'https://my-backend.onrender.com',
  withCredentials: true,
});

Cookies show up in DevTools after login, but aren’t sent with API requests. Postman works fine with the backend.

Why aren’t the auth tokens reaching my backend from Vercel? Could it be a Render free tier issue? Or a Vercel problem? Any ideas on how to fix this?

2

have u considered using a proxy server? it could help bridge the gap between vercel and render. also, double-check ur cookie settings - maybe theyre not configured for cross-domain use? what about trying a different authentication method, like JWT? curious to hear if youve explored these options!

3

I’ve encountered similar issues when deploying applications with separate frontend and backend hosts. In your case, the problem likely stems from cookie handling across different domains. Even with CORS configured correctly, browsers can be strict about sending cookies in cross-origin requests.

To resolve this, consider implementing a custom authentication solution using JSON Web Tokens (JWTs) instead of relying solely on cookies. Store the JWT in local storage on the frontend and send it as an Authorization header with each API request.

Another approach is to use a reverse proxy on Vercel to route API requests, which can help bypass cross-origin restrictions. This method allows you to keep your existing cookie-based auth while ensuring seamless communication between your frontend and backend.

Lastly, double-check your Render and Vercel configurations. Ensure that all necessary environment variables are set correctly and that your backend URL is properly referenced in your frontend code.

4

hey maya, sounds like a tricky situation! have u tried using httpOnly cookies? they might help with the cross-domain issues. also, check if render’s free tier has any limitations on cookie handling. u could try upgrading to a paid plan temporarily to see if that fixes it. good luck!