I'm using Angular 18 and Azure Functions 4 isolated with .NET 8. I added two entries to my hosts file: 127.0.0.1 apis.mytestapp.local 127.0.0.1 mytestapp.local My Azure functions app is being assigned the port 7132 locally. In my angular.json file I have my development serve configuration setup to use the host mytestapp.local listening on port 80. When I start both my functions app and my angular app, I'm able to browse to the application on mytestapp.local. The application makes calls to the api calling the apis.mytestapp.local:7132/api routes. I have a function call that is supposed to set a cookie for auth and it is being done as follows: var c = new HttpCookie("MY_Auth", tokenString) { //CookieOptions option = new CookieOptions(); Expires = DateTimeOffset.Now.AddYears(1), Domain = ".mytestapp.local", //// Make the cookie available for the browser HttpOnly = true, SameSite = SameSite.Strict, Secure = false, Path = "/", }; response.Cookies.Append(c); await response.WriteStringAsync(proofKeyCodeExchangeResponse.RedirectUri).ConfigureAwait(false); The response shown in the browser has the Set-Cookie header as I would expect, but in the Application tab of the dev tools, there are no cookies there. I've tried a bunch of different approaches. I tried a .dev domain, as well as tweaking a bunch of the Cookie settings. I tried to put both the Azure functions app and the angular app on the same port. No matter what I try though, I'm unable to get this working locally. I would really like to have local and a deployed environment work as similarly as possible to ensure I'm testing with the auth pieces in place. How can I get an angular application with an azure function api backend running locally with an auth cookie being set and passed for all of the api calls? Continue reading...
