@kuketo/oidc-client-storage
Version:
This is an angular library which provides complete access to cookies in angular universal apps. Kuketo is esperanto for cookies.
157 lines (122 loc) • 4.15 kB
Markdown
# 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
```sh
npm install /core /browser [/express] --save
# or
yarn add /core /browser [/express]
```
### Usage
#### BrowserModule
The `KuketoBrowserModule` should be imported in your bootstrapped module (i.e.
`AppModule`) like this:
```ts
import { NgModule } from "@anular/core";
import { BrowserModule } from "@angular/platform-browser";
import { KuketoBrowserModule } from "@kuketo/browser";
import { AppComponent } from "./app.component";
export class AppModule {}
```
It is possible to configure some defaults for writing cookies like this:
```ts
import { NgModule } from '@anular/core';
import { BrowserModule } from '@angular/platform-browser';
import { KuketoBrowserModule } from '@kuketo/browser';
import { AppComponent } from './app.component';
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:
```ts
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";
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:
```ts
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
```ts
import { Injectable } from "@angular/core";
import { CookiesService } from "@kuketo/core";
export class SomeService {
constructor(private cookies: CookiesService) {}
readUserCookie(): string {
return this.cookies.get("user");
}
}
```
### Testing
The `/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.
```ts
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] | [-utils/cookies] | kuketo |
| ------------------- | ------------ | -------------------- | -------------------- | ------ |
| universal (express) | ✅ | 🚫 | ✅ | ✅ |
| testing support | 🚫 | 🚫 | 🚫 | ✅ |
| schematic support | 🚫 | 🚫 | 🚫 | WIP |
[ngx-cookie]: https://www.npmjs.com/package/ngx-cookie-service
[-utils/cookies]: https://www.npmjs.com/package/@ngx-utils/cookies
[ngx-cookie-service]: https://www.npmjs.com/package/ngx-cookie-service