Improve angular SDK archictecture

Author: DonOmalVindula

package.json

@@ -50,6 +50,13 @@
     "undici": "^7.21.0"
   },
   "pnpm": {
+    "packageExtensions": {
+      "@analogjs/vite-plugin-angular": {
+        "peerDependencies": {
+          "typescript": ">=5.5"
+        }
+      }
+    },
     "overrides": {
       "pbkdf2": "3.1.3",
       "sha.js": "2.4.12",

packages/angular/esbuild.config.mjs

@@ -0,0 +1,8 @@
+{
+  "$schema": "node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "dist",
+  "allowedNonPeerDependencies": ["@asgardeo/browser", "@asgardeo/i18n", "tslib"],
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

packages/angular/ng-package.json

@@ -16,47 +16,54 @@
   "author": "WSO2",
   "license": "Apache-2.0",
   "type": "module",
-  "main": "dist/cjs/index.js",
-  "module": "dist/index.js",
+  "module": "dist/fesm2022/asgardeo-angular.mjs",
+  "typings": "dist/types/asgardeo-angular.d.ts",
   "exports": {
-    "import": "./dist/index.js",
-    "require": "./dist/cjs/index.js"
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./dist/types/asgardeo-angular.d.ts",
+      "default": "./dist/fesm2022/asgardeo-angular.mjs"
+    }
   },
   "files": [
     "dist",
     "README.md",
     "LICENSE"
   ],
-  "types": "dist/index.d.ts",
+  "sideEffects": false,
   "repository": {
     "type": "git",
     "url": "https://github.com/asgardeo/javascript",
     "directory": "packages/angular"
   },
   "scripts": {
-    "build": "pnpm clean && node esbuild.config.mjs && tsc -p tsconfig.lib.json --emitDeclarationOnly --outDir dist",
+    "build": "pnpm clean && ng-packagr -p ng-package.json",
     "clean": "rimraf dist",
     "fix:lint": "eslint . --ext .js,.ts,.cjs,.mjs",
     "lint": "eslint . --ext .js,.ts,.cjs,.mjs",
     "test": "vitest",
     "typecheck": "tsc -p tsconfig.lib.json"
   },
   "devDependencies": {
+    "@angular/compiler": "21.1.5",
+    "@angular/compiler-cli": "21.1.5",
     "@types/node": "22.15.3",
     "@wso2/eslint-plugin": "catalog:",
     "@wso2/prettier-config": "catalog:",
-    "esbuild": "0.25.9",
     "eslint": "8.57.0",
     "jsdom": "26.1.0",
+    "ng-packagr": "21.1.0",
     "prettier": "2.6.2",
     "rimraf": "6.1.0",
-    "typescript": "5.7.2",
+    "typescript": "5.9.3",
     "vitest": "3.1.3"
   },
   "peerDependencies": {
-    "@angular/common": ">=17.0.0",
-    "@angular/core": ">=17.0.0",
-    "@angular/router": ">=17.0.0",
+    "@angular/common": ">=18.0.0",
+    "@angular/core": ">=18.0.0",
+    "@angular/router": ">=18.0.0",
     "rxjs": ">=7.0.0"
   },
   "dependencies": {

packages/angular/package.json

@@ -150,11 +150,11 @@ class AsgardeoAngularClient<T extends AsgardeoAngularConfig = AsgardeoAngularCon
   }
 
   async getDecodedIdToken(sessionId?: string): Promise<IdToken> {
-    return this.spaClient.getDecodedIdToken(sessionId);
+    return (await this.spaClient.getDecodedIdToken(sessionId)) as IdToken;
   }
 
   async getIdToken(): Promise<string> {
-    return this.withLoading(async () => this.spaClient.getIdToken());
+    return this.withLoading(async () => (await this.spaClient.getIdToken()) as string);
   }
 
   async getUserProfile(options?: any): Promise<UserProfile> {
@@ -236,9 +236,9 @@ class AsgardeoAngularClient<T extends AsgardeoAngularConfig = AsgardeoAngularCon
       return await this.withLoading(async () => {
         const idToken: IdToken = await this.getDecodedIdToken();
         return {
-          id: idToken?.org_id,
-          name: idToken?.org_name,
-          orgHandle: idToken?.org_handle,
+          id: idToken?.org_id || '',
+          name: idToken?.org_name || '',
+          orgHandle: idToken?.org_handle || '',
         };
       });
     } catch (error) {
@@ -298,7 +298,7 @@ class AsgardeoAngularClient<T extends AsgardeoAngularConfig = AsgardeoAngularCon
   }
 
   override async isSignedIn(): Promise<boolean> {
-    return this.spaClient.isSignedIn();
+    return (await this.spaClient.isSignedIn()) ?? false;
   }
 
   /**
@@ -329,7 +329,7 @@ class AsgardeoAngularClient<T extends AsgardeoAngularConfig = AsgardeoAngularCon
   }
 
   override async signInSilently(options?: SignInOptions): Promise<User | boolean> {
-    return this.spaClient.signInSilently(options as Record<string, string | boolean>);
+    return (await this.spaClient.signInSilently(options as Record<string, string | boolean>)) as User | boolean;
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -353,12 +353,12 @@ class AsgardeoAngularClient<T extends AsgardeoAngularConfig = AsgardeoAngularCon
     navigate(getRedirectBasedSignUpUrl(config as Config));
   }
 
-  async request(requestConfig?: HttpRequestConfig): Promise<HttpResponse<any>> {
-    return this.spaClient.httpRequest(requestConfig);
+  async request(requestConfig: HttpRequestConfig): Promise<HttpResponse<any>> {
+    return (await this.spaClient.httpRequest(requestConfig)) as HttpResponse<any>;
   }
 
-  async requestAll(requestConfigs?: HttpRequestConfig[]): Promise<HttpResponse<any>[]> {
-    return this.spaClient.httpRequestAll(requestConfigs);
+  async requestAll(requestConfigs: HttpRequestConfig[]): Promise<HttpResponse<any>[]> {
+    return (await this.spaClient.httpRequestAll(requestConfigs)) as HttpResponse<any>[];
   }
 
   override async getAccessToken(sessionId?: string): Promise<string> {
@@ -374,7 +374,7 @@ class AsgardeoAngularClient<T extends AsgardeoAngularConfig = AsgardeoAngularCon
   }
 
   override decodeJwtToken<TResult = Record<string, unknown>>(token: string): Promise<TResult> {
-    return this.spaClient.decodeJwtToken<TResult>(token);
+    return this.spaClient.decodeJwtToken<TResult>(token) as Promise<TResult>;
   }
 }
 

packages/angular/src/AsgardeoAngularClient.ts

@@ -18,13 +18,10 @@
 
 import {
   Organization,
-  HttpInstance,
-  HttpResponse,
-  AsgardeoSPAClient,
-  HttpRequestConfig,
   createOrganization as baseCreateOrganization,
   CreateOrganizationConfig as BaseCreateOrganizationConfig,
 } from '@asgardeo/browser';
+import {createDefaultFetcher} from '../utils/fetcher';
 
 /**
  * Configuration for the createOrganization request (Angular-specific)
@@ -96,30 +93,10 @@ const createOrganization = async ({
   fetcher,
   instanceId = 0,
   ...requestConfig
-}: CreateOrganizationConfig): Promise<Organization> => {
-  const defaultFetcher = async (url: string, config: RequestInit): Promise<Response> => {
-    const client: AsgardeoSPAClient = AsgardeoSPAClient.getInstance(instanceId);
-    const httpClient: HttpInstance = client.httpRequest.bind(client);
-    const response: HttpResponse<any> = await httpClient({
-      data: config.body ? JSON.parse(config.body as string) : undefined,
-      headers: config.headers as Record<string, string>,
-      method: config.method || 'POST',
-      url,
-    } as HttpRequestConfig);
-
-    return {
-      json: () => Promise.resolve(response.data),
-      ok: response.status >= 200 && response.status < 300,
-      status: response.status,
-      statusText: response.statusText || '',
-      text: () => Promise.resolve(typeof response.data === 'string' ? response.data : JSON.stringify(response.data)),
-    } as Response;
-  };
-
-  return baseCreateOrganization({
+}: CreateOrganizationConfig): Promise<Organization> =>
+  baseCreateOrganization({
     ...requestConfig,
-    fetcher: fetcher || defaultFetcher,
+    fetcher: fetcher || createDefaultFetcher(instanceId),
   });
-};
 
 export default createOrganization;

packages/angular/src/api/createOrganization.ts

@@ -17,14 +17,11 @@
  */
 
 import {
-  HttpInstance,
-  HttpResponse,
-  AsgardeoSPAClient,
-  HttpRequestConfig,
   getAllOrganizations as baseGetAllOrganizations,
   GetAllOrganizationsConfig as BaseGetAllOrganizationsConfig,
   AllOrganizationsApiResponse,
 } from '@asgardeo/browser';
+import {createDefaultFetcher} from '../utils/fetcher';
 
 /**
  * Configuration for the getAllOrganizations request (Angular-specific)
@@ -88,29 +85,10 @@ const getAllOrganizations = async ({
   fetcher,
   instanceId = 0,
   ...requestConfig
-}: GetAllOrganizationsConfig): Promise<AllOrganizationsApiResponse> => {
-  const defaultFetcher = async (url: string, config: RequestInit): Promise<Response> => {
-    const client: AsgardeoSPAClient = AsgardeoSPAClient.getInstance(instanceId);
-    const httpClient: HttpInstance = client.httpRequest.bind(client);
-    const response: HttpResponse<any> = await httpClient({
-      headers: config.headers as Record<string, string>,
-      method: config.method || 'GET',
-      url,
-    } as HttpRequestConfig);
-
-    return {
-      json: () => Promise.resolve(response.data),
-      ok: response.status >= 200 && response.status < 300,
-      status: response.status,
-      statusText: response.statusText || '',
-      text: () => Promise.resolve(typeof response.data === 'string' ? response.data : JSON.stringify(response.data)),
-    } as Response;
-  };
-
-  return baseGetAllOrganizations({
+}: GetAllOrganizationsConfig): Promise<AllOrganizationsApiResponse> =>
+  baseGetAllOrganizations({
     ...requestConfig,
-    fetcher: fetcher || defaultFetcher,
+    fetcher: fetcher || createDefaultFetcher(instanceId),
   });
-};
 
 export default getAllOrganizations;

packages/angular/src/api/getAllOrganizations.ts

@@ -18,13 +18,10 @@
 
 import {
   Organization,
-  HttpInstance,
-  HttpResponse,
-  AsgardeoSPAClient,
-  HttpRequestConfig,
   getMeOrganizations as baseGetMeOrganizations,
   GetMeOrganizationsConfig as BaseGetMeOrganizationsConfig,
 } from '@asgardeo/browser';
+import {createDefaultFetcher} from '../utils/fetcher';
 
 /**
  * Configuration for the getMeOrganizations request (Angular-specific)
@@ -92,29 +89,10 @@ const getMeOrganizations = async ({
   fetcher,
   instanceId = 0,
   ...requestConfig
-}: GetMeOrganizationsConfig): Promise<Organization[]> => {
-  const defaultFetcher = async (url: string, config: RequestInit): Promise<Response> => {
-    const client: AsgardeoSPAClient = AsgardeoSPAClient.getInstance(instanceId);
-    const httpClient: HttpInstance = client.httpRequest.bind(client);
-    const response: HttpResponse<any> = await httpClient({
-      headers: config.headers as Record<string, string>,
-      method: config.method || 'GET',
-      url,
-    } as HttpRequestConfig);
-
-    return {
-      json: () => Promise.resolve(response.data),
-      ok: response.status >= 200 && response.status < 300,
-      status: response.status,
-      statusText: response.statusText || '',
-      text: () => Promise.resolve(typeof response.data === 'string' ? response.data : JSON.stringify(response.data)),
-    } as Response;
-  };
-
-  return baseGetMeOrganizations({
+}: GetMeOrganizationsConfig): Promise<Organization[]> =>
+  baseGetMeOrganizations({
     ...requestConfig,
-    fetcher: fetcher || defaultFetcher,
+    fetcher: fetcher || createDefaultFetcher(instanceId),
   });
-};
 
 export default getMeOrganizations;