@descope/angular-sdk 0.0.0-next-a6b67f6a-20231228 → 0.0.0-next-cc7eda17-20231228

package/projects/angular-sdk/src/lib/utils/helpers.spec.ts

@@ -0,0 +1,103 @@
+import { observabilify, Observablefied } from './helpers';
+import { lastValueFrom, Observable } from 'rxjs';
+
+describe('Helpers', () => {
+	describe('Observabilify', () => {
+		it('should not affect simple object', () => {
+			//GIVEN
+			const obj = {
+				field1: 'string',
+				field2: 123,
+				nested: {
+					field1: 'string',
+					field2: 123
+				}
+			};
+			type TestType = typeof obj;
+
+			//WHEN
+			const result: Observablefied<TestType> = observabilify<TestType>(obj);
+
+			//THEN
+			expect(result).toStrictEqual(obj);
+		});
+
+		it('should not affect simple object with non async functions', () => {
+			//GIVEN
+			const obj = {
+				field1: 'string',
+				field2: 123,
+				fn: (arg1: string, arg2: number): string => {
+					return arg1 + arg2.toString();
+				},
+				nested: {
+					fn2: (arg: string): string => {
+						return arg;
+					},
+					field1: 'string',
+					field2: 123
+				}
+			};
+			type TestType = typeof obj;
+			const expected1 = obj.fn('Test', 1);
+			const expected2 = obj.nested.fn2('Test');
+
+			//WHEN
+			const transformed: Observablefied<TestType> =
+				observabilify<TestType>(obj);
+			const actual1 = transformed.fn('Test', 1);
+			const actual2 = transformed.nested.fn2('Test');
+
+			//THEN
+			expect(expected1).toStrictEqual(actual1);
+			expect(expected2).toStrictEqual(actual2);
+		});
+
+		it('should transform async functions', async () => {
+			//GIVEN
+			const obj = {
+				field1: 'string',
+				field2: 123,
+				fn: (arg1: string, arg2: number): string => {
+					return arg1 + arg2.toString();
+				},
+				asyncFn: (arg1: string, arg2: number): Promise<string> => {
+					return Promise.resolve(arg1 + arg2.toString());
+				},
+				nested: {
+					fn2: (arg: string) => {
+						return arg;
+					},
+					asyncFn: (arg: string): Promise<string> => {
+						return Promise.resolve(arg);
+					},
+					field1: 'string',
+					field2: 123
+				}
+			};
+			type TestType = typeof obj;
+			const expected1 = obj.fn('Test', 1);
+			const expected2 = obj.nested.fn2('Test');
+			const expected3 = await obj.asyncFn('Test', 1);
+			const expected4 = await obj.nested.asyncFn('Test');
+
+			//WHEN
+			const transformed: Observablefied<TestType> =
+				observabilify<TestType>(obj);
+			const actual1 = transformed.fn('Test', 1);
+			const actual2 = transformed.nested.fn2('Test');
+			const actual3Async = transformed.asyncFn('Test', 1);
+			const actual3 = await lastValueFrom(actual3Async);
+			const actual4Async = transformed.nested.asyncFn('Test');
+			const actual4 = await lastValueFrom(actual4Async);
+
+			//THEN
+			expect(expected1).toStrictEqual(actual1);
+			expect(expected2).toStrictEqual(actual2);
+			expect(actual3Async).toBeInstanceOf(Observable);
+			expect(actual4Async).toBeInstanceOf(Observable);
+			expect(expected3).toStrictEqual(actual3);
+			expect(expected4).toStrictEqual(actual4);
+		});
+	});
+});

package/projects/angular-sdk/src/lib/utils/helpers.ts

