Angular is not saving cookies to the storage | Angular Community | Page 1

wooden tree Oct 4, 2023, 5:24 AM

#

Hello! The backend servers sets 2 cookies, which are received in the response. The only problem is that they are not saved in the Cookie storage.
What's the magic to make them persist?

#

The post method looks like this: ```ts
@Injectable({ providedIn: 'root' })
export class ApiService {
constructor(
private http: HttpClient,
@Inject(API_URL) private api_url: string
) {}

post<T, D>(url: string, data?: D): Observable<T> {
return this.http.post<T>(${this.api_url}${url}, JSON.stringify(data), { headers: this.headers });
}

get headers(): HttpHeaders {
const headersConfig = {
'Content-Type': 'application/json',
Accept: 'application/json',
};

return new HttpHeaders(headersConfig);

}
}

autumn coyote Oct 4, 2023, 5:49 AM

#

What's the url for the backend?

#

That looks like the angular url

#

Ah backend is 7175

#

So yeah cookies are set for that tho, not 4200

#

Are the cookies sent across correct? That's all that matters.

#

You probably need withCredentials tho

wooden tree Oct 4, 2023, 5:53 AM

#

withCredentials might be the problem indeed

#

Still not working

#

This is the configuration on the backend

#

Damn, my browser blocks them

wooden tree Oct 4, 2023, 6:21 AM

#

This is the default Chrome settings, this means my auth is useless

#

Third-party cookies get blocked

#

Okay I must switch to Auth0

autumn coyote Oct 4, 2023, 6:40 AM

#

We also use third party cookies

#

And based on what we discussed, the setup would be the same

#

Ensure api and app share the same domain, cookies are no longer third party then

#

That's all why we don't do cookies by default in SPAs

#

Its the best, but not always easy or even possible depending on your setup

wooden tree Oct 4, 2023, 6:48 AM

#

Is it still considered a good practice to enable third party in the browser during development? Outside development, the app and backend would need to be deployed under the same domain

#

I mean, having the same domain should not introduce complications. If it is possible to set up the same domain on 2 different cloud instances (never done that) then I do not see any problem

rapid verge Oct 4, 2023, 6:54 AM

#

There's usually a CDN/gateway in front of them, otherwise you'll end up with different IPs

#

But you could do api.mydomain.com vs mydomain.com

#

(don't remember if it'd be considered third party)

wooden tree Oct 4, 2023, 6:57 AM

#

Then it is a win win

wooden tree Oct 4, 2023, 7:16 AM

#

Would I encounter the same problem if I managed login on the backend with Auth0 instead of the Universal Login?

autumn coyote Oct 4, 2023, 7:16 AM

#

https://giphy.com/gifs/eonline-e-botched-entertainment-YnkV6334ndlQFzBzsY

Giphy

E!

wooden tree Oct 4, 2023, 7:17 AM

#

😂

autumn coyote Oct 4, 2023, 7:17 AM

#

wooden tree Would I encounter the same problem if I managed login on the backend with Auth0 ...

Yeah

#

Your API and FE still need to be on the same domain

#

Every cookie that isnt on the same domain causes the same issue

#

You can avoid it by not using cookies.

#

Which has its own set of consequences.

#

Which, again, is why our SPA SDKs do not use cookies.

#

But still cookies is superior, as long as they are HTTP ONLY

#

I think it can be a challenge tho for local development.

#

(But I assumed you had already figured that out as it sounded like u had the HTTP ONLY cookie setup working with your own implementation)

wooden tree Oct 4, 2023, 7:22 AM

#

For development it works if I allow thrid party cookies, now I receive them

autumn coyote Oct 4, 2023, 7:22 AM

#

Yeah

#

Thats true.

#

But is that a stting u can configure per domain?

#

Or is it for the entire browser ?

#

(I have never looked at the settings 😄 )

rapid verge Oct 4, 2023, 7:23 AM

#

It can be set per domain

autumn coyote Oct 4, 2023, 7:23 AM

#

Great!

wooden tree Oct 4, 2023, 7:23 AM

#

yes, but for now I could not add the localhost:port, did not work

rapid verge Oct 4, 2023, 7:23 AM

#

Looks like api.x.tld and x.tld works though, with cookies

wooden tree Oct 4, 2023, 7:24 AM

#

that is perfect

autumn coyote Oct 4, 2023, 7:24 AM

#

https://giphy.com/gifs/sesame-street-cookies-cookie-monster-HGe4zsOVo7Jvy

Giphy

Sesame Street

rapid verge Oct 4, 2023, 7:24 AM

#

If you use something like cloudfront you can easily do * going to your frontend and /api going to your backend too

#

(cloudfront, nginx, cloudflare, etc)

wooden tree Oct 4, 2023, 7:28 AM

#

for now don't deploy it, but do implementations to be easily configurable. For example, factory methods construct the right instances based on the current environment.

rapid verge Oct 4, 2023, 7:28 AM

#

Hm not sure what you mean, all this is fairly external to the app

#

Or you mean you have a configurable API endpoint base URL?

#

Because that essentially boils down to having a string or Observable<string> (or URL)

#

(please don't use Angular environments 🥲)

wooden tree Oct 4, 2023, 7:30 AM

#

Did I get it right? If they run on the same domain then the sameSite should be strict?

rapid verge Oct 4, 2023, 7:31 AM

#

same-site means the base domain is the same, so www.x.tld to api.x.tld would work too

wooden tree Oct 4, 2023, 7:31 AM

#

perfect

wooden tree Oct 4, 2023, 7:32 AM

#

rapid verge (please don't use Angular environments 🥲)

Isn't it a thing to use environment on the frontend? I don't know, for some configurations?

rapid verge Oct 4, 2023, 7:32 AM

#

(it's a bit more complex than that because there's some kind of list of what counts as a tld and it's not just actual tlds, iirc stuff like github.io counts as a "tld" too but still)

rapid verge Oct 4, 2023, 7:32 AM

#

wooden tree Isn't it a thing to use environment on the frontend? I don't know, for some conf...

Does having to rebuild an app because a URL change sound like a good practice? 😄

#

Environments can have their use but it's more a build configuration than a deployment environment, sadly the naming made it.. drift

autumn coyote Oct 4, 2023, 7:33 AM

#

Luckily for you, Auth and Environments are my two things I hate when people do it wrong, here u go: https://dev.to/thisdotmedia/runtime-environment-configuration-with-angular-4f5j

DEV Community

Runtime environment configuration with Angular

When planning to deploy an Angular application, you might have the need for some configuration that c...

#

I believe u should use runtime configuration and not compile time configuration

autumn coyote Oct 4, 2023, 7:34 AM

#

rapid verge Environments can have their use but it's more a build configuration than a deplo...

Well, at least they didnt support .env files, like we have with react and vue.

#

Which is ... probably worse.

#

(and dont get me wrong, I like react. But the introduction of .ENV files is just confusing for people that arent aware there is no concept of environment variables in the browser)

rapid verge Oct 4, 2023, 7:34 AM

#

It sure is

#

It's also why new devs take the first day trying to get environment variables working 😄

#

(first day for the good ones)

autumn coyote Oct 4, 2023, 7:35 AM

#

😄

autumn coyote Oct 4, 2023, 7:40 AM

#

wooden tree Isn't it a thing to use environment on the frontend? I don't know, for some conf...

Sorry this always opens a pandora's box

#

😄

rapid verge Oct 4, 2023, 7:40 AM

#

The holy conf crusade

autumn coyote Oct 4, 2023, 7:43 AM

#

https://giphy.com/gifs/superstore-nbc-Y1qmQ4Q9hroHaTerAf

Giphy

Superstore

wooden tree Oct 4, 2023, 7:44 AM

#

For now I only have env configuration on the backend which happens on build. Now that the Cookie differs based on the environment I am wondering if I should do it like this:

#

But I think I should not

#

this does not happen on build time, rather when creating new instances

autumn coyote Oct 4, 2023, 7:45 AM

#

wooden tree For now I only have env configuration on the backend which happens on build. Now...

env config doesnt happen on build in the backend tho, if u mean appsettings etc

#

ah

#

thats what you said

#

I should read everything

#

lol

wooden tree Oct 4, 2023, 7:50 AM

#

This is how I did with token settings. In prod the secret would normally be stored securely in a vault and would be accessible upon request. So that would require a different implementation to set the fields

#

Is this good or can be done better?

autumn coyote Oct 4, 2023, 7:50 AM

#

Iirc that can be done better

#

I mean, u can auto-map config sections to classes

#

and no need to manually map them

#

Let me try and find that

wooden tree Oct 4, 2023, 7:52 AM

#

You mean in the Program.cs?

#

I know a one liner option exists there

autumn coyote Oct 4, 2023, 7:53 AM

#

builder.Services.Configure<DevAccessTokenSettings>(
    builder.Configuration.GetSection("JwtSettings"));

#

Next, whenever u need it u can just inject it

private readonly DevAccessTokenSettings _options;

    public SomeClass(IOptions<DevAccessTokenSettings> options)
    {
        _options = options.Value;
    }

wooden tree Oct 4, 2023, 7:54 AM

#

Yes, and what happens when the environment is not development? The values would not come from a file

autumn coyote Oct 4, 2023, 7:54 AM

#

😄

#

You are solving problems that do not exist.

#

https://learn.microsoft.com/en-us/aspnet/core/fundamentals/configuration/?view=aspnetcore-7.0

Configuration in ASP.NET Core

Learn how to use the Configuration API to configure AppSettings in an ASP.NET Core app.

#

If u have a FOO thing in your appsetting

#

AND you define a FOO thing in your environment variable

#

on the server

#

the env variable wins.

#

and the appsetting is ignored.

#

Thats why u use the concept of "Configuration"

#

U dont just read from the appsettings file

#

u read from the .NET configuration system

#

which has different sources it reads from

wooden tree Oct 4, 2023, 7:57 AM

#

What is FOO?

autumn coyote Oct 4, 2023, 7:57 AM

#

See https://learn.microsoft.com/en-us/aspnet/core/fundamentals/configuration/?view=aspnetcore-7.0#naming-of-environment-variables

Configuration in ASP.NET Core

Learn how to use the Configuration API to configure AppSettings in an ASP.NET Core app.

#

FOO is a random string

#

So u have JwtSettings:AccessToken:Issuer, right?

wooden tree Oct 4, 2023, 7:59 AM

#

"AccessToken": {
  "Issuer": "https://localhost:7151",
  "Audience": "https://localhost:7151",
  "SecretKey": "secret",
  "ExpirationInMinutes": 15,
  "ClockSkewInSeconds": 5
},

autumn coyote Oct 4, 2023, 7:59 AM

#

If u read the link I shared, what u want is to define an environment variable on the production server like this: JwtSettings__AccessToken__Issuer and its value will override the one in appsettings.

wooden tree Oct 4, 2023, 7:59 AM

#

I understand, evrything will be loaded from appsettings

autumn coyote Oct 4, 2023, 7:59 AM

#

So development will use the appsettings.

#

but on production it will ignore that.

autumn coyote Oct 4, 2023, 8:00 AM

#

wooden tree I understand, evrything will be loaded from appsettings

Thats not true. Well, it does read from appsettings, but not solely

#

#

Configuration reads from all of that

#

appsettings is just the first layer.

#

If u define ANYTHING with the SAME NAME in any of those other laters, it overrides it.

#

So what u want to do is just use this:

builder.Services.Configure<JwtSettings>(
    builder.Configuration.GetSection("JwtSettings"));

then, by default everything uses appsettings.json. Now lets say you want to use a different Audience on your deployed version, then you just define an environment variable on that server: JwtSettings__AccessToken__Audience and set it to something else.

wooden tree Oct 4, 2023, 8:04 AM

#

Oh so probably there is an option before build to get the Secret key from the Vault that overrides the default one. Or simply inserts if if it was not specified

wooden tree Oct 4, 2023, 8:04 AM

#

autumn coyote So what u want to do is just use this: ``` builder.Services.Configure<JwtSetting...

