🍪 Cookie Auth Isn't One Problem. It's Three.

When cookie-based auth “just stops working,” the culprit often isn’t code—it’s configuration. And more often than not, it’s because developers treat CORS, SameSite, and Cookie Domain as separate issues. But these layers interact, and misunderstandings can break your login flow across environments.

Let’s break it down:

1. 🧭 CORS (Cross-Origin Resource Sharing)

What it controls:
Where a request is allowed to come from.

Key detail:
The browser blocks cross-origin requests unless the server opts in by setting proper CORS headers.

Failure mode:
Your frontend gets 403 or CORS errors when calling your backend—even though everything “looks right” in the network tab.

2. 🛡️ SameSite

What it controls:
Whether cookies are sent in cross-site requests.

Modes:

• Strict: Only send cookies on same-origin requests.
• Lax: Send cookies on top-level navigations (GET requests only).
• None: Allow cookies in all contexts—but must set Secure.

Failure mode:
Logins that work locally but fail silently in production OAuth flows or on redirect.

3. 🏷️ Cookie Domain

What it controls:
Which subdomains can access a cookie.

Use case:
You want to share cookies between api.example.com and app.example.com.

Gotcha:
You need to explicitly set the cookie domain to .example.com—but now any subdomain can read it.

🧠 Takeaway: Think in Layers

These aren’t separate concerns—they form a security and context stack:

Understanding how they overlap is the key to avoiding subtle bugs.

Follow me @kheang for practical, real-world frontend engineering tips.