shared cookie between domain and its subdomain is not available

[ad-el]

Describe the bug

I use Angular 12 library and "ngx-cookie-service": "13.1.2". I tried to add a cookie (contains user data) for a domain (localhost) and its subdomains (sub1.localhost, sub2.localhost).

Angular app uses AuthService and runs on localhost. It sets a cookie:
setUserData(userData: string) { this.cookieService.set(this.COOKIE_NAME, JSON.stringify(userData) , 36000000, '/', this.DOMAIN ); }

but the app running on sub1.localhost is not able to retrieve the cookie data (which were set for localhost):
getUserData(): string { let userData = this.cookieService.get(this.COOKIE_NAME); return userData; }

import { Injectable } from '@angular/core';
import { CookieService } from 'ngx-cookie-service';

@Injectable({ providedIn: 'root' })
export class AuthService {

  private DOMAIN: string = 'localhost';
  private COOKIE_NAME: string = 'NGX-COOKIE-NAME';

  constructor(private cookieService: CookieService) { }

  getUserData(): string {
    let userData = this.cookieService.get(this.COOKIE_NAME);
    return userData;
  }

  setUserData(userData: string) {
    this.cookieService.set(this.COOKIE_NAME, JSON.stringify(userData)
      , 36000000, '/', this.DOMAIN
    );

  }

  clearUserData() {
    let c = this.cookieService.get(this.COOKIE_NAME);
    if (c != null)
        this.cookieService.delete(this.COOKIE_NAME
            , '/', this.DOMAIN
        );
  }

}

I run the app using a command (it is added to package.json scripts as "s" - you can run it by "npm run s"):
"ng serve --host localhost --disable-host-check --port 4200 --open"

Also, is it possible to set a cookie from sub1.localhost on localhost domain?

Steps to Reproduce

1. Download the code from Stackblitz: https://stackblitz.com/edit/angular-viq7wd?file=src%2Fapp%2Fauth.service.ts
2. Run the code using "npm run s" command (the command is added to package.json file). After that the app should be running on localhost:4200.
3. Provide any value using input element labeled by "cookie value" and press "Save cookie button". After that a new cookie should be set for localhost domain.
4. In address bar change url from 'localhost:4200' to 'sub1.localhost:4200. After that the app should restart.
5. Click "Read cookie" button to retrieve cookie data set in step 3. Issue: the cookie data are not able to retrieve; localhost domain cookie is not visible for sub1.localhost domain.

Please provide a link to a minimal reproduction of the bug. StackBlitz, CodePen or CodeSanBox

https://stackblitz.com/edit/angular-viq7wd?file=src%2Fapp%2Fauth.service.ts

Expected behaviour

I'd like to be able to manage one shared cookie between domian and its subdomains.

What version of the library you see this issue?

13.1.12

What version of Angular are you using?

Angular 12

Screenshots

No response

Desktop? Please complete the following information

Windows 10,
Google Chrome 96.0.4664.45, 64-bit

Mobile? Please complete the following information

No response

Anything else?

No response

[ad-el]

26 days without reply ..

[pavankjadda]

@ad-el you should be able to do it. Would you mind creating and sharing sample repository for this?

[ad-el]

@pavankjadda I edited issue description, I belive it contains more details now.
Also I created minimal code repo on StackBlitz.

AuthService DOMAIN is set to 'localhost', but you can try to manipulate DOMAIN value.
So please try to run code from StackBlitz on your localhost using "npm run s" command, then set a cookie (you can provide cookie value using input element) using 'Save cookie' button.
After that you should be able to see a new cookie 'NGX-COOKIE-NAME' for a domain 'localhost'.
Then please change url (web browser address bar) from 'localhost:4200' to 'sub1.localhost:4200' and try to read previously set cookie data using a button 'Read cookie'.

Issue: cookie data are not able to be read.

[pavankjadda]

@ad-el If you explicitly pass the domain name then the cookie is restricted to that domain, in your case parent domain. So If you want sub domain to access parent domain cookies, do not specify the domain. See below
this.cookieService.set(this.COOKIE_NAME, JSON.stringify(userData), 36000000, '/');

[ad-el]

@pavankjadda I did what you wrote. I removed this.DOMAIN from AuthService. But it did not solve this bug.
Do you have modified-working example i.e. which may be based on my provided stackbliz example?

[pavankjadda]

@pavankjadda I did what you wrote. I removed this.DOMAIN from AuthService. But it did not solve this bug.

Do you have modified-working example i.e. which may be based on my provided stackbliz example?

I might be. I uploaded to GitHub.

[pavankjadda]

@pavankjadda I did what you wrote. I removed this.DOMAIN from AuthService. But it did not solve this bug. Do you have modified-working example i.e. which may be based on my provided stackbliz example?

Code uploaded here. Follow instructions from README.md

[Bazhan4ik]

The links are not accessible, where can I see the instructions?
@pavankjadda