Will use this, thanks

autumn coyote Oct 4, 2023, 8:04 AM

#

wooden tree Oh so probably there is an option before build to get the Secret key from the Va...

Its explained in the link I shared: https://learn.microsoft.com/en-us/aspnet/core/security/key-vault-configuration?view=aspnetcore-7.0

Azure Key Vault configuration provider in ASP.NET Core

Learn how to use the Azure Key Vault configuration provider to configure an app using name-value pairs loaded at runtime.

#

But the summary is

#

U do this in program.cs

#

builder.Configuration.AddAzureKeyVault(
        new Uri($"https://{builder.Configuration["KeyVaultName"]}.vault.azure.net/"),
        new DefaultAzureCredential());

#

and it auto connets things for u. All u then need to do is ensure things use the correct name.

wooden tree Oct 4, 2023, 8:06 AM

#

Did not check the 2nd link, sorry

autumn coyote Oct 4, 2023, 8:06 AM

#

(I mean, cponnecting AzureKeyVault is a bit more complicated, but in essence that is how u connect it to the Configuration)

#

You should not worry about environents, but just straight up read from the Configuration.

#

I have deployed tons of .NET API's like that to numberous of environents

#

(e.g. I have worked in horror set ups were we had: DEV, TEST, QA, PREPROD, PROD and DEMO environments)

