ngx-cookie-service

Install the core library using npm or yarn to use the CookieService in your Angular application.

npm i ngx-cookie-service

# or

yarn add ngx-cookie-service

To support SSR, you must use the dedicated ngx-cookie-service-ssr library instead of the standard ngx-cookie-service package. This allows the service to access cookies via the REQUEST object since the document object is unavailable on the server.

1. Install the SSR library:

npm install ngx-cookie-service-ssr --save
# or
yarn add ngx-cookie-service-ssr

2. Update your server.ts to provide the REQUEST and RESPONSE objects to the Angular application:

server.get('*', (req, res) => {
  res.render(indexHtml, {
    req,
    providers: [
      { provide: APP_BASE_HREF, useValue: req.baseUrl },
      { provide: 'REQUEST', useValue: req },
      { provide: 'RESPONSE', useValue: res },
    ],
  });
});

You can use CookieService in Angular components by providing it in the providers array and injecting it via the constructor or the inject() function (available in Angular v14+).

import { CookieService } from 'ngx-cookie-service';
import { Component, inject } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `<h1>Hello World</h1>`,
  providers: [CookieService],
})
export class HelloComponent {
  // Using inject() method (v14+)
  cookieService = inject(CookieService);

  constructor() {
    this.cookieService.set('token', 'Hello World');
    console.log(this.cookieService.get('token'));
  }
}

The SsrCookieService is designed to provide a unified cookie API that works in both browser and server environments (Angular SSR).

• In the Browser: It interacts directly with document.cookie.
• On the Server: It reads cookies from the incoming REQUEST and writes cookies by appending Set-Cookie headers to the RESPONSE_INIT object.

It automatically handles the abstraction between the standard Web API Request/Response objects (used in newer Angular versions) and Express-style request objects.

If you encounter 'token missing' or 'no provider' errors, it is often due to package manager issues. Try performing a clean installation of your node modules:

rm -rf node_modules
npm install
# or
yarn

rm -rf node_modules
yarn # or `npm install`

When calling set(), you can provide a CookieOptions object to control the cookie's behavior.

Available options:

• expires: A number representing days until expiration, or a Date object.
• path: The cookie's path (e.g., '/').
• domain: The cookie's domain.
• secure: A boolean flag. If sameSite is set to 'None', this is automatically forced to true with a warning.
• sameSite: An OWASP same site token: 'Lax', 'None', or 'Strict'. Defaults to 'Lax'.
• partitioned: A boolean flag for partitioned cookies.

import { CookieOptions } from 'ngx-cookie-service';

const options: CookieOptions = {
  expires: 7, // 7 days
  path: '/',
  domain: 'example.com',
  secure: true,
  sameSite: 'Strict',
  partitioned: true
};

this.cookieService.set('session_id', 'abc-123', options);

You can remove cookies using the following methods:

• delete(name: string, path?: string, domain?: string, secure?: boolean, sameSite?: SameSite): Deletes a specific cookie. If path is not provided, it defaults to '/'.
• deleteAll(path?: string, domain?: string, secure?: boolean, sameSite?: SameSite): Iterates through all accessible cookies and deletes them. If path is not provided, it defaults to '/'.

// Delete a specific cookie
this.cookieService.delete('session_id');

// Delete a cookie with specific constraints
this.cookieService.delete('session_id', '/auth', 'example.com', true, 'Strict');

// Clear all cookies
this.cookieService.deleteAll();

The CookieService provides several ways to read cookie data:

• check(name: string): boolean: Returns true if the cookie exists.
• get(name: string): string: Returns the decoded value of the cookie. Returns an empty string if the cookie does not exist.
• getAll(): Record<string, string>: Returns an object containing all accessible cookies as key-value pairs.

// Check existence
if (this.cookieService.check('user_token')) {
  const token = this.cookieService.get('user_token');
}

// Get all cookies as a JSON object
const allCookies = this.cookieService.getAll();
// Example output: { 'theme': 'dark', 'lang': 'en' }