@descope/angular-sdk 0.5.10 → 0.5.11

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

@@ -0,0 +1,84 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { UserManagementComponent } from './user-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 DescopeUserManagementWidget
+jest.mock('@descope/user-management-widget', () => {
+  return jest.fn(() => {
+    // Create a mock DOM element
+    return document.createElement('descope-user-management-widget');
+  });
+});
+
+describe('DescopeUserManagementComponent', () => {
+  let component: UserManagementComponent;
+  let fixture: ComponentFixture<UserManagementComponent>;
+  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(UserManagementComponent);
+    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-user-management-widget'
+    );
+    expect(webComponentHtml).toBeDefined();
+  });
+
+  it('should correctly setup attributes based on inputs', () => {
+    const html: HTMLElement = fixture.nativeElement;
+    const webComponentHtml = html.querySelector(
+      'descope-user-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/user-management/user-management.component.ts

@@ -0,0 +1,64 @@
+import { Component, ElementRef, Input, OnChanges, OnInit } from '@angular/core';
+import DescopeUserManagementWidget from '@descope/user-management-widget';
+import { ILogger } from '@descope/web-component';
+import { DescopeAuthConfig } from '../../types/types';
+
+@Component({
+  selector: 'user-management[tenant]',
+  standalone: true,
+  template: ''
+})
+export class UserManagementComponent 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 DescopeUserManagementWidget();
+
+  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/user-profile/user-profile.component.spec.ts

@@ -0,0 +1,93 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { UserProfileComponent } from './user-profile.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 DescopeUserProfileWidget
+jest.mock('@descope/user-profile-widget', () => {
+  return jest.fn(() => {
+    // Create a mock DOM element
+    return document.createElement('descope-user-profile-widget');
+  });
+});
+
+describe('DescopeUserProfileComponent', () => {
+  let component: UserProfileComponent;
+  let fixture: ComponentFixture<UserProfileComponent>;
+  let mockedCreateSdk: jest.Mock;
+  const onSessionTokenChangeSpy = jest.fn();
+  const onAuditChangeSpy = jest.fn();
+  const afterRequestHooksSpy = jest.fn();
+  const mockConfig: DescopeAuthConfig = {
+    projectId: 'someProject'
+  };
+
+  beforeEach(() => {
+    mockedCreateSdk = mocked(createSdk);
+
+    mockedCreateSdk.mockReturnValue({
+      onSessionTokenChange: onSessionTokenChangeSpy,
+      onAuditChange: onAuditChangeSpy,
+      httpClient: {
+        hooks: {
+          afterRequest: afterRequestHooksSpy
+        }
+      }
+    });
+
+    TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      providers: [
+        DescopeAuthConfig,
+        { provide: DescopeAuthConfig, useValue: mockConfig }
+      ]
+    });
+
+    fixture = TestBed.createComponent(UserProfileComponent);
+    component = fixture.componentInstance;
+    component.projectId = '123';
+    component.widgetId = 'widget-1';
+    component.logout = new EventEmitter<CustomEvent>();
+    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-user-profile-widget');
+    expect(webComponentHtml).toBeDefined();
+  });
+
+  it('should correctly setup attributes based on inputs', () => {
+    const html: HTMLElement = fixture.nativeElement;
+    const webComponentHtml = html.querySelector('descope-user-profile-widget')!;
+    expect(webComponentHtml.getAttribute('project-id')).toStrictEqual('123');
+    expect(webComponentHtml.getAttribute('widget-id')).toStrictEqual(
+      'widget-1'
+    );
+    expect(webComponentHtml.getAttribute('logger')).toBeDefined();
+  });
+
+  it('should emit logout when web component emits logout', () => {
+    const html: HTMLElement = fixture.nativeElement;
+    const webComponentHtml = html.querySelector('descope-user-profile-widget')!;
+
+    const event = {
+      detail: 'logout'
+    };
+    component.logout.subscribe((e) => {
+      expect(afterRequestHooksSpy).toHaveBeenCalled();
+      expect(e.detail).toHaveBeenCalledWith(event.detail);
+    });
+    webComponentHtml.dispatchEvent(new CustomEvent('logout', event));
+  });
+});

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

@@ -0,0 +1,77 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output
+} from '@angular/core';
+import DescopeUserProfileWidget from '@descope/user-profile-widget';
+import { ILogger } from '@descope/web-component';
+import { DescopeAuthConfig } from '../../types/types';
+
+@Component({
+  selector: 'user-profile',
+  standalone: true,
+  template: ''
+})
+export class UserProfileComponent implements OnInit, OnChanges {
+  projectId: string;
+  baseUrl?: string;
+  baseStaticUrl?: string;
+  @Input() widgetId: string;
+
+  @Input() theme: 'light' | 'dark' | 'os';
+  @Input() debug: boolean;
+  @Input() logger: ILogger;
+
+  @Output() logout: EventEmitter<CustomEvent> = new EventEmitter<CustomEvent>();
+
+  private readonly webComponent = new DescopeUserProfileWidget();
+
+  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('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;
+    }
+
+    if (this.logout) {
+      this.webComponent.addEventListener('logout', (e: Event) => {
+        this.logout?.emit(e as CustomEvent);
+      });
+    }
+  }
+}

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

@@ -0,0 +1,61 @@
+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 { UserManagementComponent } from './components/user-management/user-management.component';
+import { RoleManagementComponent } from './components/role-management/role-management.component';
+import { AccessKeyManagementComponent } from './components/access-key-management/access-key-management.component';
+import { AuditManagementComponent } from './components/audit-management/audit-management.component';
+import { UserProfileComponent } from './components/user-profile/user-profile.component';
+import { DescopeAuthConfig } from './types/types';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [
+    DescopeComponent,
+    SignInFlowComponent,
+    SignUpFlowComponent,
+    SignUpOrInFlowComponent,
+    UserManagementComponent,
+    RoleManagementComponent,
+    AccessKeyManagementComponent,
+    AuditManagementComponent,
+    UserProfileComponent
+  ],
+  exports: [
+    DescopeComponent,
+    SignInFlowComponent,
+    SignUpFlowComponent,
+    SignUpOrInFlowComponent,
+    UserManagementComponent,
+    RoleManagementComponent,
+    AccessKeyManagementComponent,
+    AuditManagementComponent,
+    UserProfileComponent
+  ]
+})
+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);
+};