@descope/angular-sdk 0.0.0-next-e6e5cd95-20231226

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,25 @@
+# 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.
+
+## Publishing
+
+After building your library with `ng build angular-sdk`, go to the dist folder `cd dist/angular-sdk` and run `npm publish`.
+
+## 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/angular-sdk",
+	"lib": {
+		"entryFile": "src/public-api.ts"
+	},
+	"allowedNonPeerDependencies": ["@descope/web-component"]
+}

package/projects/angular-sdk/package.json

@@ -0,0 +1,20 @@
+{
+	"name": "angular-sdk",
+	"version": "0.0.1",
+	"engines": {
+		"node": "^16.14.0 || ^18.10.0",
+		"npm": ">= 8.1.0"
+	},
+	"peerDependencies": {
+		"@angular/common": ">=16.0.0",
+		"@angular/core": ">=16.0.0"
+	},
+	"dependencies": {
+		"tslib": "^2.3.0",
+		"@descope/web-component": "3.0.0"
+	},
+	"optionalDependencies": {
+		"@descope/web-js-sdk": ">=1"
+	},
+	"sideEffects": false
+}

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

@@ -0,0 +1,3 @@
+export const environment = {
+	buildVersion: '0.0.0' // Placeholder, replaced by pre-build script (setversion.js)
+};

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>

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

@@ -0,0 +1,53 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SignUpOrInFlowComponent } from './sign-up-or-in-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('SignUpOrInFlowComponent', () => {
+	let component: SignUpOrInFlowComponent;
+	let fixture: ComponentFixture<SignUpOrInFlowComponent>;
+	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(SignUpOrInFlowComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create and be correctly configured', () => {
+		expect(component).toBeTruthy();
+		const mockComponent = ngMocks.find<DescopeComponent>(
+			'[flowId=sign-up-or-in]'
+		).componentInstance;
+		expect(mockComponent.flowId).toStrictEqual('sign-up-or-in');
+	});
+});

package/projects/angular-sdk/src/lib/components/sign-up-or-in-flow/sign-up-or-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-up-or-in-flow',
+	standalone: true,
+	imports: [DescopeComponent],
+	templateUrl: './sign-up-or-in-flow.component.html'
+})
+export class SignUpOrInFlowComponent {
+	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/descope-auth.module.ts

@@ -0,0 +1,46 @@
+import {
+	CUSTOM_ELEMENTS_SCHEMA,
+	ModuleWithProviders,
+	NgModule,
+	Optional,
+	SkipSelf
+} from '@angular/core';
+import { DescopeComponent } from './components/descope/descope.component';
+import { SignInFlowComponent } from './components/sign-in-flow/sign-in-flow.component';
+import { SignUpFlowComponent } from './components/sign-up-flow/sign-up-flow.component';
+import { SignUpOrInFlowComponent } from './components/sign-up-or-in-flow/sign-up-or-in-flow.component';
+import { DescopeAuthConfig } from './types/types';
+
+@NgModule({
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	imports: [
+		DescopeComponent,
+		SignInFlowComponent,
+		SignUpFlowComponent,
+		SignUpOrInFlowComponent
+	],
+	exports: [
+		DescopeComponent,
+		SignInFlowComponent,
+		SignUpFlowComponent,
+		SignUpOrInFlowComponent
+	]
+})
+export class DescopeAuthModule {
+	constructor(@Optional() @SkipSelf() parentModule?: DescopeAuthModule) {
+		if (parentModule) {
+			throw new Error(
+				'DescopeAuthModule is already loaded. Import it only once'
+			);
+		}
+	}
+
+	static forRoot(
+		config?: DescopeAuthConfig
+	): ModuleWithProviders<DescopeAuthModule> {
+		return {
+			ngModule: DescopeAuthModule,
+			providers: [{ provide: DescopeAuthConfig, useValue: config }]
+		};
+	}
+}