@descope/angular-sdk 0.5.10 → 0.5.11

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

@@ -0,0 +1,171 @@
+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;
+  baseUrl?: string;
+  baseStaticUrl?: string;
+  storeLastAuthenticatedUser?: boolean;
+  @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() client: Record<string, any>;
+  @Input() form: Record<string, any>;
+  @Input() logger: ILogger;
+
+  @Output() success: EventEmitter<CustomEvent> =
+    new EventEmitter<CustomEvent>();
+  @Output() error: EventEmitter<CustomEvent> = new EventEmitter<CustomEvent>();
+  @Output() ready: EventEmitter<void> = new EventEmitter<void>();
+
+  private readonly webComponent: DescopeWebComponent =
+    new DescopeWebComponent();
+
+  constructor(
+    private elementRef: ElementRef,
+    private authService: DescopeAuthService,
+    descopeConfig: DescopeAuthConfig
+  ) {
+    this.projectId = descopeConfig.projectId;
+    this.baseUrl = descopeConfig.baseUrl;
+    this.baseStaticUrl = descopeConfig.baseStaticUrl;
+    this.storeLastAuthenticatedUser = descopeConfig.storeLastAuthenticatedUser;
+  }
+
+  ngOnInit() {
+    const sdk = this.authService.descopeSdk; // Capture the class context in a variable
+    DescopeWc.sdkConfigOverrides = {
+      // Overrides the web-component's base headers to indicate usage via the React SDK
+      baseHeaders,
+      // Disables token persistence within the web-component to delegate token management
+      // to the global SDK hooks. This ensures token handling aligns with the SDK's configuration,
+      // and web-component requests leverage the global SDK's beforeRequest hooks for consistency
+      persistTokens: false,
+      hooks: {
+        get beforeRequest() {
+          // Retrieves the beforeRequest hook from the global SDK, which is initialized
+          // within the AuthProvider using the desired configuration. This approach ensures
+          // the web-component utilizes the same beforeRequest hooks as the global SDK
+          return sdk.httpClient.hooks?.beforeRequest;
+        },
+        set beforeRequest(_) {
+          // The empty setter prevents runtime errors when attempts are made to assign a value to 'beforeRequest'.
+          // JavaScript objects default to having both getters and setters
+        }
+      }
+    };
+    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.baseUrl) {
+      this.webComponent.setAttribute('base-url', this.baseUrl);
+    }
+    if (this.baseStaticUrl) {
+      this.webComponent.setAttribute('base-static-url', this.baseStaticUrl);
+    }
+    if (this.storeLastAuthenticatedUser) {
+      this.webComponent.setAttribute(
+        'store-last-authenticated-user',
+        this.storeLastAuthenticatedUser.toString()
+      );
+    }
+    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.client) {
+      this.webComponent.setAttribute('client', JSON.stringify(this.client));
+    }
+
+    if (this.form) {
+      this.webComponent.setAttribute('form', JSON.stringify(this.form));
+    }
+
+    if (this.logger) {
+      this.webComponent.logger = this.logger;
+    }
+
+    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(() => {
+        if (this.success) {
+          this.success?.emit(e as CustomEvent);
+        }
+      });
+    });
+
+    if (this.error) {
+      this.webComponent.addEventListener('error', (e: Event) => {
+        this.error?.emit(e as CustomEvent);
+      });
+    }
+
+    if (this.ready) {
+      this.webComponent.addEventListener('ready', () => {
+        this.ready?.emit();
+      });
+    }
+  }
+}

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

@@ -0,0 +1,84 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RoleManagementComponent } from './role-management.component';
+import createSdk from '@descope/web-js-sdk';
+import { DescopeAuthConfig } from '../../types/types';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import mocked = jest.mocked;
+
+jest.mock('@descope/web-js-sdk');
+//Mock DescopeRoleManagementWidget
+jest.mock('@descope/role-management-widget', () => {
+  return jest.fn(() => {
+    // Create a mock DOM element
+    return document.createElement('descope-role-management-widget');
+  });
+});
+
+describe('DescopeRoleManagementComponent', () => {
+  let component: RoleManagementComponent;
+  let fixture: ComponentFixture<RoleManagementComponent>;
+  let mockedCreateSdk: jest.Mock;
+  const onSessionTokenChangeSpy = jest.fn();
+  const onRoleChangeSpy = jest.fn();
+  const afterRequestHooksSpy = jest.fn();
+  const mockConfig: DescopeAuthConfig = {
+    projectId: 'someProject'
+  };
+
+  beforeEach(() => {
+    mockedCreateSdk = mocked(createSdk);
+
+    mockedCreateSdk.mockReturnValue({
+      onSessionTokenChange: onSessionTokenChangeSpy,
+      onRoleChange: onRoleChangeSpy,
+      httpClient: {
+        hooks: {
+          afterRequest: afterRequestHooksSpy
+        }
+      }
+    });
+
+    TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      providers: [
+        DescopeAuthConfig,
+        { provide: DescopeAuthConfig, useValue: mockConfig }
+      ]
+    });
+
+    fixture = TestBed.createComponent(RoleManagementComponent);
+    component = fixture.componentInstance;
+    component.projectId = '123';
+    component.tenant = 'tenant-1';
+    component.widgetId = 'widget-1';
+    component.logger = {
+      info: jest.fn(),
+      error: jest.fn(),
+      warn: jest.fn(),
+      debug: jest.fn()
+    };
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+    const html: HTMLElement = fixture.nativeElement;
+    const webComponentHtml = html.querySelector(
+      'descope-role-management-widget'
+    );
+    expect(webComponentHtml).toBeDefined();
+  });
+
+  it('should correctly setup attributes based on inputs', () => {
+    const html: HTMLElement = fixture.nativeElement;
+    const webComponentHtml = html.querySelector(
+      'descope-role-management-widget'
+    )!;
+    expect(webComponentHtml.getAttribute('project-id')).toStrictEqual('123');
+    expect(webComponentHtml.getAttribute('tenant')).toStrictEqual('tenant-1');
+    expect(webComponentHtml.getAttribute('widget-id')).toStrictEqual(
+      'widget-1'
+    );
+    expect(webComponentHtml.getAttribute('logger')).toBeDefined();
+  });
+});

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