#

And I was able to use different configs for all of those without needed what u tried.

wooden tree Oct 4, 2023, 8:09 AM

#

Impressive, I just went Java style here :c

autumn coyote Oct 4, 2023, 8:11 AM

#

The configuration in aspnetcore is cool

rapid verge Oct 4, 2023, 8:11 AM

#

wooden tree Impressive, I just went Java style here :c

Spring Boot has pretty much the same feature though 😄

wooden tree Oct 4, 2023, 8:14 AM

#

it is my bad anyway

#

newbie problems

autumn coyote Oct 4, 2023, 8:14 AM

#

Doesnt matter

#

All good

#

Just sharing so u know it exists

#

there is too much out there to know it all

wooden tree Oct 4, 2023, 8:28 AM

#

#

I would need the DevAccessTokenSettings in the AddJwtBearer

#

I do not think it is possible to do that

autumn coyote Oct 4, 2023, 9:06 AM

#

I think there are solutions for that

#

but might be a bit awkward yeah

#

But you are reinventing the wheel here

#

https://auth0.com/blog/how-to-validate-jwt-dotnet/

Auth0 - Blog

How to Validate JWTs in .NET

Learn how to validate a JSON Web Token (JWT) in different contexts using C# in .NET.

#

See: Simplified configuration for the JwtBearer middleware

