Fix lint issues in browser package

Author: DonOmalVindula

package.json

@@ -69,7 +69,9 @@
       "seroval": "1.4.1",
       "qs": "6.14.1",
       "@vitejs/plugin-vue>vite": "7.1.12",
-      "prettier": "2.6.2"
+      "prettier": "2.6.2",
+      "@typescript-eslint/eslint-plugin": "5.62.0",
+      "@typescript-eslint/parser": "5.62.0"
     }
   },
   "publishConfig": {

packages/browser/.eslintignore

@@ -1,4 +1,5 @@
 /dist
 /build
 /node_modules
-/coverage
+/coverage
+/src/__legacy__

packages/browser/esbuild.config.mjs

@@ -16,88 +16,89 @@
  * under the License.
  */
 
-import { readFileSync } from 'fs';
+import {readFileSync} from 'fs';
+import {createRequire} from 'module';
 import * as esbuild from 'esbuild';
-import { createRequire } from 'module';
 import inlineWorkerPlugin from 'esbuild-plugin-inline-worker';
 
 const require = createRequire(import.meta.url);
 const pkg = JSON.parse(readFileSync('./package.json', 'utf8'));
 
 // Get dependencies excluding crypto-related ones that need to be bundled
-const externalDeps = [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {})]
-  .filter(dep => !['crypto-browserify', 'randombytes', 'buffer'].includes(dep));
+const externalDeps = [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {})].filter(
+  dep => !['crypto-browserify', 'randombytes', 'buffer'].includes(dep),
+);
 
 // Plugin to alias crypto and buffer modules
 const polyfillPlugin = {
   name: 'polyfill-plugin',
   setup(build) {
     // Crypto polyfill
-    build.onResolve({ filter: /^crypto$/ }, () => ({
-      path: require.resolve('crypto-browserify')
+    build.onResolve({filter: /^crypto$/}, () => ({
+      path: require.resolve('crypto-browserify'),
     }));
 
     // Buffer polyfill
-    build.onResolve({ filter: /^buffer$/ }, () => ({
-      path: require.resolve('buffer/')
+    build.onResolve({filter: /^buffer$/}, () => ({
+      path: require.resolve('buffer/'),
     }));
-  }
+  },
 };
 
 const commonOptions = {
-  bundle: true,
-  entryPoints: ['src/index.ts'],
-  external: externalDeps,
-  platform: 'browser',
-  target: ['es2020'],
-  define: {
-    global: 'globalThis', // Required by crypto-browserify
-    'process.env.NODE_DEBUG': 'false',
-    'process.version': '"16.0.0"',
-    'process.browser': 'true'
-  },
   banner: {
     js: `
       import { Buffer } from 'buffer/';
       if (typeof window !== 'undefined' && !window.Buffer) {
         window.Buffer = Buffer;
       }
-    `
+    `,
+  },
+  bundle: true,
+  define: {
+    global: 'globalThis', // Required by crypto-browserify
+    'process.browser': 'true',
+    'process.env.NODE_DEBUG': 'false',
+    'process.version': '"16.0.0"',
   },
+  entryPoints: ['src/index.ts'],
+  external: externalDeps,
   footer: {
     js: `
       if (typeof window !== 'undefined' && !window.Buffer) {
         window.Buffer = require('buffer/').Buffer;
       }
-    `
+    `,
   },
+  platform: 'browser',
   plugins: [
     polyfillPlugin,
     inlineWorkerPlugin({
-      format: 'iife',
-      target: 'es2020',
-      platform: 'browser',
       define: {
-        'global': 'self',
-        'globalThis': 'self',
+        global: 'self',
+        globalThis: 'self',
+        'process.browser': 'true',
         'process.env.NODE_DEBUG': 'false',
         'process.version': '"16.0.0"',
-        'process.browser': 'true'
-      }
-    })
-  ]
+      },
+      format: 'iife',
+      platform: 'browser',
+      target: 'es2020',
+    }),
+  ],
+  target: ['es2020'],
 };
 
 await esbuild.build({
   ...commonOptions,
   format: 'esm',
   outfile: 'dist/index.js',
-  sourcemap: true
+  sourcemap: true,
 });
 
 await esbuild.build({
   ...commonOptions,
   format: 'cjs',
   outfile: 'dist/cjs/index.js',
-  sourcemap: true
+  sourcemap: true,
 });

packages/browser/src/__legacy__/client.ts

@@ -85,15 +85,15 @@ export class AsgardeoSPAClient {
     this._instanceID = id;
   }
 
-  public instantiateAuthHelper(authHelper?: typeof AuthenticationHelper) {
+  public instantiateAuthHelper(authHelper?: typeof AuthenticationHelper): void {
     if (authHelper) {
       this._authHelper = authHelper;
     } else {
       this._authHelper = AuthenticationHelper;
     }
   }
 
-  public instantiateWorker(worker: new () => Worker) {
+  public instantiateWorker(worker: new () => Worker): void {
     if (worker) {
       this._worker = worker;
     } else {

packages/browser/src/index.ts

@@ -19,10 +19,13 @@
 /**
  * Entry point for all public APIs of this SDK.
  */
+// eslint-disable-next-line import/no-cycle
 export * from './__legacy__/client';
+// eslint-disable-next-line import/no-cycle
 export * from './__legacy__/models';
 
 // Utils
+// eslint-disable-next-line import/no-cycle
 export * from './__legacy__/utils/spa-utils';
 
 // Constants

packages/browser/src/theme/themeDetection.ts

@@ -51,11 +51,12 @@ export const detectThemeMode = (mode: ThemeMode, config: BrowserThemeDetection =
 
   if (mode === 'class') {
     if (!targetElement) {
+      // eslint-disable-next-line no-console
       console.warn('ThemeDetection: targetElement is required for class-based detection, falling back to light mode');
       return 'light';
     }
 
-    const classList = targetElement.classList;
+    const {classList} = targetElement;
 
     // Check for explicit dark class first
     if (classList.contains(darkClass)) {
@@ -84,10 +85,10 @@ export const createClassObserver = (
 ): MutationObserver => {
   const {darkClass = 'dark', lightClass = 'light'} = config;
 
-  const observer = new MutationObserver(mutations => {
-    mutations.forEach(mutation => {
+  const observer: MutationObserver = new MutationObserver((mutations: MutationRecord[]) => {
+    mutations.forEach((mutation: MutationRecord) => {
       if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
-        const classList = targetElement.classList;
+        const {classList} = targetElement;
 
         if (classList.contains(darkClass)) {
           callback(true);
@@ -101,8 +102,8 @@ export const createClassObserver = (
   });
 
   observer.observe(targetElement, {
-    attributes: true,
     attributeFilter: ['class'],
+    attributes: true,
   });
 
   return observer;
@@ -116,9 +117,9 @@ export const createMediaQueryListener = (callback: (isDark: boolean) => void): M
     return null;
   }
 
-  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  const mediaQuery: MediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
 
-  const handleChange = (e: MediaQueryListEvent) => {
+  const handleChange = (e: MediaQueryListEvent): void => {
     callback(e.matches);
   };
 

packages/browser/src/types/worker.d.ts

@@ -18,35 +18,35 @@
 
 // Type declarations for worker files handled by esbuild-plugin-inline-worker
 
-declare module "*.worker" {
+declare module '*.worker' {
   const WorkerFactory: {
     new (): Worker;
   };
   export default WorkerFactory;
 }
 
-declare module "*.worker.js" {
+declare module '*.worker.js' {
   const WorkerFactory: {
     new (): Worker;
   };
   export default WorkerFactory;
 }
 
-declare module "*.worker.ts" {
+declare module '*.worker.ts' {
   const WorkerFactory: {
     new (): Worker;
   };
   export default WorkerFactory;
 }
 
-declare module "*.worker.jsx" {
+declare module '*.worker.jsx' {
   const WorkerFactory: {
     new (): Worker;
   };
   export default WorkerFactory;
 }
 
-declare module "*.worker.tsx" {
+declare module '*.worker.tsx' {
   const WorkerFactory: {
     new (): Worker;
   };

packages/browser/src/utils/__tests__/navigate.test.ts

@@ -24,7 +24,7 @@ import {vi, describe, it, expect, beforeEach, afterEach} from 'vitest';
 import navigate from '../navigate';
 
 describe('navigate', () => {
-  const originalLocation = window.location;
+  const originalLocation: Location = window.location;
 
   beforeEach(() => {
     // @ts-ignore
@@ -37,8 +37,8 @@ describe('navigate', () => {
     window.location = {
       ...originalLocation,
       assign: vi.fn(),
-      origin: 'https://localhost:5173',
       href: 'https://localhost:5173/',
+      origin: 'https://localhost:5173',
     };
   });
 
@@ -58,23 +58,23 @@ describe('navigate', () => {
     navigate('/test-url');
     expect(window.dispatchEvent).toHaveBeenCalledWith(
       expect.objectContaining({
-        type: 'popstate',
         state: null,
+        type: 'popstate',
       }),
     );
     expect(window.location.assign).not.toHaveBeenCalled();
   });
 
   it('should use window.location.assign for cross-origin URLs', () => {
-    const crossOriginUrl = 'https://accounts.asgardeo.io/t/dxlab/accountrecoveryendpoint/register.do';
+    const crossOriginUrl: string = 'https://accounts.asgardeo.io/t/dxlab/accountrecoveryendpoint/register.do';
     navigate(crossOriginUrl);
     expect(window.location.assign).toHaveBeenCalledWith(crossOriginUrl);
     expect(window.history.pushState).not.toHaveBeenCalled();
     expect(window.dispatchEvent).not.toHaveBeenCalled();
   });
 
   it('should use window.location.assign for malformed URLs', () => {
-    const malformedUrl = 'http://[::1'; // Invalid URL
+    const malformedUrl: string = 'http://[::1'; // Invalid URL
     navigate(malformedUrl);
     expect(window.location.assign).toHaveBeenCalledWith(malformedUrl);
     expect(window.history.pushState).not.toHaveBeenCalled();

packages/browser/src/utils/handleWebAuthnAuthentication.ts

@@ -116,23 +116,24 @@ const handleWebAuthnAuthentication = async (challengeData: string): Promise<stri
   }
 
   try {
-    const decodedChallenge = JSON.parse(atob(challengeData));
+    const decodedChallenge: any = JSON.parse(atob(challengeData));
     const {publicKeyCredentialRequestOptions} = decodedChallenge;
 
-    const currentDomain = window.location.hostname;
-    const challengeRpId = publicKeyCredentialRequestOptions.rpId;
+    const currentDomain: string = window.location.hostname;
+    const challengeRpId: string = publicKeyCredentialRequestOptions.rpId;
 
-    let rpIdToUse = challengeRpId;
+    let rpIdToUse: string = challengeRpId;
 
     if (challengeRpId && !currentDomain.endsWith(challengeRpId) && challengeRpId !== currentDomain) {
+      // eslint-disable-next-line no-console
       console.warn(`RP ID mismatch detected. Challenge RP ID: ${challengeRpId}, Current domain: ${currentDomain}`);
       rpIdToUse = currentDomain;
     }
 
-    const adjustedOptions = {
+    const adjustedOptions: any = {
       ...publicKeyCredentialRequestOptions,
-      rpId: rpIdToUse,
       challenge: base64urlToArrayBuffer(publicKeyCredentialRequestOptions.challenge),
+      rpId: rpIdToUse,
       ...(publicKeyCredentialRequestOptions.userVerification && {
         userVerification: publicKeyCredentialRequestOptions.userVerification,
       }),
@@ -144,7 +145,7 @@ const handleWebAuthnAuthentication = async (challengeData: string): Promise<stri
       }),
     };
 
-    const credential = (await navigator.credentials.get({
+    const credential: PublicKeyCredential = (await navigator.credentials.get({
       publicKey: adjustedOptions,
     })) as PublicKeyCredential;
 
@@ -157,10 +158,9 @@ const handleWebAuthnAuthentication = async (challengeData: string): Promise<stri
       );
     }
 
-    const authData = credential.response as AuthenticatorAssertionResponse;
+    const authData: AuthenticatorAssertionResponse = credential.response as AuthenticatorAssertionResponse;
 
-    const tokenResponse = {
-      requestId: decodedChallenge.requestId,
+    const tokenResponse: {credential: any; requestId: string} = {
       credential: {
         id: credential.id,
         rawId: arrayBufferToBase64url(credential.rawId),
@@ -174,10 +174,12 @@ const handleWebAuthnAuthentication = async (challengeData: string): Promise<stri
         },
         type: credential.type,
       },
+      requestId: decodedChallenge.requestId,
     };
 
     return JSON.stringify(tokenResponse);
   } catch (error) {
+    // eslint-disable-next-line no-console
     console.error('WebAuthn authentication failed:', error);
 
     if (error instanceof AsgardeoRuntimeError) {