shared cookie between domain and its subdomain is not available

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

[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

[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.