@@ -0,0 +1,63 @@
+import { Component, ElementRef, Input, OnChanges, OnInit } from '@angular/core';
+import DescopeRoleManagementWidget from '@descope/role-management-widget';
+import { ILogger } from '@descope/web-component';
+import { DescopeAuthConfig } from '../../types/types';
+
+@Component({
+  selector: 'role-management[tenant]',
+  standalone: true,
+  template: ''
+})
+export class RoleManagementComponent implements OnInit, OnChanges {
+  projectId: string;
+  baseUrl?: string;
+  baseStaticUrl?: string;
+  @Input() tenant: string;
+  @Input() widgetId: string;
+
+  @Input() theme: 'light' | 'dark' | 'os';
+  @Input() debug: boolean;
+  @Input() logger: ILogger;
+
+  private readonly webComponent = new DescopeRoleManagementWidget();
+
+  constructor(
+    private elementRef: ElementRef,
+    descopeConfig: DescopeAuthConfig
+  ) {
+    this.projectId = descopeConfig.projectId;
+    this.baseUrl = descopeConfig.baseUrl;
+    this.baseStaticUrl = descopeConfig.baseStaticUrl;
+  }
+
+  ngOnInit() {
+    this.setupWebComponent();
+    this.elementRef.nativeElement.appendChild(this.webComponent);
+  }
+
+  ngOnChanges(): void {
+    this.setupWebComponent();
+  }
+
+  private setupWebComponent() {
+    this.webComponent.setAttribute('project-id', this.projectId);
+    this.webComponent.setAttribute('tenant', this.tenant);
+    this.webComponent.setAttribute('widget-id', this.widgetId);
+    if (this.baseUrl) {
+      this.webComponent.setAttribute('base-url', this.baseUrl);
+    }
+    if (this.baseStaticUrl) {
+      this.webComponent.setAttribute('base-static-url', this.baseStaticUrl);
+    }
+    if (this.theme) {
+      this.webComponent.setAttribute('theme', this.theme);
+    }
+    if (this.debug) {
+      this.webComponent.setAttribute('debug', this.debug.toString());
+    }
+
+    if (this.logger) {
+      (this.webComponent as any).logger = this.logger;
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+<descope
+  (success)="success.emit($event)"
+  (error)="error.emit($event)"
+  flowId="sign-in"
+  [locale]="locale"
+  [theme]="theme"
+  [tenant]="tenant"
+  [telemetryKey]="telemetryKey"
+  [redirectUrl]="redirectUrl"
+  [autoFocus]="autoFocus"
+  [debug]="debug"
+  [errorTransformer]="errorTransformer"
+  [client]="client"
+  [form]="form"
+  [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,35 @@
+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() client: Record<string, any>;
+  @Input() form: Record<string, any>;
+  @Input() logger: ILogger;
+
+  @Output() success: EventEmitter<CustomEvent> =
+    new EventEmitter<CustomEvent>();
+  @Output() error: EventEmitter<CustomEvent> = new EventEmitter<CustomEvent>();
+
+  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,17 @@
+<descope
+  (success)="success.emit($event)"
+  (error)="error.emit($event)"
+  flowId="sign-up"
+  [locale]="locale"
+  [theme]="theme"
+  [tenant]="tenant"
+  [telemetryKey]="telemetryKey"
+  [redirectUrl]="redirectUrl"
+  [autoFocus]="autoFocus"
+  [debug]="debug"
+  [errorTransformer]="errorTransformer"
+  [client]="client"
+  [form]="form"
+  [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,35 @@
+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() client: Record<string, any>;
+  @Input() form: Record<string, any>;
+  @Input() logger: ILogger;
+
+  @Output() success: EventEmitter<CustomEvent> =
+    new EventEmitter<CustomEvent>();
+  @Output() error: EventEmitter<CustomEvent> = new EventEmitter<CustomEvent>();
+
+  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,17 @@
+<descope
+  (success)="success.emit($event)"
+  (error)="error.emit($event)"
+  flowId="sign-up-or-in"
+  [locale]="locale"
+  [theme]="theme"
+  [tenant]="tenant"
+  [telemetryKey]="telemetryKey"
+  [redirectUrl]="redirectUrl"
+  [autoFocus]="autoFocus"
+  [debug]="debug"
+  [errorTransformer]="errorTransformer"
+  [client]="client"
+  [form]="form"
+  [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,35 @@
+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() client: Record<string, any>;
+  @Input() form: Record<string, any>;
+  @Input() logger: ILogger;
+
+  @Output() success: EventEmitter<CustomEvent> =
+    new EventEmitter<CustomEvent>();
+  @Output() error: EventEmitter<CustomEvent> = new EventEmitter<CustomEvent>();
+
+  constructor(descopeConfig: DescopeAuthConfig) {
+    this.projectId = descopeConfig.projectId;
+  }
+}