Angular Cookies Library Kuketo 🍪

This is an angular library which provides complete access to cookies in angular universal apps. Kuketo is esperanto for cookies.

Getting started

Installation

npm install @kuketo/core @kuketo/browser [@kuketo/express] --save
# or
yarn add @kuketo/core @kuketo/browser [@kuketo/express]

Usage

BrowserModule

The KuketoBrowserModule should be imported in your bootstrapped module (i.e. AppModule) like this:

import { NgModule } from "@anular/core";
import { BrowserModule } from "@angular/platform-browser";
import { KuketoBrowserModule } from "@kuketo/browser";

import { AppComponent } from "./app.component";

@NgModule({
  imports: [BrowserModule, KuketoBrowserModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

It is possible to configure some defaults for writing cookies like this:

import { NgModule } from '@anular/core';
import { BrowserModule } from '@angular/platform-browser';
import { KuketoBrowserModule } from '@kuketo/browser';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    KuketoBrowserModule.withConfig({
      domain: '.example.com',
      path: '/'
      sameSite: 'strict',
      secure: true,
      maxAge: 10,
      expires: new Date(),
      skipUriEncoding: true,
    }),
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ],
})
export class AppModule {}

ServerModule

To use this library in angular universal you need to add the KuketoExpressModule to your module definition for the server (i.e. app.server.module.ts) like this:

import { NgModule } from "@angular/core";
import { ServerModule } from "@angular/platform-server";
import { KuketoExpressModule } from "@kuketo/express";

import { AppModule } from "./app.module";
import { AppComponent } from "./app.component";

@NgModule({
  imports: [AppModule, ServerModule, KuketoExpressModule],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

and you must make sure both req and res are passed to .render() in your server (i.e. server.ts) method like this:

server.get("*", (req, res) => {
  res.render(indexHtml, {
    req,
    res, // <-- this is missing in autogenerated server.ts
    providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }],
  });
});

CookiesService

To access cookies you can Inject the CookiesService into your Component, Directive, Service, etc like this

import { Injectable } from "@angular/core";

import { CookiesService } from "@kuketo/core";

@Injectable()
export class SomeService {
  constructor(private cookies: CookiesService) {}

  readUserCookie(): string {
    return this.cookies.get("user");
  }
}

Testing

The @kuketo/core package contains a testing module which enables tests to be run in browser (i.e. karma) and node (i.e. jest) just the same.

describe("SomeService", () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        KuketoTestingModule.withConfig({
          maxCookieCount: 50,
          maxCookieSizeSum: 4093,
        }),
      ],
      providers: [{ provide: Location, useClass: SpyLocation }],
    });
    cookieStore = TestBed.inject(CookieStoreService);
  });

  it("can clear cookies", () => {
    expect(() => cookieStore.clear()).not.toThrow();
  });
});

Comparison

| feature\package | ngx-cookie | ngx-cookie-service | @ngx-utils/cookies | kuketo | | ------------------- | ------------ | -------------------- | -------------------- | ------ | | universal (express) | ✅ | 🚫 | ✅ | ✅ | | testing support | 🚫 | 🚫 | 🚫 | ✅ | | schematic support | 🚫 | 🚫 | 🚫 | WIP |