@descope/angular-sdk 0.0.0-next-32627c0f-20231228 → 0.0.0-next-cc7eda17-20231228

package/package.json

@@ -1,42 +1,78 @@
 {
-  "name": "@descope/angular-sdk",
-  "version": "0.0.0-next-32627c0f-20231228",
-  "peerDependencies": {
-    "@angular/common": ">=16.0.0",
-    "@angular/core": ">=16.0.0"
-  },
-  "files": [
-    "dist"
-  ],
-  "license": "MIT",
-  "engines": {
-    "node": "^16.14.0 || >=18.10.0",
-    "npm": ">= 8.1.0"
-  },
-  "lint-staged": {
-    "+(src|test|examples)/**/*.{js,ts,html}": [
-      "npm run lint"
-    ]
-  },
-  "dependencies": {
-    "@descope/web-component": "3.0.0",
-    "tslib": "^2.3.0"
-  },
-  "optionalDependencies": {
-    "@descope/web-js-sdk": ">=1"
-  },
-  "module": "fesm2022/descope-angular-sdk.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/descope-angular-sdk.mjs",
-      "esm": "./esm2022/descope-angular-sdk.mjs",
-      "default": "./fesm2022/descope-angular-sdk.mjs"
-    }
-  },
-  "sideEffects": false
-}
+	"name": "@descope/angular-sdk",
+	"version": "0.0.0-next-cc7eda17-20231228",
+	"peerDependencies": {
+		"@angular/common": ">=16.0.0",
+		"@angular/core": ">=16.0.0"
+	},
+	"license": "MIT",
+	"engines": {
+		"node": "^16.14.0 || >=18.10.0",
+		"npm": ">= 8.1.0"
+	},
+	"scripts": {
+		"ng": "ng",
+		"start": "ng serve",
+		"prepare": "husky install",
+		"format-lint": "pretty-quick --staged --ignore-path .gitignore && lint-staged",
+		"prebuild:ci": "node scripts/setversion/setversion.js",
+		"build:ci": "npm run build:lib",
+		"build:lib": "cp package.json ./projects/angular-sdk && ng build angular-sdk",
+		"build:app": "ng build demo-app",
+		"watch": "ng build --watch --configuration development",
+		"test": "jest --config jest.config.js",
+		"lint": "ng lint",
+		"format": "prettier . -w --ignore-path .gitignore",
+		"format-check": "prettier . --check --ignore-path .gitignore",
+		"prepublishOnly": "npm run build:ci",
+		"leaks": "bash ./scripts/gitleaks/gitleaks.sh"
+	},
+	"lint-staged": {
+		"+(src|test|examples)/**/*.{js,ts,html}": [
+			"npm run lint"
+		]
+	},
+	"dependencies": {
+		"@descope/web-component": "3.0.0",
+		"tslib": "^2.3.0"
+	},
+	"optionalDependencies": {
+		"@descope/web-js-sdk": ">=1"
+	},
+	"devDependencies": {
+		"@angular-devkit/build-angular": "^16.2.6",
+		"@angular-eslint/builder": "16.3.1",
+		"@angular-eslint/eslint-plugin": "16.3.1",
+		"@angular-eslint/eslint-plugin-template": "16.3.1",
+		"@angular-eslint/schematics": "16.3.1",
+		"@angular-eslint/template-parser": "16.3.1",
+		"@angular/animations": "^16.2.9",
+		"@angular/cli": "^16.2.6",
+		"@angular/common": "^16.2.9",
+		"@angular/compiler": "^16.2.9",
+		"@angular/compiler-cli": "^16.2.9",
+		"@angular/core": "^16.2.9",
+		"@angular/forms": "^16.2.9",
+		"@angular/platform-browser": "^16.2.9",
+		"@angular/platform-browser-dynamic": "^16.2.9",
+		"@angular/router": "^16.2.9",
+		"@descope/web-component": "3.0.0",
+		"@types/jest": "^29.5.5",
+		"@typescript-eslint/eslint-plugin": "6.11.0",
+		"@typescript-eslint/parser": "6.11.0",
+		"eslint": "^8.51.0",
+		"eslint-plugin-prettier": "^4.2.1",
+		"husky": "^8.0.3",
+		"jest": "^29.7.0",
+		"jest-preset-angular": "^13.1.2",
+		"lint-staged": "^15.2.0",
+		"ng-mocks": "^14.11.0",
+		"ng-packagr": "^16.2.3",
+		"prettier": "2.8.8",
+		"pretty-quick": "^3.1.3",
+		"rxjs": "~7.8.1",
+		"tslib": "^2.6.2",
+		"typescript": "~5.1.6",
+		"zone.js": "~0.13.0"
+	}
+}

