From Chaos to Deployment: Fixing Cross-Origin Auth in React + Spring Boot (My 3-Day 401 Debug Story)

I recently finished building a full-stack Library Management System, with:

• 🖥️ Frontend in React, deployed on Vercel
• 🔧 Backend in Spring Boot, deployed on Railway

At the start, I was excited. But then... deployment hit me like a wall.

---

🧩 The Struggles

I didn't know:

• How to deploy the backend and frontend separately
• How to set up CORS and cookies properly
• Why my app worked in Firefox, but failed with 401 errors in Chrome

I tried debugging:

• Spring Security
• Session management
• Axios headers and cookies

I even rewrote parts of my code, thinking the problem was in my auth flow…

Turns out, Chrome had third-party cookies disabled. 😤

Three. Days. Gone.

---

🔐 What I Learned

1. Spring Security from Scratch
   
   I learned how to create a SecurityFilterChain and handle login with session-based auth using a custom success handler.

2. Backend over LocalStorage
   
   Initially, I was storing the user in localStorage and using it for validation.
   
   I later replaced this with a backend call to /check-auth, making it more secure and reliable.

3. CORS + Cookie Configuration
   

   .allowedOrigins("https://my-frontend.vercel.app")
   .allowCredentials(true)

Axios:

withCredentials: true

1. Cookie Headers

• SameSite=None
• Secure
• HttpOnly

All crucial for cross-origin session persistence.

---

✅ Final Setup

• 🌐 Frontend: React + Vercel
• 🔧 Backend: Spring Boot + Railway
• 🔐 Auth: Session-based, cookie-secured
• 🧠 Learned: Spring Security, Session Auth, CORS, Deployment practices

---

🎯 Next Goal

Now that it’s stable, I’m planning to migrate the backend to AWS EC2 for a more production-like deployment.

Wish me luck 🤞

---

If you’ve ever been stuck debugging for days over something silly — you’re not alone. Keep going. It clicks eventually ✨

#SpringBoot #ReactJS #WebDev #FullStack #SpringSecurity #Debugging #AWS #DevJourney