fix: type some issues in @asgardeo/javascript & @asgardeo/react packages

.changeset/tricky-rooms-try.md

@@ -0,0 +1,6 @@
+---
+'@asgardeo/javascript': patch
+'@asgardeo/react': patch
+---
+
+Update types and improve type safety across components and models

.github/workflows/npm-audit.yml

@@ -34,6 +34,7 @@ jobs:
     strategy:
       matrix:
         node-version: [lts/*]
+        pnpm-version: [latest]
     steps:
       - name: ⬇️ Checkout
         id: checkout
@@ -49,7 +50,7 @@ jobs:
         id: setup-pnpm
         uses: pnpm/[email protected]
         with:
-          version: latest
+          version: ${{ matrix.pnpm-version }}
           run_install: false
 
       - name: 🧩 Install Dependencies

.github/workflows/pr-builder.yml

@@ -20,6 +20,7 @@ jobs:
     strategy:
       matrix:
         node-version: [lts/*]
+        pnpm-version: [latest]
     steps:
       - name: ⬇️ Checkout
         id: checkout
@@ -44,7 +45,7 @@ jobs:
         id: setup-pnpm
         uses: pnpm/[email protected]
         with:
-          version: latest
+          version: ${{ matrix.pnpm-version }}
           run_install: false
 
       - name: 🎈 Get pnpm store directory
@@ -75,6 +76,7 @@ jobs:
     strategy:
       matrix:
         node-version: [lts/*]
+        pnpm-version: [latest]
     steps:
       - name: ⬇️ Checkout
         id: checkout
@@ -98,7 +100,7 @@ jobs:
       - name: 🥡 Setup pnpm
         uses: pnpm/[email protected]
         with:
-          version: latest
+          version: ${{ matrix.pnpm-version }}
           run_install: false
 
       - name: 🎈 Get pnpm store directory
@@ -118,7 +120,7 @@ jobs:
       - name: 🧩 Install Dependencies
         id: install-dependencies
         run: pnpm install
-        
+
       - name: 🏗️ Build
         id: build
         run: pnpm build
@@ -133,6 +135,7 @@ jobs:
     strategy:
       matrix:
         node-version: [lts/*]
+        pnpm-version: [latest]
     steps:
       - name: ⬇️ Checkout
         id: checkout
@@ -150,7 +153,7 @@ jobs:
       - name: 🥡 Setup pnpm
         uses: pnpm/[email protected]
         with:
-          version: latest
+          version: ${{ matrix.pnpm-version }}
           run_install: false
 
       - name: 🎈 Get pnpm store directory
@@ -170,7 +173,7 @@ jobs:
       - name: 🧩 Install Dependencies
         id: install-dependencies
         run: pnpm install
-        
+
       - name: 🏗️ Build
         id: build
         run: pnpm build
@@ -186,6 +189,7 @@ jobs:
     strategy:
       matrix:
         node-version: [lts/*]
+        pnpm-version: [latest]
     steps:
       - name: ⬇️ Checkout
         id: checkout
@@ -200,7 +204,7 @@ jobs:
       - name: 🥡 Setup pnpm
         uses: pnpm/[email protected]
         with:
-          version: latest
+          version: ${{ matrix.pnpm-version }}
           run_install: false
 
       - name: 🎈 Get pnpm store directory

packages/javascript/src/models/config.ts

@@ -104,7 +104,7 @@ export interface BaseConfig<T = unknown> extends WithPreferences {
    * The client ID obtained from the Asgardeo application registration.
    * This is used to identify your application during authentication.
    */
-  clientId: string | undefined;
+  clientId?: string | undefined;
 
   /**
    * Optional client secret for the application.

packages/javascript/src/models/embedded-flow.ts

@@ -51,9 +51,9 @@ export interface EmbeddedSignUpFlowData {
 
 export interface EmbeddedFlowComponent {
   components: EmbeddedFlowComponent[];
-  config: Record<string, any>;
+  config: Record<string, unknown>;
   id: string;
-  type: EmbeddedFlowComponentType;
+  type: EmbeddedFlowComponentType | string;
   variant?: string;
 }
 

packages/javascript/src/models/v2/embedded-signin-flow-v2.ts

@@ -29,11 +29,23 @@ export enum EmbeddedSignInFlowTypeV2 {
   View = 'VIEW',
 }
 
+/**
+ * Extended response structure for the embedded sign-in flow V2.
+ * @remarks This response is only done from the SDK level.
+ * @experimental
+ */
+export interface ExtendedEmbeddedSignInFlowResponseV2 {
+  /**
+   * The URL to redirect the user after completing the sign-in flow.
+   */
+  redirectUrl?: string;
+}
+
 /**
  * Response structure for the new Asgardeo V2 embedded sign-in flow.
  * @experimental
  */
-export interface EmbeddedSignInFlowResponseV2 {
+export interface EmbeddedSignInFlowResponseV2 extends ExtendedEmbeddedSignInFlowResponseV2 {
   flowId: string;
   flowStatus: EmbeddedSignInFlowStatusV2;
   type: EmbeddedSignInFlowTypeV2;

packages/nextjs/src/client/components/actions/SignInButton/SignInButton.tsx

@@ -77,7 +77,7 @@ const SignInButton = forwardRef<HTMLButtonElement, SignInButtonProps>(
         if (signInUrl) {
           router.push(signInUrl);
         } else {
-          await signIn(signInOptions);
+          signIn && await signIn(signInOptions);
         }
 
         if (onClick) {

packages/nextjs/src/client/components/actions/SignUpButton/SignUpButton.tsx

@@ -88,7 +88,7 @@ const SignUpButton: ForwardRefExoticComponent<SignUpButtonProps & RefAttributes<
       if (signUpUrl) {
         router.push(signUpUrl);
       } else {
-        await signUp();
+        signUp && await signUp();
       }
 
       if (onClick) {

packages/nextjs/src/client/components/presentation/SignIn/SignIn.tsx

@@ -19,6 +19,7 @@
 'use client';
 
 import {
+  AsgardeoRuntimeError,
   EmbeddedFlowExecuteRequestConfig,
   EmbeddedSignInFlowHandleRequestPayload,
   EmbeddedSignInFlowHandleResponse,
@@ -81,19 +82,28 @@ const SignIn: FC<SignInProps> = ({size = 'medium', variant = 'outlined', ...rest
   const {signIn, afterSignInUrl} = useAsgardeo();
 
   const handleInitialize = async (): Promise<EmbeddedSignInFlowInitiateResponse> =>
-    await signIn({
+    signIn &&
+    (await signIn({
       flowId: '',
       selectedAuthenticator: {
         authenticatorId: '',
         params: {},
       },
-    });
+    }));
 
   const handleOnSubmit = async (
     payload: EmbeddedSignInFlowHandleRequestPayload,
     request: EmbeddedFlowExecuteRequestConfig,
   ): Promise<EmbeddedSignInFlowHandleResponse> => {
-    return await signIn(payload, request);
+    if (!signIn) {
+      throw new AsgardeoRuntimeError(
+        '`signIn` function is not available.',
+        'SignIn-handleOnSubmit-RuntimeError-001',
+        'nextjs',
+      );
+    }
+
+    return (await signIn(payload, request)) as Promise<EmbeddedSignInFlowHandleResponse>;
   };
 
   return (

packages/nextjs/src/client/components/presentation/SignUp/SignUp.tsx

@@ -19,6 +19,7 @@
 'use client';
 
 import {
+  AsgardeoRuntimeError,
   EmbeddedFlowExecuteRequestPayload,
   EmbeddedFlowExecuteResponse,
   EmbeddedFlowResponseType,
@@ -72,18 +73,35 @@ const SignUp: FC<SignUpProps> = ({className, size = 'medium', variant = 'outline
   const handleInitialize = async (
     payload?: EmbeddedFlowExecuteRequestPayload,
   ): Promise<EmbeddedFlowExecuteResponse> => {
-    return await signUp(
+    if (!signUp) {
+      throw new AsgardeoRuntimeError(
+        '`signUp` function is not available.',
+        'SignUp-handleInitialize-RuntimeError-001',
+        'nextjs',
+      );
+    }
+
+    return (await signUp(
       payload || {
         flowType: EmbeddedFlowType.Registration,
       },
-    );
+    )) as unknown as Promise<EmbeddedFlowExecuteResponse>;
   };
 
   /**
    * Handle sign-up steps.
    */
-  const handleOnSubmit = async (payload: EmbeddedFlowExecuteRequestPayload): Promise<EmbeddedFlowExecuteResponse> =>
-    await signUp(payload);
+  const handleOnSubmit = async (payload: EmbeddedFlowExecuteRequestPayload): Promise<EmbeddedFlowExecuteResponse> => {
+    if (!signUp) {
+      throw new AsgardeoRuntimeError(
+        '`signUp` function is not available.',
+        'SignUp-handleOnSubmit-RuntimeError-001',
+        'nextjs',
+      );
+    }
+
+    return (await signUp(payload)) as unknown as Promise<EmbeddedFlowExecuteResponse>;
+  };
 
   return (
     <BaseSignUp

packages/nextjs/src/client/contexts/Asgardeo/AsgardeoContext.ts

@@ -40,9 +40,9 @@ const AsgardeoContext: Context<AsgardeoContextProps | null> = createContext<null
   isInitialized: false,
   isLoading: true,
   isSignedIn: false,
-  signIn: null,
-  signOut: null,
-  signUp: null,
+  signIn: () => Promise.resolve({} as any),
+  signOut: () => Promise.resolve({} as any),
+  signUp: () => Promise.resolve({} as any),
   user: null,
 });
 

packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx

@@ -31,6 +31,7 @@ import {
   BrandingPreference,
   TokenResponse,
   CreateOrganizationPayload,
+  AsgardeoRuntimeError,
 } from '@asgardeo/node';
 import {
   I18nProvider,
@@ -191,6 +192,14 @@ const AsgardeoClientProvider: FC<PropsWithChildren<AsgardeoClientProviderProps>>
     payload: EmbeddedSignInFlowHandleRequestPayload,
     request: EmbeddedFlowExecuteRequestConfig,
   ) => {
+    if (!signIn) {
+      throw new AsgardeoRuntimeError(
+        '`signIn` function is not available.',
+        'AsgardeoClientProvider-handleSignIn-RuntimeError-001',
+        'nextjs',
+      );
+    }
+
     try {
       const result = await signIn(payload, request);
 
@@ -222,6 +231,14 @@ const AsgardeoClientProvider: FC<PropsWithChildren<AsgardeoClientProviderProps>>
     payload: EmbeddedFlowExecuteRequestPayload,
     request: EmbeddedFlowExecuteRequestConfig,
   ) => {
+    if (!signUp) {
+      throw new AsgardeoRuntimeError(
+        '`signUp` function is not available.',
+        'AsgardeoClientProvider-handleSignUp-RuntimeError-001',
+        'nextjs',
+      );
+    }
+
     try {
       const result = await signUp(payload, request);
 

packages/react/src/AsgardeoReactClient.ts

@@ -49,6 +49,7 @@ import {
   TokenExchangeRequestConfig,
   Platform,
   isEmpty,
+  EmbeddedSignInFlowResponseV2,
 } from '@asgardeo/browser';
 import AuthAPI from './__temp__/api';
 import getMeOrganizations from './api/getMeOrganizations';
@@ -328,7 +329,7 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
     sessionId?: string,
     onSignInSuccess?: (afterSignInUrl: string) => void,
   ): Promise<User>;
-  override async signIn(...args: any[]): Promise<User> {
+  override async signIn(...args: any[]): Promise<User | EmbeddedSignInFlowResponseV2> {
     return this.withLoading(async () => {
       const arg1 = args[0];
       const arg2 = args[1];

packages/react/src/components/adapters/CheckboxInput.tsx

@@ -32,18 +32,18 @@ const CheckboxInput: FC<BaseSignUpOptionProps> = ({
   onInputChange,
   inputClassName,
 }) => {
-  const config = component.config || {};
-  const fieldName = config['identifier'] || config['name'] || component.id;
-  const value = formValues[fieldName] || '';
-  const error = touchedFields[fieldName] ? formErrors[fieldName] : undefined;
+  const config: Record<string, unknown> = component.config || {};
+  const fieldName: string = (config['identifier'] as string) || (config['name'] as string) || component.id;
+  const value: string | boolean = (formValues[fieldName] as string) || false;
+  const error: string | undefined = touchedFields[fieldName] ? formErrors[fieldName] : undefined;
 
   return createField({
     type: FieldType.Checkbox,
     name: fieldName,
-    label: config['label'] || '',
-    placeholder: config['placeholder'] || '',
-    required: config['required'] || false,
-    value,
+    label: (config['label'] as string) || '',
+    placeholder: (config['placeholder'] as string) || '',
+    required: (config['required'] as boolean) || false,
+    value: value as string,
     error,
     onChange: (newValue: string) => onInputChange(fieldName, newValue),
     className: inputClassName,

packages/react/src/components/adapters/DateInput.tsx

@@ -32,17 +32,17 @@ const DateInput: FC<BaseSignUpOptionProps> = ({
   onInputChange,
   inputClassName,
 }) => {
-  const config = component.config || {};
-  const fieldName = config['identifier'] || config['name'] || component.id;
-  const value = formValues[fieldName] || '';
-  const error = touchedFields[fieldName] ? formErrors[fieldName] : undefined;
+  const config: Record<string, unknown> = component.config || {};
+  const fieldName: string = (config['identifier'] as string) || (config['name'] as string) || component.id;
+  const value: string = formValues[fieldName] || '';
+  const error: string | undefined = touchedFields[fieldName] ? formErrors[fieldName] : undefined;
 
   return createField({
     type: FieldType.Date,
     name: fieldName,
-    label: config['label'] || '',
-    placeholder: config['placeholder'] || '',
-    required: config['required'] || false,
+    label: (config['label'] as string) || '',
+    placeholder: (config['placeholder'] as string) || '',
+    required: (config['required'] as boolean) || false,
     value,
     error,
     onChange: (newValue: string) => onInputChange(fieldName, newValue),

packages/react/src/components/adapters/DividerComponent.tsx

@@ -26,9 +26,9 @@ import useTheme from '../../contexts/Theme/useTheme';
  */
 const DividerComponent: FC<BaseSignUpOptionProps> = ({component}) => {
   const {theme} = useTheme();
-  const config = component.config || {};
-  const text = config['text'] || '';
-  const variant = component.variant?.toLowerCase() || 'horizontal';
+  const config: Record<string, unknown> = component.config || {};
+  const text = (config['text'] as string) || '';
+  const variant = (component.variant?.toLowerCase() as string) || 'horizontal';
 
   return (
     <Divider