package/projects/angular-sdk/.eslintrc.json

@@ -0,0 +1,32 @@
+{
+	"extends": "../../.eslintrc.json",
+	"ignorePatterns": ["!**/*"],
+	"overrides": [
+		{
+			"files": ["*.ts"],
+			"rules": {
+				"@angular-eslint/directive-selector": [
+					"error",
+					{
+						"type": "attribute",
+						"prefix": "lib",
+						"style": "camelCase"
+					}
+				],
+				"@angular-eslint/component-selector": [
+					"error",
+					{
+						"type": "element",
+						"prefix": "",
+						"style": "kebab-case"
+					}
+				],
+				"@angular-eslint/no-output-native": "off"
+			}
+		},
+		{
+			"files": ["*.html"],
+			"rules": {}
+		}
+	]
+}

package/projects/angular-sdk/README.md

@@ -0,0 +1,21 @@
+# AngularSdk
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.2.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project angular-sdk` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project angular-sdk`.
+
+> Note: Don't forget to add `--project angular-sdk` or else it will be added to the default project in your `angular.json` file.
+
+## Build
+
+Run `ng build angular-sdk` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test angular-sdk` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/projects/angular-sdk/ng-package.json

@@ -0,0 +1,8 @@
+{
+	"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+	"dest": "../../dist",
+	"lib": {
+		"entryFile": "src/public-api.ts"
+	},
+	"allowedNonPeerDependencies": ["@descope/web-component"]
+}

package/projects/angular-sdk/src/environment.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  buildVersion: '0.0.0-next-cc7eda17-20231228'
+};

package/projects/angular-sdk/src/lib/components/descope/descope.component.spec.ts

@@ -0,0 +1,104 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DescopeComponent } from './descope.component';
+import createSdk from '@descope/web-js-sdk';
+import { DescopeAuthConfig } from '../../types/types';
+import { CUSTOM_ELEMENTS_SCHEMA, EventEmitter } from '@angular/core';
+import mocked = jest.mocked;
+
+jest.mock('@descope/web-js-sdk');
+//Mock DescopeWebComponent
+jest.mock('@descope/web-component', () => {
+	return jest.fn(() => {
+		// Create a mock DOM element
+		return document.createElement('descope-wc');
+	});
+});
+
+describe('DescopeComponent', () => {
+	let component: DescopeComponent;
+	let fixture: ComponentFixture<DescopeComponent>;
+	let mockedCreateSdk: jest.Mock;
+	const onSessionTokenChangeSpy = jest.fn();
+	const onUserChangeSpy = jest.fn();
+	const afterRequestHooksSpy = jest.fn();
+	const mockConfig: DescopeAuthConfig = {
+		projectId: 'someProject'
+	};
+
+	beforeEach(() => {
+		mockedCreateSdk = mocked(createSdk);
+
+		mockedCreateSdk.mockReturnValue({
+			onSessionTokenChange: onSessionTokenChangeSpy,
+			onUserChange: onUserChangeSpy,
+			httpClient: {
+				hooks: {
+					afterRequest: afterRequestHooksSpy
+				}
+			}
+		});
+
+		TestBed.configureTestingModule({
+			schemas: [CUSTOM_ELEMENTS_SCHEMA],
+			providers: [
+				DescopeAuthConfig,
+				{ provide: DescopeAuthConfig, useValue: mockConfig }
+			]
+		});
+
+		fixture = TestBed.createComponent(DescopeComponent);
+		component = fixture.componentInstance;
+		component.projectId = '123';
+		component.flowId = 'sign-in';
+		component.locale = 'en-US';
+		component.success = new EventEmitter<void>();
+		component.error = new EventEmitter<void>();
+		component.logger = { info: jest.fn(), error: jest.fn(), warn: jest.fn() };
+		component.errorTransformer = jest.fn();
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+		const html: HTMLElement = fixture.nativeElement;
+		const webComponentHtml = html.querySelector('descope-wc');
+		expect(webComponentHtml).toBeDefined();
+	});
+
+	it('should correctly setup attributes based on inputs', () => {
+		const html: HTMLElement = fixture.nativeElement;
+		const webComponentHtml = html.querySelector('descope-wc')!;
+		expect(webComponentHtml.getAttribute('project-id')).toStrictEqual('123');
+		expect(webComponentHtml.getAttribute('flow-id')).toStrictEqual('sign-in');
+		expect(webComponentHtml.getAttribute('locale')).toStrictEqual('en-US');
+		expect(webComponentHtml.getAttribute('logger')).toBeDefined();
+		expect(webComponentHtml.getAttribute('error-transformer')).toBeDefined();
+		expect(webComponentHtml.getAttribute('redirect-url')).toBeNull();
+	});
+
+	it('should emit success when web component emits success', () => {
+		const html: HTMLElement = fixture.nativeElement;
+		const webComponentHtml = html.querySelector('descope-wc')!;
+
+		component.success.subscribe(() => {
+			expect(true).toBeTruthy();
+			expect(afterRequestHooksSpy).toHaveBeenCalled();
+		});
+		webComponentHtml.dispatchEvent(
+			new CustomEvent('success', {
+				detail: { user: { name: 'user1' }, sessionJwt: 'session1' }
+			})
+		);
+	});
+
+	it('should emit error when web component emits error', () => {
+		const html: HTMLElement = fixture.nativeElement;
+		const webComponentHtml = html.querySelector('descope-wc')!;
+
+		component.error.subscribe(() => {
+			expect(true).toBeTruthy();
+		});
+		webComponentHtml.dispatchEvent(new CustomEvent('error'));
+	});
+});

package/projects/angular-sdk/src/lib/components/descope/descope.component.ts

@@ -0,0 +1,114 @@
+import {
+	Component,
+	ElementRef,
+	EventEmitter,
+	Input,
+	OnChanges,
+	OnInit,
+	Output
+} from '@angular/core';
+import DescopeWebComponent from '@descope/web-component';
+import DescopeWc, { ILogger } from '@descope/web-component';
+import { DescopeAuthService } from '../../services/descope-auth.service';
+import { from } from 'rxjs';
+import { baseHeaders } from '../../utils/constants';
+import { DescopeAuthConfig } from '../../types/types';
+
+@Component({
+	selector: 'descope[flowId]',
+	standalone: true,
+	template: ''
+})
+export class DescopeComponent implements OnInit, OnChanges {
+	projectId: string;
+	@Input() flowId: string;
+
+	@Input() locale: string;
+	@Input() theme: 'light' | 'dark' | 'os';
+	@Input() tenant: string;
+	@Input() telemetryKey: string;
+	@Input() redirectUrl: string;
+	@Input() autoFocus: true | false | 'skipFirstScreen';
+
+	@Input() debug: boolean;
+	@Input() errorTransformer: (error: { text: string; type: string }) => string;
+	@Input() logger: ILogger;
+
+	@Output() success: EventEmitter<void> = new EventEmitter<void>();
+	@Output() error: EventEmitter<void> = new EventEmitter<void>();
+
+	private readonly webComponent: DescopeWebComponent =
+		new DescopeWebComponent();
+
+	constructor(
+		private elementRef: ElementRef,
+		private authService: DescopeAuthService,
+		descopeConfig: DescopeAuthConfig
+	) {
+		this.projectId = descopeConfig.projectId;
+	}
+
+	ngOnInit() {
+		DescopeWc.sdkConfigOverrides = { baseHeaders };
+		this.setupWebComponent();
+		this.elementRef.nativeElement.appendChild(this.webComponent);
+	}
+
+	ngOnChanges(): void {
+		this.setupWebComponent();
+	}
+
+	private setupWebComponent() {
+		this.webComponent.setAttribute('project-id', this.projectId);
+		this.webComponent.setAttribute('flow-id', this.flowId);
+		if (this.locale) {
+			this.webComponent.setAttribute('locale', this.locale);
+		}
+		if (this.theme) {
+			this.webComponent.setAttribute('theme', this.theme);
+		}
+		if (this.tenant) {
+			this.webComponent.setAttribute('tenant', this.tenant);
+		}
+		if (this.telemetryKey) {
+			this.webComponent.setAttribute('telemetryKey', this.telemetryKey);
+		}
+		if (this.redirectUrl) {
+			this.webComponent.setAttribute('redirect-url', this.redirectUrl);
+		}
+		if (this.autoFocus) {
+			this.webComponent.setAttribute('auto-focus', this.autoFocus.toString());
+		}
+		if (this.debug) {
+			this.webComponent.setAttribute('debug', this.debug.toString());
+		}
+
+		if (this.errorTransformer) {
+			this.webComponent.errorTransformer = this.errorTransformer;
+		}
+
+		if (this.logger) {
+			this.webComponent.logger = this.logger;
+		}
+
+		if (this.success) {
+			this.webComponent.addEventListener('success', (e: Event) => {
+				from(
+					this.authService.descopeSdk.httpClient.hooks?.afterRequest!(
+						// eslint-disable-next-line @typescript-eslint/no-explicit-any
+						{} as any,
+						new Response(JSON.stringify((e as CustomEvent).detail))
+					) as Promise<unknown>
+				).subscribe(() => {
+					this.success?.emit();
+				});
+			});
+		}
+
+		if (this.error) {
+			this.webComponent.addEventListener('error', () => {
+				this.error?.emit();
+			});
+		}
+	}
+}

package/projects/angular-sdk/src/lib/components/sign-in-flow/sign-in-flow.component.html

@@ -0,0 +1,15 @@
+<descope
+	(success)="success.emit()"
+	(error)="error.emit()"
+	flowId="sign-in"
+	[locale]="locale"
+	[theme]="theme"
+	[tenant]="tenant"
+	[telemetryKey]="telemetryKey"
+	[redirectUrl]="redirectUrl"
+	[autoFocus]="autoFocus"
+	[debug]="debug"
+	[errorTransformer]="errorTransformer"
+	[logger]="logger"
+>
+</descope>

package/projects/angular-sdk/src/lib/components/sign-in-flow/sign-in-flow.component.spec.ts

@@ -0,0 +1,53 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SignInFlowComponent } from './sign-in-flow.component';
+import { ngMocks } from 'ng-mocks';
+import { DescopeComponent } from '../descope/descope.component';
+import { DescopeAuthConfig } from '../../types/types';
+import createSdk from '@descope/web-js-sdk';
+import mocked = jest.mocked;
+
+jest.mock('@descope/web-js-sdk');
+jest.mock('@descope/web-component', () => {
+	return jest.fn(() => {
+		// Create a mock DOM element
+		return document.createElement('descope-wc');
+	});
+});
+
+describe('SignInFlowComponent', () => {
+	let component: SignInFlowComponent;
+	let fixture: ComponentFixture<SignInFlowComponent>;
+	let mockedCreateSdk: jest.Mock;
+
+	beforeEach(() => {
+		mockedCreateSdk = mocked(createSdk);
+
+		mockedCreateSdk.mockReturnValue({
+			onSessionTokenChange: jest.fn(),
+			onUserChange: jest.fn()
+		});
+
+		TestBed.configureTestingModule({
+			providers: [
+				DescopeAuthConfig,
+				{
+					provide: DescopeAuthConfig,
+					useValue: {
+						projectId: 'someProject'
+					}
+				}
+			]
+		});
+
+		fixture = TestBed.createComponent(SignInFlowComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create and be correctly configured', () => {
+		expect(component).toBeTruthy();
+		const mockComponent =
+			ngMocks.find<DescopeComponent>('[flowId=sign-in]').componentInstance;
+		expect(mockComponent.flowId).toStrictEqual('sign-in');
+	});
+});

package/projects/angular-sdk/src/lib/components/sign-in-flow/sign-in-flow.component.ts

@@ -0,0 +1,32 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ILogger } from '@descope/web-component';
+import { DescopeComponent } from '../descope/descope.component';
+import { DescopeAuthConfig } from '../../types/types';
+
+@Component({
+	selector: 'descope-sign-in-flow',
+	standalone: true,
+	imports: [DescopeComponent],
+	templateUrl: './sign-in-flow.component.html'
+})
+export class SignInFlowComponent {
+	projectId: string;
+
+	@Input() locale: string;
+	@Input() theme: 'light' | 'dark' | 'os';
+	@Input() tenant: string;
+	@Input() telemetryKey: string;
+	@Input() redirectUrl: string;
+	@Input() autoFocus: true | false | 'skipFirstScreen';
+
+	@Input() debug: boolean;
+	@Input() errorTransformer: (error: { text: string; type: string }) => string;
+	@Input() logger: ILogger;
+
+	@Output() success: EventEmitter<void> = new EventEmitter<void>();
+	@Output() error: EventEmitter<void> = new EventEmitter<void>();
+
+	constructor(descopeConfig: DescopeAuthConfig) {
+		this.projectId = descopeConfig.projectId;
+	}
+}

package/projects/angular-sdk/src/lib/components/sign-up-flow/sign-up-flow.component.html

@@ -0,0 +1,15 @@
+<descope
+	(success)="success.emit()"
+	(error)="error.emit()"
+	flowId="sign-up"
+	[locale]="locale"
+	[theme]="theme"
+	[tenant]="tenant"
+	[telemetryKey]="telemetryKey"
+	[redirectUrl]="redirectUrl"
+	[autoFocus]="autoFocus"
+	[debug]="debug"
+	[errorTransformer]="errorTransformer"
+	[logger]="logger"
+>
+</descope>

package/projects/angular-sdk/src/lib/components/sign-up-flow/sign-up-flow.component.spec.ts

@@ -0,0 +1,51 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SignUpFlowComponent } from './sign-up-flow.component';
+import { DescopeComponent } from '../descope/descope.component';
+import { ngMocks } from 'ng-mocks';
+import createSdk from '@descope/web-js-sdk';
+import { DescopeAuthConfig } from '../../types/types';
+import mocked = jest.mocked;
+
+jest.mock('@descope/web-js-sdk');
+jest.mock('@descope/web-component', () => {
+	return jest.fn(() => {
+		// Create a mock DOM element
+		return document.createElement('descope-wc');
+	});
+});
+describe('SignUpFlowComponent', () => {
+	let component: SignUpFlowComponent;
+	let fixture: ComponentFixture<SignUpFlowComponent>;
+	let mockedCreateSdk: jest.Mock;
+
+	beforeEach(() => {
+		mockedCreateSdk = mocked(createSdk);
+
+		mockedCreateSdk.mockReturnValue({
+			onSessionTokenChange: jest.fn(),
+			onUserChange: jest.fn()
+		});
+
+		TestBed.configureTestingModule({
+			providers: [
+				DescopeAuthConfig,
+				{
+					provide: DescopeAuthConfig,
+					useValue: {
+						projectId: 'someProject'
+					}
+				}
+			]
+		});
+		fixture = TestBed.createComponent(SignUpFlowComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create and be correctly configured', () => {
+		expect(component).toBeTruthy();
+		const mockComponent =
+			ngMocks.find<DescopeComponent>('[flowId=sign-up]').componentInstance;
+		expect(mockComponent.flowId).toStrictEqual('sign-up');
+	});
+});

package/projects/angular-sdk/src/lib/components/sign-up-flow/sign-up-flow.component.ts

@@ -0,0 +1,32 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ILogger } from '@descope/web-component';
+import { DescopeComponent } from '../descope/descope.component';
+import { DescopeAuthConfig } from '../../types/types';
+
+@Component({
+	selector: 'descope-sign-up-flow',
+	standalone: true,
+	imports: [DescopeComponent],
+	templateUrl: './sign-up-flow.component.html'
+})
+export class SignUpFlowComponent {
+	projectId: string;
+
+	@Input() locale: string;
+	@Input() theme: 'light' | 'dark' | 'os';
+	@Input() tenant: string;
+	@Input() telemetryKey: string;
+	@Input() redirectUrl: string;
+	@Input() autoFocus: true | false | 'skipFirstScreen';
+
+	@Input() debug: boolean;
+	@Input() errorTransformer: (error: { text: string; type: string }) => string;
+	@Input() logger: ILogger;
+
+	@Output() success: EventEmitter<void> = new EventEmitter<void>();
+	@Output() error: EventEmitter<void> = new EventEmitter<void>();
+
+	constructor(descopeConfig: DescopeAuthConfig) {
+		this.projectId = descopeConfig.projectId;
+	}
+}

package/projects/angular-sdk/src/lib/components/sign-up-or-in-flow/sign-up-or-in-flow.component.html

@@ -0,0 +1,15 @@
+<descope
+	(success)="success.emit()"
+	(error)="error.emit()"
+	flowId="sign-up-or-in"
+	[locale]="locale"
+	[theme]="theme"
+	[tenant]="tenant"
+	[telemetryKey]="telemetryKey"
+	[redirectUrl]="redirectUrl"
+	[autoFocus]="autoFocus"
+	[debug]="debug"
+	[errorTransformer]="errorTransformer"
+	[logger]="logger"
+>
+</descope>