@@ -0,0 +1,36 @@
+import { from, Observable } from 'rxjs';
+
+export type Observablefied<T> = {
+	[K in keyof T]: T[K] extends (...args: infer Args) => Promise<infer R>
+		? (...args: Args) => Observable<R>
+		: T[K] extends (...args: infer Args) => infer R
+		? (...args: Args) => R
+		: T[K] extends object
+		? Observablefied<T[K]>
+		: T[K];
+};
+
+export function observabilify<T>(value: T): Observablefied<T> {
+	/* eslint-disable @typescript-eslint/no-explicit-any */
+	const observableValue: any = {};
+
+	for (const key in value) {
+		if (typeof value[key] === 'function') {
+			const fn = value[key] as (...args: unknown[]) => unknown;
+			observableValue[key] = (...args: unknown[]) => {
+				const fnResult = fn(...args);
+				if (fnResult instanceof Promise) {
+					return from(fnResult);
+				} else {
+					return fnResult;
+				}
+			};
+		} else if (typeof value[key] === 'object' && value[key] !== null) {
+			observableValue[key] = observabilify(value[key]);
+		} else {
+			observableValue[key] = value[key];
+		}
+	}
+
+	return observableValue as Observablefied<T>;
+}

package/{dist/public-api.d.ts → projects/angular-sdk/src/public-api.ts}

@@ -1,3 +1,7 @@
+/*
+ * Public API Surface of angular-sdk
+ */
+
 export * from './lib/services/descope-auth.service';
 export * from './lib/services/descope-auth.guard';
 export * from './lib/services/descope.interceptor';

package/projects/angular-sdk/tsconfig.lib.json

@@ -0,0 +1,12 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+	"extends": "../../tsconfig.json",
+	"compilerOptions": {
+		"outDir": "../../out-tsc/lib",
+		"declaration": true,
+		"declarationMap": true,
+		"inlineSources": true,
+		"types": []
+	},
+	"exclude": ["**/*.spec.ts"]
+}

package/projects/angular-sdk/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+	"extends": "./tsconfig.lib.json",
+	"compilerOptions": {
+		"declarationMap": false
+	},
+	"angularCompilerOptions": {
+		"compilationMode": "partial"
+	}
+}

package/projects/angular-sdk/tsconfig.spec.json

@@ -0,0 +1,11 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+	"extends": "../../tsconfig.json",
+	"compilerOptions": {
+		"outDir": "../../out-tsc/spec",
+		"types": ["jest"],
+		"esModuleInterop": true,
+		"emitDecoratorMetadata": true
+	},
+	"include": ["**/*.spec.ts", "**/*.d.ts"]
+}

package/projects/demo-app/.eslintrc.json

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

package/projects/demo-app/src/app/app-routing.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { HomeComponent } from './home/home.component';
+import { ProtectedComponent } from './protected/protected.component';
+import { descopeAuthGuard } from '../../../angular-sdk/src/lib/services/descope-auth.guard';
+import { LoginComponent } from './login/login.component';
+
+const routes: Routes = [
+	{
+		path: 'step-up',
+		component: ProtectedComponent,
+		canActivate: [descopeAuthGuard],
+		data: { descopeFallbackUrl: '/' }
+	},
+	{ path: 'login', component: LoginComponent },
+	{ path: '**', component: HomeComponent }
+];
+
+@NgModule({
+	imports: [RouterModule.forRoot(routes, { enableTracing: false })],
+	exports: [RouterModule]
+})
+export class AppRoutingModule {}

package/projects/demo-app/src/app/app.component.html

@@ -0,0 +1,3 @@
+<main>
+	<router-outlet></router-outlet>
+</main>

package/projects/demo-app/src/app/app.component.scss

@@ -0,0 +1,16 @@
+:host {
+	height: 100vh;
+	position: relative;
+}
+main {
+	border-radius: 10px;
+	margin: auto;
+	border: 1px solid lightgray;
+	padding: 20px;
+	max-width: 400px;
+	box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #fff;
+	background: #ecf0f3;
+	position: relative;
+	top: 50%;
+	transform: translateY(-50%);
+}

package/projects/demo-app/src/app/app.component.spec.ts

