@descope/angular-sdk 0.0.0-next-a6b67f6a-20231228 → 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>

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 }]
+		};
+	}
+}

package/projects/angular-sdk/src/lib/services/descope-auth.guard.spec.ts

@@ -0,0 +1,76 @@
+import { delay, Observable } from 'rxjs';
+import { ActivatedRoute, Router } from '@angular/router';
+import { descopeAuthGuard } from './descope-auth.guard';
+import { fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { DescopeAuthService } from './descope-auth.service';
+
+describe('descopeAuthGuard', () => {
+	const authServiceMock = {
+		isAuthenticated: jest.fn()
+	};
+
+	const routerMock = {
+		navigate: jest.fn()
+	};
+
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports: [RouterTestingModule],
+			providers: [
+				{
+					provide: Router,
+					useValue: routerMock
+				},
+				{
+					provide: DescopeAuthService,
+					useValue: authServiceMock
+				},
+				{
+					provide: ActivatedRoute,
+					useValue: {
+						snapshot: {
+							data: {
+								descopeFallbackUrl: '/fallback'
+							}
+						}
+					}
+				}
+			]
+		});
+	});
+
+	it('return true if authenticated', fakeAsync(() => {
+		const activatedRoute = TestBed.inject(ActivatedRoute);
+		authServiceMock.isAuthenticated.mockReturnValue(true);
+		const guardResponse = TestBed.runInInjectionContext(() => {
+			return descopeAuthGuard(activatedRoute.snapshot) as Observable<boolean>;
+		});
+
+		let guardOutput = null;
+		guardResponse
+			.pipe(delay(100))
+			.subscribe((response) => (guardOutput = response));
+		tick(100);
+
+		expect(guardOutput).toBeTruthy();
+	}));
+
+	it('navigate to fallbackUrl when not auth', fakeAsync(() => {
+		const activatedRoute = TestBed.inject(ActivatedRoute);
+		authServiceMock.isAuthenticated.mockReturnValue(false);
+		routerMock.navigate.mockReturnValue([]);
+		const guardResponse = TestBed.runInInjectionContext(() => {
+			return descopeAuthGuard(activatedRoute.snapshot) as Observable<boolean>;
+		});
+
+		let guardOutput = null;
+		guardResponse
+			.pipe(delay(100))
+			.subscribe((response) => (guardOutput = response));
+		tick(100);
+
+		expect(guardOutput).toBeFalsy();
+		expect(routerMock.navigate).toHaveBeenCalledWith(['/fallback']);
+	}));
+});

package/projects/angular-sdk/src/lib/services/descope-auth.guard.ts

@@ -0,0 +1,16 @@
+import { inject } from '@angular/core';
+
+import { DescopeAuthService } from './descope-auth.service';
+import { ActivatedRouteSnapshot, Router } from '@angular/router';
+import { from, of } from 'rxjs';
+
+export const descopeAuthGuard = (route: ActivatedRouteSnapshot) => {
+	const authService = inject(DescopeAuthService);
+	const router = inject(Router);
+	const fallbackUrl = route.data['descopeFallbackUrl'];
+	const isAuthenticated = authService.isAuthenticated();
+	if (!isAuthenticated && !!fallbackUrl) {
+		return from(router.navigate([fallbackUrl]));
+	}
+	return of(isAuthenticated);
+};