#

with .NET7, JwtBearer can auto-map to appsettings.

#

// appsettings.json

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "Authentication": {
    "Schemes": {
      "Bearer": {
        "Authority": "https://{DOMAIN}",
        "ValidAudiences": [ "{AUDIENCE}" ],
        "ValidIssuer": "{DOMAIN}"
      }
    }
  }
}

#

If u use that structure

#

https://auth0.com/blog/whats-new-in-dotnet-7-for-authentication-and-authorization/#Simplified-Configuration

Auth0 - Blog

What's New in .NET 7 for Authentication and Authorization

Let’s explore the new .NET 7 features for improving and simplifying authentication and authorization support in .NET applications.

#

(its auth0 blog psot but unrelated to auth0 specifically in this case)

wooden tree Oct 4, 2023, 9:18 AM

#

Thank you.

wooden tree Oct 4, 2023, 9:19 AM

#

autumn coyote ``` // appsettings.json { "Logging": { "LogLevel": { "Default": "In...

I am using .NET 7, but since I am using cookies now, there is no Bearer

autumn coyote Oct 4, 2023, 9:19 AM

#

😂 right

autumn coyote Oct 4, 2023, 9:41 AM

#

wooden tree I am using .NET 7, but since I am using cookies now, there is no Bearer

Wait what ?

#

Your own snippet literally says AddJwtBearer

autumn coyote Oct 4, 2023, 9:42 AM

#

wooden tree

here

#

So u can use what I shared if that snippet is what u are using

wooden tree Oct 4, 2023, 9:44 AM

#

Sorry, I am struggling with a configuration. Did not change the JwtBearer yet

#

It has null value

#

Isn't this code snippet correct?

autumn coyote Oct 4, 2023, 9:48 AM

#

Can u shw appsettings

wooden tree Oct 4, 2023, 9:49 AM

#

  "EmailEncryption": {
    "Key": "test_key",
    "InitializationVector": "test_vector"
  },

#

And the class: ```ts
public class DevEmailEncryptionSettings
{
public string EncryptionKey;
public string InitializationVector;
}

#

well I see a problem

autumn coyote Oct 4, 2023, 9:53 AM

#

Also want to get rid of all the Dev prefixes, but thats unrelated

wooden tree Oct 4, 2023, 9:53 AM

#

One variable name is not the same