@@ -0,0 +1,37 @@
+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+import createSdk from '@descope/web-js-sdk';
+import mocked = jest.mocked;
+import { DescopeAuthConfig } from '../../../angular-sdk/src/lib/types/types';
+
+jest.mock('@descope/web-js-sdk');
+
+describe('AppComponent', () => {
+	let mockedCreateSdk: jest.Mock;
+	const onSessionTokenChangeSpy = jest.fn();
+	const onUserChangeSpy = jest.fn();
+
+	beforeEach(() => {
+		mockedCreateSdk = mocked(createSdk);
+		mockedCreateSdk.mockReturnValue({
+			onSessionTokenChange: onSessionTokenChangeSpy,
+			onUserChange: onUserChangeSpy
+		});
+
+		TestBed.configureTestingModule({
+			imports: [RouterTestingModule],
+			providers: [
+				DescopeAuthConfig,
+				{ provide: DescopeAuthConfig, useValue: { projectId: 'test' } }
+			],
+			declarations: [AppComponent]
+		});
+	});
+
+	it('should create the app', () => {
+		const fixture = TestBed.createComponent(AppComponent);
+		const app = fixture.componentInstance;
+		expect(app).toBeTruthy();
+	});
+});

package/projects/demo-app/src/app/app.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+	selector: 'app-root',
+	templateUrl: './app.component.html',
+	styleUrls: ['./app.component.scss']
+})
+export class AppComponent {}

package/projects/demo-app/src/app/app.module.ts

