Cookies not sent with request when using iframe for login in Angular

I have two applications:

Auth: Handles authentication (Sign-in/Sign-up, etc.)

Main: The main application

Both applications are served under the same domain:

Main: example.com

Auth: example.com/auth

In the main app, if the user is not logged in, they can click a login button. This opens a login screen in a popup using an iframe, which loads the login page from the Auth project.

When the login page is created, I send a request to the backend to check if there's a valid token in the cookies. I rely on the browser to automatically include the token in the cookies, and on the backend, I validate it.

The issue is:

Inside the iframe, I can see the token in the cookies when I check with cookieService.get("token"). But the token is not sent with the request to the backend. For example:

const token = cookieService.get("token"); // token is there
const { isValid } = await lastValueFrom(auth.validateJwtToken()); // token is NOT sent
// with the request


However, if I navigate to the login page directly using the URL (example.com/auth/login), the token is sent correctly with the request.

Why I'm Doing This:

I need to perform token validation on the Auth project because:

When a user opens two tabs and logs in from one tab, the other tab doesn't update automatically. The other tab still shows the login button, and the user can click it to log in again, which I want to prevent.

What could be causing the cookies to not be sent with requests from the iframe? How can I ensure the cookies are sent properly so that the backend can validate them, even inside an iframe?

Continue reading...