How to send cookies from server to client during SSR (Angular 20)

I am using HttpOnly Cookies for JWT authentication in my Angular v20 app. I have SSR enabled.

During Login, the cookies are sent to the client. I have an HttpInterceptor that seems to work to forward these cookies for requests made from the server. I'm not sure why this works (as they are HttpOnly) so I could be mistaken. I am logging based on isPlatformBrowser in the interceptor to tell my where the request was sent from.

cookie.interceptor.ts

export const cookieInterceptor: HttpInterceptorFn = (req, next) => {
const ssrRequest: Request | null = inject(REQUEST);
const shouldForwardCookies: boolean = true; // in case I have external calls later
const platformId = inject(PLATFORM_ID);
const isServer = isPlatformServer(platformId);
const platform = isServer ? 'Server' : 'Client';
console.log(`[${platform}] HTTP Request: ${req.method} ${req.urlWithParams}`);

if (shouldForwardCookies) {
const clonedRequest = req.clone({
withCredentials: true,
...(ssrRequest
? {
headers: req.headers.append(
'Cookie',
ssrRequest.headers.get('cookie') ?? ''
)
}
: {})
});
return next(clonedRequest);
}
return next(req);
};


When the server calls the refresh API, the API responds with the new tokens as expected. During the refresh, a new accessToken is created as well as a new refreshToken but this never gets set on the client. So when subsequent request are made they are all unauthorized.

I thought what I wanted would not be possible at all. But since I can seemingly send the cookies from the client to the server, my hope is rekindled.

Continue reading...