autumn coyote Oct 4, 2023, 9:53 AM

#

Yeah the name needs to match

wooden tree Oct 4, 2023, 9:53 AM

#

autumn coyote Also want to get rid of all the Dev prefixes, but thats unrelated

yes, once it works

#

😂

autumn coyote Oct 4, 2023, 9:53 AM

#

😄

#

Does it work now ?

wooden tree Oct 4, 2023, 9:56 AM

#

no

autumn coyote Oct 4, 2023, 9:56 AM

#

So whats bnot working? Whatsnull?

wooden tree Oct 4, 2023, 9:57 AM

#

#

    private readonly DevEmailEncryptionSettings _emailEncryptionSettings;

    public EmailEncryptionHelper(IOptions<DevEmailEncryptionSettings> emailEncryptionSettings)
    {
        _emailEncryptionSettings = emailEncryptionSettings.Value;
    }

#

IOption cannot be instantiated, I did not register it with AddSingleton or AddScoped

autumn coyote Oct 4, 2023, 10:03 AM

#

Does it help if u make it a property instead of a field? 🤔

#

#

Yeah you should make it properties.

#

(explained in the link I shared 😛 )

autumn coyote Oct 4, 2023, 10:05 AM

#

wooden tree IOption cannot be instantiated, I did not register it with AddSingleton or AddSc...

That should not be needed.

wooden tree Oct 4, 2023, 10:06 AM

#

autumn coyote

Need to search it up, idk about that concept

autumn coyote Oct 4, 2023, 10:06 AM

#

a field is

#

public String Test

#

a property is

#

public String Test { get; set; }

wooden tree Oct 4, 2023, 10:08 AM

#

👏 works like a charm

#

I think since .NET 7 there is a warning when a string property is not initialized

#

Should any of these suggestion be used to suppress the warnings?

autumn coyote Oct 4, 2023, 10:11 AM

#

public String Test { get; set; } = String.Empty

wooden tree Oct 4, 2023, 10:59 AM

#

Wow, only 3 files remained from 9, clean

rapid verge Oct 4, 2023, 11:00 AM

#

Now just gotta delete the 3 remaining ones 😎

#

(that's how no-code works right?)

wooden tree Oct 4, 2023, 11:03 AM

#

😂

wooden tree Oct 4, 2023, 11:19 AM

#

UX question: Having a confirm password input field limits the chances of a user making a typo in his password. The downside is that he needs to type more. What are your thoughts on this?

autumn coyote Oct 4, 2023, 11:20 AM

#

My opinion?

#

A password should not be something u type.

#

So a confirm field should be useless

#

Sure if u use ILoveBrocolli and u mistype, your problem

#

It should be Ahfi&€++uek__ to begin with

#

(which i do not even want to type twice, why ask me to paste it twice)

wooden tree Oct 4, 2023, 11:22 AM

#

Alright, thanks

#

I will remove it

autumn coyote Oct 4, 2023, 11:22 AM

#

Be sure to add a toggle

#

To show it tho

#

Like a little eye icon

wooden tree Oct 4, 2023, 11:23 AM

#

I have that

autumn coyote Oct 4, 2023, 11:24 AM

#

Sorry

#

Reading and watching isn't my specialty clearly

rapid verge Oct 4, 2023, 11:25 AM

#

The form has better eyes than yours

wooden tree Oct 4, 2023, 11:34 AM

#

How do I know if a service should be registered with AddScoped or AddSingleton? When a service is used in a Controller is it right away AddScoped?

autumn coyote Oct 4, 2023, 11:34 AM

#

wooden tree How do I know if a service should be registered with `AddScoped` or `AddSingleto...

Always AddScoped, unless u know u need singleton

#

Which u generally dont need.

wooden tree Oct 4, 2023, 11:35 AM

#

Understood, thanks

autumn coyote Oct 4, 2023, 11:36 AM

#

Do u know the difference ?

wooden tree Oct 4, 2023, 11:45 AM

#

I know what the singleton pattern is. AddSingleton creates only one instance which will be shared across the app

#

right?

autumn coyote Oct 4, 2023, 12:36 PM

#

wooden tree right?

Right

#

Scoped is the same, but per request

#

so every request a single instance is used

#

but destroyed as the request ends

#

So two simultaneous requests use two seperate instances

#Angular is not saving cookies to the storage