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

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

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

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

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

@@ -0,0 +1,40 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { environment } from '../../environments/environment';
+
+@Component({
+	selector: 'app-protected',
+	templateUrl: './protected.component.html',
+	styleUrls: ['./protected.component.scss']
+})
+export class ProtectedComponent {
+	flowId = environment.descopeStepUpFlowId ?? '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 ?? '';
+
+	stepUpSuccess = false;
+	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() {
+		this.stepUpSuccess = true;
+	}
+
+	onError() {
+		console.log('ERROR FROM LOG IN FLOW FROM WEB COMPONENT');
+	}
+
+	goBack() {
+		this.router.navigate(['/']).catch((err) => console.error(err));
+	}
+}

package/projects/demo-app/src/environments/conifg.ts

@@ -0,0 +1,13 @@
+export interface Env {
+	descopeProjectId: string;
+	descopeBaseUrl?: string;
+	descopeFlowId?: string;
+	descopeDebugMode?: false;
+	descopeTheme?: string;
+	descopeLocale?: string;
+	descopeRedirectUrl?: string;
+	descopeTenantId?: string;
+	descopeTelemetryKey?: string;
+	descopeStepUpFlowId?: string;
+	backendUrl?: string;
+}

package/projects/demo-app/src/environments/environment.ts

@@ -0,0 +1,19 @@
+import { Env } from './conifg';
+
+/**
+ * Create environment.development.ts file and copy content of this file to it.
+ * Fill the env vars according to your needs
+ */
+export const environment: Env = {
+	descopeProjectId: '',
+	descopeBaseUrl: '',
+	descopeFlowId: '',
+	descopeDebugMode: false,
+	descopeTheme: '',
+	descopeLocale: '',
+	descopeRedirectUrl: '',
+	descopeTenantId: '',
+	descopeTelemetryKey: '',
+	descopeStepUpFlowId: '',
+	backendUrl: ''
+};

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

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>DemoApp</title>
+		<base href="/" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="icon" type="image/x-icon" href="favicon.ico" />
+		<link
+			href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+			rel="stylesheet"
+		/>
+	</head>
+	<body>
+		<app-root></app-root>
+	</body>
+</html>

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

@@ -0,0 +1,7 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic()
+	.bootstrapModule(AppModule)
+	.catch((err) => console.error(err));

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

@@ -0,0 +1,21 @@
+/* You can add global styles to this file, and also import other style files */
+
+body {
+	height: 100vh;
+	width: 100vw;
+	margin: 0;
+	font-family: 'Roboto', sans-serif;
+}
+
+button {
+	width: 200px;
+	height: 40px;
+	border: none;
+	background-color: #00ace1;
+	color: white;
+	cursor: pointer;
+
+	&:hover {
+		background-color: #047293;
+	}
+}

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

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+	"extends": "../../tsconfig.json",
+	"compilerOptions": {
+		"outDir": "../../out-tsc/app",
+		"types": []
+	},
+	"files": ["src/main.ts"],
+	"include": ["src/**/*.d.ts"]
+}

package/projects/demo-app/tsconfig.spec.json

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

package/renovate.json

@@ -0,0 +1,4 @@
+{
+	"$schema": "https://docs.renovatebot.com/renovate-schema.json",
+	"extends": ["config:base"]
+}