@@ -0,0 +1,52 @@
+import { APP_INITIALIZER, NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { DescopeAuthModule } from '../../../angular-sdk/src/lib/descope-auth.module';
+import { HomeComponent } from './home/home.component';
+import { ProtectedComponent } from './protected/protected.component';
+import { environment } from '../environments/environment';
+import { DescopeAuthService } from 'projects/angular-sdk/src/public-api';
+import { zip } from 'rxjs';
+import { LoginComponent } from './login/login.component';
+import {
+	HttpClientModule,
+	provideHttpClient,
+	withInterceptors
+} from '@angular/common/http';
+import { descopeInterceptor } from '../../../angular-sdk/src/lib/services/descope.interceptor';
+
+export function initializeApp(authService: DescopeAuthService) {
+	return () => zip([authService.refreshSession(), authService.refreshUser()]);
+}
+
+@NgModule({
+	declarations: [
+		AppComponent,
+		HomeComponent,
+		ProtectedComponent,
+		LoginComponent
+	],
+	imports: [
+		BrowserModule,
+		AppRoutingModule,
+		HttpClientModule,
+		DescopeAuthModule.forRoot({
+			projectId: environment.descopeProjectId,
+			baseUrl: environment.descopeBaseUrl || '',
+			sessionTokenViaCookie: false
+		})
+	],
+	providers: [
+		{
+			provide: APP_INITIALIZER,
+			useFactory: initializeApp,
+			deps: [DescopeAuthService],
+			multi: true
+		},
+		provideHttpClient(withInterceptors([descopeInterceptor]))
+	],
+	bootstrap: [AppComponent]
+})
+export class AppModule {}

package/projects/demo-app/src/app/home/home.component.html

@@ -0,0 +1,23 @@
+<h2>ANGULAR SDK DEMO APP</h2>
+<button *ngIf="!isAuthenticated" (click)="login()">LOGIN</button>
+<ng-container *ngIf="isAuthenticated">
+	<h3>Hello {{ userName }}</h3>
+	<div>
+		Roles:
+		<ng-container *ngIf="roles && roles.length; else noRoles">
+			{{ roles }}
+		</ng-container>
+		<ng-template #noRoles>N/A</ng-template>
+	</div>
+	<button
+		*ngIf="backendUrl.length > 0"
+		class="action-button"
+		(click)="fetchData()"
+	>
+		FETCH DATA
+	</button>
+	<button *ngIf="stepUpConfigured" class="action-button" (click)="stepUp()">
+		STEP UP
+	</button>
+	<button class="logout-button" (click)="logout()">LOGOUT</button>
+</ng-container>

package/projects/demo-app/src/app/home/home.component.scss

@@ -0,0 +1,15 @@
+:host {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+}
+.action-button {
+	border: 1px solid #00ace1;
+	background-color: white;
+	color: #00ace1;
+	margin-bottom: 1rem;
+	&:first-of-type {
+		margin-top: 1rem;
+	}
+}

package/projects/demo-app/src/app/home/home.component.spec.ts

@@ -0,0 +1,44 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+import createSdk from '@descope/web-js-sdk';
+import mocked = jest.mocked;
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { DescopeAuthConfig } from '../../../../angular-sdk/src/lib/types/types';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+
+jest.mock('@descope/web-js-sdk');
+
+describe('HomeComponent', () => {
+	let component: HomeComponent;
+	let fixture: ComponentFixture<HomeComponent>;
+
+	let mockedCreateSdk: jest.Mock;
+	const onSessionTokenChangeSpy = jest.fn();
+	const onUserChangeSpy = jest.fn();
+
+	beforeEach(() => {
+		mockedCreateSdk = mocked(createSdk);
+		mockedCreateSdk.mockReturnValue({
+			onSessionTokenChange: onSessionTokenChangeSpy,
+			onUserChange: onUserChangeSpy
+		});
+
+		TestBed.configureTestingModule({
+			imports: [HttpClientTestingModule],
+			schemas: [NO_ERRORS_SCHEMA],
+			declarations: [HomeComponent],
+			providers: [
+				DescopeAuthConfig,
+				{ provide: DescopeAuthConfig, useValue: { projectId: 'test' } }
+			]
+		});
+		fixture = TestBed.createComponent(HomeComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

package/projects/demo-app/src/app/home/home.component.ts

@@ -0,0 +1,61 @@
+import { Component, OnInit } from '@angular/core';
+import { DescopeAuthService } from '../../../../angular-sdk/src/lib/services/descope-auth.service';
+import { Router } from '@angular/router';
+import { environment } from '../../environments/environment';
+import { HttpClient } from '@angular/common/http';
+
+@Component({
+	selector: 'app-home',
+	templateUrl: './home.component.html',
+	styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+	projectId: string = environment.descopeProjectId;
+	isAuthenticated: boolean = false;
+	roles: string[] = [];
+	userName: string = '';
+	stepUpConfigured = (environment.descopeStepUpFlowId ?? '').length > 0;
+	backendUrl = environment.backendUrl ?? '';
+
+	constructor(
+		private router: Router,
+		private httpClient: HttpClient,
+		private authService: DescopeAuthService
+	) {}
+
+	ngOnInit() {
+		this.authService.session$.subscribe((session) => {
+			this.isAuthenticated = session.isAuthenticated;
+			if (session.sessionToken) {
+				this.roles = this.authService.getJwtRoles(session.sessionToken);
+			}
+		});
+		this.authService.user$.subscribe((descopeUser) => {
+			if (descopeUser.user) {
+				this.userName = descopeUser.user.name ?? '';
+			}
+		});
+	}
+
+	login() {
+		this.router.navigate(['/login']).catch((err) => console.error(err));
+	}
+
+	logout() {
+		this.authService.descopeSdk.logout();
+	}
+
+	fetchData() {
+		if (this.backendUrl) {
+			this.httpClient
+				.get(this.backendUrl, { responseType: 'text' })
+				.subscribe((data) => alert(data));
+		} else {
+			console.warn('Please setup backendUrl in your environment');
+		}
+	}
+
+	stepUp() {
+		this.router.navigate(['/step-up']).catch((err) => console.error(err));
+	}
+}

package/projects/demo-app/src/app/interceptor/auth.interceptor.ts

@@ -0,0 +1,20 @@
+import {
+	HttpHandlerFn,
+	HttpInterceptorFn,
+	HttpRequest
+} from '@angular/common/http';
+import { inject } from '@angular/core';
+import { DescopeAuthService } from '../../../../angular-sdk/src/lib/services/descope-auth.service';
+
+export const authenticationInterceptor: HttpInterceptorFn = (
+	req: HttpRequest<unknown>,
+	next: HttpHandlerFn
+) => {
+	const authService = inject(DescopeAuthService);
+	const sessionToken = authService.getSessionToken();
+	const modifiedReq = req.clone({
+		headers: req.headers.set('Authorization', `Bearer ${sessionToken}`)
+	});
+
+	return next(modifiedReq);
+};

package/projects/demo-app/src/app/login/login.component.html

@@ -0,0 +1,12 @@
+<descope
+	(success)="onSuccess()"
+	(error)="onError()"
+	[theme]="theme"
+	[flowId]="flowId"
+	[locale]="locale"
+	[redirectUrl]="redirectUrl"
+	[telemetryKey]="telemetryKey"
+	[tenant]="tenantId"
+	[debug]="debugMode"
+	[errorTransformer]="errorTransformer"
+></descope>

package/projects/demo-app/src/app/login/login.component.spec.ts

@@ -0,0 +1,42 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+import createSdk from '@descope/web-js-sdk';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { DescopeAuthConfig } from '../../../../angular-sdk/src/lib/types/types';
+import mocked = jest.mocked;
+
+jest.mock('@descope/web-js-sdk');
+
+describe('LoginComponent', () => {
+	let component: LoginComponent;
+	let fixture: ComponentFixture<LoginComponent>;
+
+	let mockedCreateSdk: jest.Mock;
+	const onSessionTokenChangeSpy = jest.fn();
+	const onUserChangeSpy = jest.fn();
+
+	beforeEach(() => {
+		mockedCreateSdk = mocked(createSdk);
+		mockedCreateSdk.mockReturnValue({
+			onSessionTokenChange: onSessionTokenChangeSpy,
+			onUserChange: onUserChangeSpy
+		});
+
+		TestBed.configureTestingModule({
+			schemas: [NO_ERRORS_SCHEMA],
+			declarations: [LoginComponent],
+			providers: [
+				DescopeAuthConfig,
+				{ provide: DescopeAuthConfig, useValue: { projectId: 'test' } }
+			]
+		});
+		fixture = TestBed.createComponent(LoginComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

package/projects/demo-app/src/app/login/login.component.ts

@@ -0,0 +1,35 @@
+import { Component } from '@angular/core';
+import { environment } from '../../environments/environment';
+import { Router } from '@angular/router';
+
+@Component({
+	selector: 'app-login',
+	templateUrl: './login.component.html'
+})
+export class LoginComponent {
+	flowId = environment.descopeFlowId ?? 'sign-up-or-in';
+	theme = (environment.descopeTheme as 'light' | 'dark' | 'os') ?? 'os';
+	telemetryKey = environment.descopeTelemetryKey ?? '';
+	debugMode = environment.descopeDebugMode ?? false;
+	tenantId = environment.descopeTenantId ?? '';
+	locale = environment.descopeLocale ?? '';
+	redirectUrl = environment.descopeRedirectUrl ?? '';
+
+	constructor(private router: Router) {}
+
+	errorTransformer = (error: { text: string; type: string }): string => {
+		const translationMap: { [key: string]: string } = {
+			SAMLStartFailed: 'Failed to start SAML flow'
+		};
+		return translationMap[error.type] || error.text;
+	};
+
+	onSuccess() {
+		console.log('SUCCESSFULLY LOGGED IN FROM WEB COMPONENT');
+		this.router.navigate(['/']).catch((err) => console.error(err));
+	}
+
+	onError() {
+		console.log('ERROR FROM LOG IN FLOW FROM WEB COMPONENT');
+	}
+}

package/projects/demo-app/src/app/protected/protected.component.html

@@ -0,0 +1,18 @@
+<descope
+	*ngIf="!stepUpSuccess"
+	(success)="onSuccess()"
+	(error)="onError()"
+	[theme]="theme"
+	[flowId]="flowId"
+	[locale]="locale"
+	[redirectUrl]="redirectUrl"
+	[telemetryKey]="telemetryKey"
+	[tenant]="tenantId"
+	[debug]="debugMode"
+	[errorTransformer]="errorTransformer"
+></descope>
+
+<ng-container *ngIf="stepUpSuccess">
+	<h2>STEP UP SUCCESS</h2>
+	<button (click)="goBack()">GO BACK</button>
+</ng-container>

package/projects/demo-app/src/app/protected/protected.component.scss

@@ -0,0 +1,8 @@
+:host {
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+	gap: 20px;
+}