@descope/angular-sdk 0.5.10 → 0.5.11

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

@@ -0,0 +1,8 @@
+import { environment } from '../../environment';
+
+export const baseHeaders = {
+  'x-descope-sdk-name': 'angular',
+  'x-descope-sdk-version': environment.buildVersion
+};
+
+export const isBrowser = () => typeof window !== 'undefined';

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/projects/angular-sdk/src/public-api.ts

@@ -0,0 +1,18 @@
+/*
+ * 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';
+export * from './lib/descope-auth.module';
+export * from './lib/components/descope/descope.component';
+export * from './lib/components/sign-in-flow/sign-in-flow.component';
+export * from './lib/components/sign-up-flow/sign-up-flow.component';
+export * from './lib/components/sign-up-or-in-flow/sign-up-or-in-flow.component';
+export * from './lib/components/user-management/user-management.component';
+export * from './lib/components/role-management/role-management.component';
+export * from './lib/components/access-key-management/access-key-management.component';
+export * from './lib/components/audit-management/audit-management.component';
+export * from './lib/components/user-profile/user-profile.component';
+export * from './lib/types/types';

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,33 @@
+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';
+import { ManageUsersComponent } from './manage-users/manage-users.component';
+import { ManageRolesComponent } from './manage-roles/manage-roles.component';
+import { ManageAccessKeysComponent } from './manage-access-keys/manage-access-keys.component';
+import { ManageAuditComponent } from './manage-audit/manage-audit.component';
+import { MyUserProfileComponent } from './my-user-profile/my-user-profile.component';
+
+const routes: Routes = [
+  {
+    path: 'step-up',
+    component: ProtectedComponent,
+    canActivate: [descopeAuthGuard],
+    data: { descopeFallbackUrl: '/' }
+  },
+  { path: 'login', component: LoginComponent },
+  { path: 'manage-users', component: ManageUsersComponent },
+  { path: 'manage-roles', component: ManageRolesComponent },
+  { path: 'manage-access-keys', component: ManageAccessKeysComponent },
+  { path: 'manage-audit', component: ManageAuditComponent },
+  { path: 'my-user-profile', component: MyUserProfileComponent },
+  { 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,18 @@
+:host {
+  height: 100vh;
+  position: relative;
+}
+main {
+  border-radius: 10px;
+  margin: auto;
+  border: 1px solid lightgray;
+  padding: 20px;
+  max-width: 500px;
+  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', './my-user-profile/my-user-profile.scss']
+})
+export class AppComponent {}

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

@@ -0,0 +1,63 @@
+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 { ManageUsersComponent } from './manage-users/manage-users.component';
+import { ManageRolesComponent } from './manage-roles/manage-roles.component';
+import { ManageAccessKeysComponent } from './manage-access-keys/manage-access-keys.component';
+import { ManageAuditComponent } from './manage-audit/manage-audit.component';
+import { MyUserProfileComponent } from './my-user-profile/my-user-profile.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,
+    ManageUsersComponent,
+    ManageRolesComponent,
+    ManageAccessKeysComponent,
+    ManageAuditComponent,
+    MyUserProfileComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    HttpClientModule,
+    DescopeAuthModule.forRoot({
+      projectId: environment.descopeProjectId,
+      baseUrl: environment.descopeBaseUrl || '',
+      baseStaticUrl: environment.descopeBaseStaticUrl || '',
+      sessionTokenViaCookie: true
+    })
+  ],
+  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,32 @@
+<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="action-button" (click)="manageUsers()">Manage Users</button>
+  <button class="action-button" (click)="manageRoles()">Manage Roles</button>
+  <button class="action-button" (click)="manageAccessKeys()">
+    Manage Access Keys
+  </button>
+  <button class="action-button" (click)="manageAudit()">Manage Audit</button>
+  <button class="action-button" (click)="myUserProfile()">
+    My User Profile
+  </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,85 @@
+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));
+  }
+
+  manageUsers() {
+    this.router.navigate(['/manage-users']).catch((err) => console.error(err));
+  }
+
+  manageRoles() {
+    this.router.navigate(['/manage-roles']).catch((err) => console.error(err));
+  }
+
+  manageAccessKeys() {
+    this.router
+      .navigate(['/manage-access-keys'])
+      .catch((err) => console.error(err));
+  }
+
+  manageAudit() {
+    this.router.navigate(['/manage-audit']).catch((err) => console.error(err));
+  }
+
+  myUserProfile() {
+    this.router
+      .navigate(['/my-user-profile'])
+      .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,20 @@
+<descope
+  (success)="onSuccess($event)"
+  (error)="onError($event)"
+  (ready)="onReady()"
+  [theme]="theme"
+  [flowId]="flowId"
+  [locale]="locale"
+  [redirectUrl]="redirectUrl"
+  [telemetryKey]="telemetryKey"
+  [tenant]="tenantId"
+  [debug]="debugMode"
+  [errorTransformer]="errorTransformer"
+></descope>
+<div
+  *ngIf="isLoading"
+  class="loading-indicator"
+  style="display: flex; justify-content: center; align-items: center"
+>
+  Loading...
+</div>

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