From 6fcfb9f0d999d9c08ac012ee97c0971a381d02d6 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 1 Jul 2025 08:50:07 +0530
Subject: [PATCH 01/21] chore(nextjs): add `B2B` components

---
 packages/nextjs/package.json                  |   8 -
 packages/nextjs/src/AsgardeoNextClient.ts     | 122 ++++++++-
 .../CreateOrganization/CreateOrganization.tsx | 151 ++++++++++++
 .../Organization/Organization.tsx             |  83 +++++++
 .../OrganizationList/OrganizationList.tsx     | 233 ++++++++++++++++++
 .../OrganizationProfile.tsx                   | 221 +++++++++++++++++
 .../OrganizationSwitcher.tsx                  | 198 +++++++++++++++
 .../contexts/Asgardeo/AsgardeoProvider.tsx    |  70 +++++-
 packages/nextjs/src/index.ts                  |   9 +
 .../nextjs/src/server/AsgardeoProvider.tsx    |  11 +-
 .../actions/createOrganizationAction.ts       |  43 ++++
 .../actions/getCurrentOrganizationAction.ts   |  43 ++++
 .../server/actions/getOrganizationAction.ts   |  43 ++++
 .../server/actions/getOrganizationsAction.ts  |  43 ++++
 .../actions/switchOrganizationAction.ts       |  43 ++++
 .../OrganizationProfile.tsx                   |  31 +--
 .../UserProfile/BaseUserProfile.tsx           |   2 +-
 packages/react/src/index.ts                   |   2 +
 .../Header/AuthenticatedActions.tsx           |   4 +-
 19 files changed, 1305 insertions(+), 55 deletions(-)
 create mode 100644 packages/nextjs/src/client/components/presentation/CreateOrganization/CreateOrganization.tsx
 create mode 100644 packages/nextjs/src/client/components/presentation/Organization/Organization.tsx
 create mode 100644 packages/nextjs/src/client/components/presentation/OrganizationList/OrganizationList.tsx
 create mode 100644 packages/nextjs/src/client/components/presentation/OrganizationProfile/OrganizationProfile.tsx
 create mode 100644 packages/nextjs/src/client/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
 create mode 100644 packages/nextjs/src/server/actions/createOrganizationAction.ts
 create mode 100644 packages/nextjs/src/server/actions/getCurrentOrganizationAction.ts
 create mode 100644 packages/nextjs/src/server/actions/getOrganizationAction.ts
 create mode 100644 packages/nextjs/src/server/actions/getOrganizationsAction.ts
 create mode 100644 packages/nextjs/src/server/actions/switchOrganizationAction.ts

diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
index b6e163ab7..c5e743da0 100644
--- a/packages/nextjs/package.json
+++ b/packages/nextjs/package.json
@@ -22,14 +22,6 @@
     ".": {
       "import": "./dist/index.js",
       "require": "./dist/cjs/index.js"
-    },
-    "./middleware": {
-      "import": "./dist/middleware/index.js",
-      "require": "./dist/cjs/middleware/index.js"
-    },
-    "./server": {
-      "import": "./dist/server/index.js",
-      "require": "./dist/cjs/server/index.js"
     }
   },
   "files": [
diff --git a/packages/nextjs/src/AsgardeoNextClient.ts b/packages/nextjs/src/AsgardeoNextClient.ts
index 9c8de194d..426d51499 100644
--- a/packages/nextjs/src/AsgardeoNextClient.ts
+++ b/packages/nextjs/src/AsgardeoNextClient.ts
@@ -40,6 +40,12 @@ import {
   generateFlattenedUserProfile,
   updateMeProfile,
   executeEmbeddedSignUpFlow,
+  getMeOrganizations,
+  IdToken,
+  createOrganization,
+  CreateOrganizationPayload,
+  getOrganization,
+  OrganizationDetails,
 } from '@asgardeo/node';
 import {NextRequest, NextResponse} from 'next/server';
 import {AsgardeoNextConfig} from './models/config';
@@ -206,16 +212,120 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
     }
   }
 
-  override async getOrganizations(): Promise<Organization[]> {
-    throw new Error('Method not implemented.');
+  async createOrganization(payload: CreateOrganizationPayload, userId?: string): Promise<Organization> {
+    try {
+      const configData = await this.asgardeo.getConfigData();
+      const baseUrl: string = configData?.baseUrl as string;
+
+      return await createOrganization({
+        payload,
+        baseUrl,
+        headers: {
+          Authorization: `Bearer ${await this.getAccessToken(userId)}`,
+        },
+      });
+    } catch (error) {
+      throw new AsgardeoRuntimeError(
+        'Failed to create organization.',
+        'AsgardeoReactClient-createOrganization-RuntimeError-001',
+        'nextjs',
+        'An error occurred while creating the organization. Please check your configuration and network connection.',
+      );
+    }
   }
 
-  override switchOrganization(organization: Organization): Promise<void> {
-    throw new Error('Method not implemented.');
+  async getOrganization(organizationId: string, userId?: string): Promise<OrganizationDetails> {
+    try {
+      const configData = await this.asgardeo.getConfigData();
+      const baseUrl: string = configData?.baseUrl as string;
+
+      return await getOrganization({
+        baseUrl,
+        organizationId,
+        headers: {
+          Authorization: `Bearer ${await this.getAccessToken(userId)}`,
+        },
+      });
+    } catch (error) {
+      throw new AsgardeoRuntimeError(
+        `Failed to fetch the organization details of ${organizationId}: ${String(error)}`,
+        'AsgardeoReactClient-getOrganization-RuntimeError-001',
+        'nextjs',
+        `An error occurred while fetching the organization with the id: ${organizationId}.`,
+      );
+    }
   }
 
-  override getCurrentOrganization(): Promise<Organization | null> {
-    throw new Error('Method not implemented.');
+  override async getOrganizations(userId?: string): Promise<Organization[]> {
+    try {
+      const configData = await this.asgardeo.getConfigData();
+      const baseUrl: string = configData?.baseUrl as string;
+
+      const organizations = await getMeOrganizations({
+        baseUrl,
+        headers: {
+          Authorization: `Bearer ${await this.getAccessToken(userId)}`,
+        },
+      });
+
+      return organizations;
+    } catch (error) {
+      throw new AsgardeoRuntimeError(
+        'Failed to fetch organizations.',
+        'react-AsgardeoReactClient-GetOrganizationsError-001',
+        'react',
+        'An error occurred while fetching the organizations associated with the user.',
+      );
+    }
+  }
+
+  override async getCurrentOrganization(userId?: string): Promise<Organization | null> {
+    const idToken: IdToken = await this.asgardeo.getDecodedIdToken(userId);
+
+    return {
+      orgHandle: idToken?.org_handle as string,
+      name: idToken?.org_name as string,
+      id: idToken?.org_id as string,
+    };
+  }
+
+  override async switchOrganization(organization: Organization, userId?: string): Promise<void> {
+    try {
+      const configData = await this.asgardeo.getConfigData();
+      const scopes = configData?.scopes;
+
+      if (!organization.id) {
+        throw new AsgardeoRuntimeError(
+          'Organization ID is required for switching organizations',
+          'react-AsgardeoReactClient-ValidationError-001',
+          'react',
+          'The organization object must contain a valid ID to perform the organization switch.',
+        );
+      }
+
+      const exchangeConfig = {
+        attachToken: false,
+        data: {
+          client_id: '{{clientId}}',
+          grant_type: 'organization_switch',
+          scope: '{{scopes}}',
+          switching_organization: organization.id,
+          token: '{{accessToken}}',
+        },
+        id: 'organization-switch',
+        returnsSession: true,
+        signInRequired: true,
+      };
+
+      await this.asgardeo.exchangeToken(exchangeConfig, userId);
+    } catch (error) {
+      throw new AsgardeoRuntimeError(
+        `Failed to switch organization: ${error instanceof Error ? error.message : String(error)}`,
+        'AsgardeoReactClient-RuntimeError-003',
+        'nextjs',
+        'An error occurred while switching to the specified organization. Please try again.',
+      );
+    }
   }
 
   override isLoading(): boolean {
diff --git a/packages/nextjs/src/client/components/presentation/CreateOrganization/CreateOrganization.tsx b/packages/nextjs/src/client/components/presentation/CreateOrganization/CreateOrganization.tsx
new file mode 100644
index 000000000..b111912c4
--- /dev/null
+++ b/packages/nextjs/src/client/components/presentation/CreateOrganization/CreateOrganization.tsx
@@ -0,0 +1,151 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+'use client';
+
+import {FC, ReactElement, useState} from 'react';
+
+import {BaseCreateOrganization, BaseCreateOrganizationProps, useOrganization} from '@asgardeo/react';
+import {CreateOrganizationPayload} from '@asgardeo/node';
+import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
+import createOrganizationAction from '../../../../server/actions/createOrganizationAction';
+import getSessionId from '../../../../server/actions/getSessionId';
+
+/**
+ * Props interface for the CreateOrganization component.
+ */
+export interface CreateOrganizationProps extends Omit<BaseCreateOrganizationProps, 'onSubmit' | 'loading' | 'error'> {
+  /**
+   * Fallback element to render when the user is not signed in.
+   */
+  fallback?: ReactElement;
+  /**
+   * Custom organization creation handler (will use default API if not provided).
+   */
+  onCreateOrganization?: (payload: CreateOrganizationPayload) => Promise<any>;
+}
+
+/**
+ * CreateOrganization component that provides organization creation functionality.
+ * This component automatically integrates with the Asgardeo and Organization contexts.
+ *
+ * @example
+ * ```tsx
+ * import { CreateOrganization } from '@asgardeo/react';
+ *
+ * // Basic usage - uses default API and contexts
+ * <CreateOrganization
+ *   onSuccess={(org) => console.log('Created:', org)}
+ *   onCancel={() => navigate('/organizations')}
+ * />
+ *
+ * // With custom organization creation handler
+ * <CreateOrganization
+ *   onCreateOrganization={async (payload) => {
+ *     const result = await myCustomAPI.createOrganization(payload);
+ *     return result;
+ *   }}
+ *   onSuccess={(org) => {
+ *     console.log('Organization created:', org.name);
+ *     // Custom success logic here
+ *   }}
+ * />
+ *
+ * // With fallback for unauthenticated users
+ * <CreateOrganization
+ *   fallback={<div>Please sign in to create an organization</div>}
+ * />
+ * ```
+ */
+export const CreateOrganization: FC<CreateOrganizationProps> = ({
+  onCreateOrganization,
+  fallback = <></>,
+  onSuccess,
+  defaultParentId,
+  ...props
+}: CreateOrganizationProps): ReactElement => {
+  const {isSignedIn, baseUrl} = useAsgardeo();
+  const {currentOrganization, revalidateOrganizations} = useOrganization();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Don't render if not authenticated
+  if (!isSignedIn && fallback) {
+    return fallback;
+  }
+
+  if (!isSignedIn) {
+    return <></>;
+  }
+
+  // Use current organization as parent if no defaultParentId provided
+  const parentId: string = defaultParentId || currentOrganization?.id || '';
+
+  const handleSubmit = async (payload: CreateOrganizationPayload): Promise<void> => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      let result: any;
+
+      if (onCreateOrganization) {
+        // Use the provided custom creation function
+        result = await onCreateOrganization(payload);
+      } else {
+        // Use the default API
+        if (!baseUrl) {
+          throw new Error('Base URL is required for organization creation');
+        }
+        result = await createOrganizationAction(
+          {
+            ...payload,
+            parentId,
+          },
+          (await getSessionId()) as string,
+        );
+      }
+
+      // Refresh organizations list to include the new organization
+      await revalidateOrganizations();
+
+      // Call success callback if provided
+      if (onSuccess) {
+        onSuccess(result);
+      }
+    } catch (createError) {
+      const errorMessage: string = createError instanceof Error ? createError.message : 'Failed to create organization';
+      setError(errorMessage);
+      throw createError; // Re-throw to allow form to handle it
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <BaseCreateOrganization
+      onSubmit={handleSubmit}
+      loading={loading}
+      error={error}
+      defaultParentId={parentId}
+      onSuccess={onSuccess}
+      {...props}
+    />
+  );
+};
+
+export default CreateOrganization;
diff --git a/packages/nextjs/src/client/components/presentation/Organization/Organization.tsx b/packages/nextjs/src/client/components/presentation/Organization/Organization.tsx
new file mode 100644
index 000000000..7cccc8c55
--- /dev/null
+++ b/packages/nextjs/src/client/components/presentation/Organization/Organization.tsx
@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+'use client';
+
+import {Organization as IOrganization} from '@asgardeo/node';
+import {FC, ReactElement, ReactNode} from 'react';
+import {BaseOrganization, BaseOrganizationProps, useOrganization} from '@asgardeo/react';
+
+/**
+ * Props for the Organization component.
+ * Extends BaseOrganizationProps but makes the organization prop optional since it will be obtained from useOrganization
+ */
+export interface OrganizationProps extends Omit<BaseOrganizationProps, 'organization'> {
+  /**
+   * Render prop that takes the organization object and returns a ReactNode.
+   * @param organization - The current organization object from Organization context.
+   * @returns A ReactNode to render.
+   */
+  children: (organization: IOrganization | null) => ReactNode;
+
+  /**
+   * Optional element to render when no organization is selected.
+   */
+  fallback?: ReactNode;
+}
+
+/**
+ * A component that uses render props to expose the current organization object.
+ * This component automatically retrieves the current organization from Organization context.
+ *
+ * @remarks This component is only supported in browser based React applications (CSR).
+ *
+ * @example
+ * ```tsx
+ * import { Organization } from '@asgardeo/auth-react';
+ *
+ * const App = () => {
+ *   return (
+ *     <Organization fallback={<p>No organization selected</p>}>
+ *       {(organization) => (
+ *         <div>
+ *           <h1>Current Organization: {organization.name}!</h1>
+ *           <p>ID: {organization.id}</p>
+ *           <p>Role: {organization.role}</p>
+ *           {organization.memberCount && (
+ *             <p>Members: {organization.memberCount}</p>
+ *           )}
+ *         </div>
+ *       )}
+ *     </Organization>
+ *   );
+ * }
+ * ```
+ */
+const Organization: FC<OrganizationProps> = ({children, fallback = null}): ReactElement => {
+  const {currentOrganization} = useOrganization();
+
+  return (
+    <BaseOrganization organization={currentOrganization} fallback={fallback}>
+      {children}
+    </BaseOrganization>
+  );
+};
+
+Organization.displayName = 'Organization';
+
+export default Organization;
diff --git a/packages/nextjs/src/client/components/presentation/OrganizationList/OrganizationList.tsx b/packages/nextjs/src/client/components/presentation/OrganizationList/OrganizationList.tsx
new file mode 100644
index 000000000..0ab5d680c
--- /dev/null
+++ b/packages/nextjs/src/client/components/presentation/OrganizationList/OrganizationList.tsx
@@ -0,0 +1,233 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+'use client';
+
+import {withVendorCSSClassPrefix} from '@asgardeo/node';
+import {FC, ReactElement, useEffect, useMemo, CSSProperties} from 'react';
+import {
+  BaseOrganizationListProps,
+  BaseOrganizationList,
+  useOrganization,
+  OrganizationWithSwitchAccess,
+} from '@asgardeo/react';
+
+/**
+ * Configuration options for the OrganizationList component.
+ */
+export interface OrganizationListConfig {
+  /**
+   * Whether to automatically fetch organizations on mount
+   */
+  autoFetch?: boolean;
+  /**
+   * Filter string for organizations
+   */
+  filter?: string;
+  /**
+   * Number of organizations to fetch per page
+   */
+  limit?: number;
+  /**
+   * Whether to include recursive organizations
+   */
+  recursive?: boolean;
+}
+
+/**
+ * Props interface for the OrganizationList component.
+ * Uses the enhanced OrganizationContext instead of the useOrganizations hook.
+ */
+export interface OrganizationListProps
+  extends Omit<
+      BaseOrganizationListProps,
+      'data' | 'error' | 'fetchMore' | 'hasMore' | 'isLoading' | 'isLoadingMore' | 'totalCount'
+    >,
+    OrganizationListConfig {
+  /**
+   * Function called when an organization is selected/clicked
+   */
+  onOrganizationSelect?: (organization: OrganizationWithSwitchAccess) => void;
+}
+
+/**
+ * OrganizationList component that provides organization listing functionality with pagination.
+ * This component uses the enhanced OrganizationContext, eliminating the polling issue and
+ * providing better integration with the existing context system.
+ *
+ * @example
+ * ```tsx
+ * import { OrganizationList } from '@asgardeo/react';
+ *
+ * // Basic usage
+ * <OrganizationList />
+ *
+ * // With custom limit and filter
+ * <OrganizationList
+ *   limit={20}
+ *   filter="active"
+ *   onOrganizationSelect={(org) => {
+ *     console.log('Selected organization:', org.name);
+ *   }}
+ * />
+ *
+ * // As a popup dialog
+ * <OrganizationList
+ *   mode="popup"
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   title="Select Organization"
+ * />
+ *
+ * // With custom organization renderer
+ * <OrganizationList
+ *   renderOrganization={(org) => (
+ *     <div key={org.id}>
+ *       <h3>{org.name}</h3>
+ *       <p>Can switch: {org.canSwitch ? 'Yes' : 'No'}</p>
+ *     </div>
+ *   )}
+ * />
+ * ```
+ */
+export const OrganizationList: FC<OrganizationListProps> = ({
+  autoFetch = true,
+  filter = '',
+  limit = 10,
+  onOrganizationSelect,
+  recursive = false,
+  ...baseProps
+}: OrganizationListProps): ReactElement => {
+  const {
+    paginatedOrganizations,
+    error,
+    fetchMore,
+    hasMore,
+    isLoading,
+    isLoadingMore,
+    totalCount,
+    fetchPaginatedOrganizations,
+  } = useOrganization();
+
+  // Auto-fetch organizations on mount or when parameters change
+  useEffect(() => {
+    if (autoFetch) {
+      fetchPaginatedOrganizations({
+        filter,
+        limit,
+        recursive,
+        reset: true,
+      });
+    }
+  }, [autoFetch, filter, limit, recursive, fetchPaginatedOrganizations]);
+
+  // Enhanced organization renderer that includes selection handler
+  const enhancedRenderOrganization = baseProps.renderOrganization
+    ? baseProps.renderOrganization
+    : onOrganizationSelect
+    ? (organization: OrganizationWithSwitchAccess, index: number) => (
+        <div
+          key={organization.id}
+          onClick={() => onOrganizationSelect(organization)}
+          style={{
+            border: '1px solid #e5e7eb',
+            borderRadius: '8px',
+            cursor: 'pointer',
+            display: 'flex',
+            justifyContent: 'space-between',
+            padding: '16px',
+            transition: 'all 0.2s',
+          }}
+          onMouseEnter={e => {
+            e.currentTarget.style.backgroundColor = '#f9fafb';
+            e.currentTarget.style.borderColor = '#d1d5db';
+          }}
+          onMouseLeave={e => {
+            e.currentTarget.style.backgroundColor = 'transparent';
+            e.currentTarget.style.borderColor = '#e5e7eb';
+          }}
+        >
+          <div>
+            <h3 style={{fontSize: '18px', fontWeight: 'bold', margin: '0 0 8px 0'}}>{organization.name}</h3>
+            <p style={{color: '#6b7280', fontSize: '14px', margin: '0'}}>Handle: {organization.orgHandle}</p>
+            <p style={{color: '#6b7280', fontSize: '14px', margin: '4px 0 0 0'}}>
+              Status:{' '}
+              <span style={{color: organization.status === 'ACTIVE' ? '#10b981' : '#ef4444'}}>
+                {organization.status}
+              </span>
+            </p>
+          </div>
+          <div style={{alignItems: 'center', display: 'flex'}}>
+            {organization.canSwitch ? (
+              <span
+                style={{
+                  backgroundColor: '#dcfce7',
+                  borderRadius: '16px',
+                  color: '#16a34a',
+                  fontSize: '12px',
+                  fontWeight: 'medium',
+                  padding: '4px 12px',
+                }}
+              >
+                Can Switch
+              </span>
+            ) : (
+              <span
+                style={{
+                  backgroundColor: '#fee2e2',
+                  borderRadius: '16px',
+                  color: '#dc2626',
+                  fontSize: '12px',
+                  fontWeight: 'medium',
+                  padding: '4px 12px',
+                }}
+              >
+                No Access
+              </span>
+            )}
+          </div>
+        </div>
+      )
+    : undefined;
+
+  const refreshHandler = async () => {
+    await fetchPaginatedOrganizations({
+      filter,
+      limit,
+      recursive,
+      reset: true,
+    });
+  };
+
+  return (
+    <BaseOrganizationList
+      data={paginatedOrganizations}
+      error={error}
+      fetchMore={fetchMore}
+      hasMore={hasMore}
+      isLoading={isLoading}
+      isLoadingMore={isLoadingMore}
+      onRefresh={refreshHandler}
+      renderOrganization={enhancedRenderOrganization}
+      totalCount={totalCount}
+      {...baseProps}
+    />
+  );
+};
+
+export default OrganizationList;
diff --git a/packages/nextjs/src/client/components/presentation/OrganizationProfile/OrganizationProfile.tsx b/packages/nextjs/src/client/components/presentation/OrganizationProfile/OrganizationProfile.tsx
new file mode 100644
index 000000000..702f0f1f0
--- /dev/null
+++ b/packages/nextjs/src/client/components/presentation/OrganizationProfile/OrganizationProfile.tsx
@@ -0,0 +1,221 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+'use client';
+
+import {FC, ReactElement, useEffect, useState} from 'react';
+import {BaseOrganizationProfile, BaseOrganizationProfileProps, useTranslation} from '@asgardeo/react';
+import {OrganizationDetails, getOrganization, updateOrganization, createPatchOperations} from '@asgardeo/node';
+import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
+import getOrganizationAction from '../../../../server/actions/getOrganizationAction';
+import getSessionId from '../../../../server/actions/getSessionId';
+
+/**
+ * Props for the OrganizationProfile component.
+ * Extends BaseOrganizationProfileProps but makes the organization prop optional
+ * since it will be fetched using the organizationId
+ */
+export type OrganizationProfileProps = Omit<BaseOrganizationProfileProps, 'organization' | 'mode'> & {
+  /**
+   * Component to show when there's an error loading organization data.
+   */
+  errorFallback?: ReactElement;
+
+  /**
+   * Component to show while loading organization data.
+   */
+  loadingFallback?: ReactElement;
+
+  /**
+   * Display mode for the component.
+   */
+  mode?: 'default' | 'popup';
+
+  /**
+   * Callback fired when the popup should be closed (only used in popup mode).
+   */
+  onOpenChange?: (open: boolean) => void;
+
+  /**
+   * Callback fired when the organization should be updated.
+   */
+  onUpdate?: (payload: any) => Promise<void>;
+
+  /**
+   * Whether the popup is open (only used in popup mode).
+   */
+  open?: boolean;
+
+  /**
+   * The ID of the organization to fetch and display.
+   */
+  organizationId: string;
+
+  /**
+   * Custom title for the popup dialog (only used in popup mode).
+   */
+  popupTitle?: string;
+};
+
+/**
+ * OrganizationProfile component displays organization information in a
+ * structured and styled format. It automatically fetches organization details
+ * using the provided organization ID and displays them using BaseOrganizationProfile.
+ *
+ * The component supports editing functionality, allowing users to modify organization
+ * fields inline. Updates are automatically synced with the backend via the SCIM2 API.
+ *
+ * This component is the React-specific implementation that automatically
+ * retrieves the organization data from Asgardeo API.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with editing enabled (default)
+ * <OrganizationProfile organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1" />
+ *
+ * // Read-only mode
+ * <OrganizationProfile
+ *   organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
+ *   editable={false}
+ * />
+ *
+ * // With card layout and custom fallbacks
+ * <OrganizationProfile
+ *   organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
+ *   cardLayout={true}
+ *   loadingFallback={<div>Loading organization...</div>}
+ *   errorFallback={<div>Failed to load organization</div>}
+ *   fallback={<div>No organization data available</div>}
+ * />
+ *
+ * // With custom fields configuration and update callback
+ * <OrganizationProfile
+ *   organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
+ *   fields={[
+ *     { key: 'id', label: 'Organization ID', editable: false },
+ *     { key: 'name', label: 'Organization Name', editable: true },
+ *     { key: 'description', label: 'Description', editable: true, render: (value) => value || 'No description' },
+ *     { key: 'created', label: 'Created Date', editable: false, render: (value) => new Date(value).toLocaleDateString() },
+ *     { key: 'lastModified', label: 'Last Modified Date', editable: false, render: (value) => new Date(value).toLocaleDateString() },
+ *     { key: 'attributes', label: 'Custom Attributes', editable: true }
+ *   ]}
+ *   onUpdate={async (payload) => {
+ *     console.log('Organization updated:', payload);
+ *     // payload contains the updated field values
+ *     // The component automatically converts these to patch operations
+ *   }}
+ * />
+ *
+ * // In popup mode
+ * <OrganizationProfile
+ *   organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
+ *   mode="popup"
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   popupTitle="Edit Organization Profile"
+ * />
+ * ```
+ */
+const OrganizationProfile: FC<OrganizationProfileProps> = ({
+  organizationId,
+  mode = 'default',
+  open = false,
+  onOpenChange,
+  onUpdate,
+  popupTitle,
+  loadingFallback = <div>Loading organization...</div>,
+  errorFallback = <div>Failed to load organization data</div>,
+  ...rest
+}: OrganizationProfileProps): ReactElement => {
+  const {baseUrl} = useAsgardeo();
+  const {t} = useTranslation();
+  const [organization, setOrganization] = useState<OrganizationDetails | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<boolean>(false);
+
+  const fetchOrganization = async () => {
+    if (!baseUrl || !organizationId) {
+      setLoading(false);
+      setError(true);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError(false);
+      const result = await getOrganizationAction(organizationId, (await getSessionId()) as string);
+
+      if (result.data?.organization) {
+        setOrganization(result.data.organization);
+
+        return;
+      }
+
+      setError(true);
+    } catch (err) {
+      console.error('Failed to fetch organization:', err);
+      setError(true);
+      setOrganization(null);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchOrganization();
+  }, [baseUrl, organizationId]);
+
+  const handleOrganizationUpdate = async (payload: any): Promise<void> => {
+    if (!baseUrl || !organizationId) return;
+
+    try {
+      // Convert payload to patch operations format
+      const operations = createPatchOperations(payload);
+
+      await updateOrganization({
+        baseUrl,
+        organizationId,
+        operations,
+      });
+      // Refetch organization data after update
+      await fetchOrganization();
+
+      // Call the optional onUpdate callback
+      if (onUpdate) {
+        await onUpdate(payload);
+      }
+    } catch (err) {
+      console.error('Failed to update organization:', err);
+      throw err;
+    }
+  };
+
+  return (
+    <BaseOrganizationProfile
+      organization={organization}
+      onUpdate={handleOrganizationUpdate}
+      mode={mode === 'popup' ? 'popup' : 'inline'}
+      open={open}
+      onOpenChange={onOpenChange}
+      title={popupTitle || t('organization.profile.title')}
+      {...rest}
+    />
+  );
+};
+
+export default OrganizationProfile;
diff --git a/packages/nextjs/src/client/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx b/packages/nextjs/src/client/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
new file mode 100644
index 000000000..b840e0052
--- /dev/null
+++ b/packages/nextjs/src/client/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
@@ -0,0 +1,198 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+'use client';
+
+import {FC, ReactElement, useState} from 'react';
+import {
+  BaseOrganizationSwitcher,
+  BaseOrganizationSwitcherProps,
+  BuildingAlt,
+  useOrganization,
+  useTranslation,
+} from '@asgardeo/react';
+import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
+import {CreateOrganization} from '../CreateOrganization/CreateOrganization';
+import OrganizationProfile from '../OrganizationProfile/OrganizationProfile';
+import OrganizationList from '../OrganizationList/OrganizationList';
+import {Organization} from '@asgardeo/node';
+
+/**
+ * Props interface for the OrganizationSwitcher component.
+ * Makes organizations optional since they'll be retrieved from OrganizationContext.
+ */
+export interface OrganizationSwitcherProps
+  extends Omit<BaseOrganizationSwitcherProps, 'organizations' | 'currentOrganization' | 'onOrganizationSwitch'> {
+  /**
+   * Optional override for current organization (will use context if not provided)
+   */
+  currentOrganization?: Organization;
+  /**
+   * Fallback element to render when the user is not signed in.
+   */
+  fallback?: ReactElement;
+  /**
+   * Optional callback for organization switch (will use context if not provided)
+   */
+  onOrganizationSwitch?: (organization: Organization) => Promise<void> | void;
+  /**
+   * Optional override for organizations list (will use context if not provided)
+   */
+  organizations?: Organization[];
+}
+
+/**
+ * OrganizationSwitcher component that provides organization switching functionality.
+ * This component automatically retrieves organizations from the OrganizationContext.
+ * You can also override the organizations, currentOrganization, and onOrganizationSwitch
+ * by passing them as props.
+ *
+ * @example
+ * ```tsx
+ * import { OrganizationSwitcher } from '@asgardeo/react';
+ *
+ * // Basic usage - uses OrganizationContext
+ * <OrganizationSwitcher />
+ *
+ * // With custom organization switch handler
+ * <OrganizationSwitcher
+ *   onOrganizationSwitch={(org) => {
+ *     console.log('Switching to:', org.name);
+ *     // Custom logic here
+ *   }}
+ * />
+ *
+ * // With fallback for unauthenticated users
+ * <OrganizationSwitcher
+ *   fallback={<div>Please sign in to view organizations</div>}
+ * />
+ * ```
+ */
+export const OrganizationSwitcher: FC<OrganizationSwitcherProps> = ({
+  currentOrganization: propCurrentOrganization,
+  fallback = <></>,
+  onOrganizationSwitch: propOnOrganizationSwitch,
+  organizations: propOrganizations,
+  ...props
+}: OrganizationSwitcherProps): ReactElement => {
+  const {isSignedIn} = useAsgardeo();
+  const {
+    currentOrganization: contextCurrentOrganization,
+    organizations: contextOrganizations,
+    switchOrganization,
+    isLoading,
+    error,
+  } = useOrganization();
+  const [isCreateOrgOpen, setIsCreateOrgOpen] = useState(false);
+  const [isProfileOpen, setIsProfileOpen] = useState(false);
+  const [isOrganizationListOpen, setIsOrganizationListOpen] = useState(false);
+  const {t} = useTranslation();
+
+  if (!isSignedIn && fallback) {
+    return fallback;
+  }
+
+  if (!isSignedIn) {
+    return <></>;
+  }
+
+  const organizations: Organization[] = propOrganizations || contextOrganizations || [];
+  const currentOrganization: Organization = propCurrentOrganization || (contextCurrentOrganization as Organization);
+  const onOrganizationSwitch: (organization: Organization) => void = propOnOrganizationSwitch || switchOrganization;
+
+  const handleManageOrganizations = (): void => {
+    setIsOrganizationListOpen(true);
+  };
+
+  const handleManageOrganization = (): void => {
+    setIsProfileOpen(true);
+  };
+
+  const defaultMenuItems: Array<{icon?: ReactElement; label: string; onClick: () => void}> = [];
+
+  if (currentOrganization) {
+    defaultMenuItems.push({
+      icon: <BuildingAlt />,
+      label: t('organization.switcher.manage.organizations'),
+      onClick: handleManageOrganizations,
+    });
+  }
+
+  defaultMenuItems.push({
+    icon: (
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M12 5v14m-7-7h14" />
+      </svg>
+    ),
+    label: t('organization.switcher.create.organization'),
+    onClick: (): void => setIsCreateOrgOpen(true),
+  });
+
+  const menuItems = props.menuItems ? [...defaultMenuItems, ...props.menuItems] : defaultMenuItems;
+
+  return (
+    <>
+      <BaseOrganizationSwitcher
+        organizations={organizations}
+        currentOrganization={currentOrganization}
+        onOrganizationSwitch={onOrganizationSwitch as any}
+        loading={isLoading}
+        error={error as any}
+        menuItems={menuItems}
+        onManageProfile={handleManageOrganization}
+        {...props}
+      />
+      <CreateOrganization
+        mode="popup"
+        open={isCreateOrgOpen}
+        onOpenChange={setIsCreateOrgOpen}
+        onSuccess={(org: Organization) => {
+          if (org && onOrganizationSwitch) {
+            onOrganizationSwitch(org);
+          }
+          setIsCreateOrgOpen(false);
+        }}
+      />
+      {currentOrganization && (
+        <OrganizationProfile
+          organizationId={currentOrganization.id}
+          mode="popup"
+          open={isProfileOpen}
+          onOpenChange={setIsProfileOpen}
+          cardLayout={true}
+          loadingFallback={<div>{t('organization.profile.loading')}</div>}
+          errorFallback={<div>{t('organization.profile.error')}</div>}
+        />
+      )}
+      <OrganizationList
+        mode="popup"
+        open={isOrganizationListOpen}
+        onOpenChange={setIsOrganizationListOpen}
+        title={t('organization.switcher.manage.organizations')}
+        onOrganizationSelect={(organization: Organization) => {
+          if (onOrganizationSwitch) {
+            onOrganizationSwitch(organization);
+          }
+          setIsOrganizationListOpen(false);
+        }}
+      />
+    </>
+  );
+};
+
+export default OrganizationSwitcher;
diff --git a/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx
index cc0dcbe28..0b48ee20e 100644
--- a/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx
+++ b/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -19,16 +19,28 @@
 'use client';
 
 import {
+  AsgardeoRuntimeError,
   EmbeddedFlowExecuteRequestConfig,
   EmbeddedFlowExecuteRequestPayload,
   EmbeddedSignInFlowHandleRequestPayload,
+  Organization,
   User,
   UserProfile,
 } from '@asgardeo/node';
-import {I18nProvider, FlowProvider, UserProvider, ThemeProvider, AsgardeoProviderProps} from '@asgardeo/react';
-import {FC, PropsWithChildren, useEffect, useMemo, useState} from 'react';
+import {
+  I18nProvider,
+  FlowProvider,
+  UserProvider,
+  ThemeProvider,
+  AsgardeoProviderProps,
+  OrganizationProvider,
+} from '@asgardeo/react';
+import {FC, PropsWithChildren, RefObject, useEffect, useMemo, useRef, useState} from 'react';
 import {useRouter, useSearchParams} from 'next/navigation';
 import AsgardeoContext, {AsgardeoContextProps} from './AsgardeoContext';
+import getOrganizationsAction from '../../../server/actions/getOrganizationsAction';
+import getSessionId from '../../../server/actions/getSessionId';
+import switchOrganizationAction from '../../../server/actions/switchOrganizationAction';
 
 /**
  * Props interface of {@link AsgardeoClientProvider}
@@ -38,9 +50,14 @@ export type AsgardeoClientProviderProps = Partial<Omit<AsgardeoProviderProps, 'b
     signOut: AsgardeoContextProps['signOut'];
     signIn: AsgardeoContextProps['signIn'];
     signUp: AsgardeoContextProps['signUp'];
-    handleOAuthCallback: (code: string, state: string, sessionState?: string) => Promise<{success: boolean; error?: string; redirectUrl?: string}>;
+    handleOAuthCallback: (
+      code: string,
+      state: string,
+      sessionState?: string,
+    ) => Promise<{success: boolean; error?: string; redirectUrl?: string}>;
     isSignedIn: boolean;
     userProfile: UserProfile;
+    currentOrganization: Organization;
     user: User | null;
   };
 
@@ -57,7 +74,9 @@ const AsgardeoClientProvider: FC<PropsWithChildren<AsgardeoClientProviderProps>>
   signUpUrl,
   user,
   userProfile,
+  currentOrganization,
 }: PropsWithChildren<AsgardeoClientProviderProps>) => {
+  const reRenderCheckRef: RefObject<boolean> = useRef(false);
   const router = useRouter();
   const searchParams = useSearchParams();
   const [isDarkMode, setIsDarkMode] = useState(false);
@@ -81,7 +100,11 @@ const AsgardeoClientProvider: FC<PropsWithChildren<AsgardeoClientProviderProps>>
         if (error) {
           console.error('[AsgardeoClientProvider] OAuth error:', error, errorDescription);
           // Redirect to sign-in page with error
-          router.push(`/signin?error=${encodeURIComponent(error)}&error_description=${encodeURIComponent(errorDescription || '')}`);
+          router.push(
+            `/signin?error=${encodeURIComponent(error)}&error_description=${encodeURIComponent(
+              errorDescription || '',
+            )}`,
+          );
           return;
         }
 
@@ -100,7 +123,11 @@ const AsgardeoClientProvider: FC<PropsWithChildren<AsgardeoClientProviderProps>>
               window.location.reload();
             }
           } else {
-            router.push(`/signin?error=authentication_failed&error_description=${encodeURIComponent(result.error || 'Authentication failed')}`);
+            router.push(
+              `/signin?error=authentication_failed&error_description=${encodeURIComponent(
+                result.error || 'Authentication failed',
+              )}`,
+            );
           }
         }
       } catch (error) {
@@ -206,6 +233,25 @@ const AsgardeoClientProvider: FC<PropsWithChildren<AsgardeoClientProviderProps>>
     }
   };
 
+  const switchOrganization = async (organization: Organization): Promise<void> => {
+    try {
+      await switchOrganizationAction(organization, (await getSessionId()) as string);
+
+      // if (await asgardeo.isSignedIn()) {
+      //   setUser(await asgardeo.getUser());
+      //   setUserProfile(await asgardeo.getUserProfile());
+      //   setCurrentOrganization(await asgardeo.getCurrentOrganization());
+      // }
+    } catch (error) {
+      throw new AsgardeoRuntimeError(
+        `Failed to switch organization: ${error instanceof Error ? error.message : String(error)}`,
+        'AsgardeoClientProvider-switchOrganization-RuntimeError-001',
+        'nextjs',
+        'An error occurred while switching to the specified organization.',
+      );
+    }
+  };
+
   const contextValue = useMemo(
     () => ({
       baseUrl,
@@ -226,7 +272,19 @@ const AsgardeoClientProvider: FC<PropsWithChildren<AsgardeoClientProviderProps>>
       <I18nProvider preferences={preferences?.i18n}>
         <ThemeProvider theme={preferences?.theme?.overrides} defaultColorScheme={isDarkMode ? 'dark' : 'light'}>
           <FlowProvider>
-            <UserProvider profile={userProfile}>{children}</UserProvider>
+            <UserProvider profile={userProfile}>
+              <OrganizationProvider
+                getOrganizations={async () => {
+                  const result = await getOrganizationsAction((await getSessionId()) as string);
+
+                  return result?.data?.organizations || [];
+                }}
+                currentOrganization={currentOrganization}
+                onOrganizationSwitch={switchOrganization}
+              >
+                {children}
+              </OrganizationProvider>
+            </UserProvider>
           </FlowProvider>
         </ThemeProvider>
       </I18nProvider>
diff --git a/packages/nextjs/src/index.ts b/packages/nextjs/src/index.ts
index ae8cccb69..40ceb8449 100644
--- a/packages/nextjs/src/index.ts
+++ b/packages/nextjs/src/index.ts
@@ -26,6 +26,15 @@ export {default as isSignedIn} from './server/actions/isSignedIn';
 
 export {default as handleOAuthCallback} from './server/actions/handleOAuthCallbackAction';
 
+export {default as CreateOrganization} from './client/components/presentation/CreateOrganization/CreateOrganization';
+export {CreateOrganizationProps} from './client/components/presentation/CreateOrganization/CreateOrganization';
+
+export {default as OrganizationProfile} from './client/components/presentation/OrganizationProfile/OrganizationProfile';
+export {OrganizationProfileProps} from './client/components/presentation/OrganizationProfile/OrganizationProfile';
+
+export {default as OrganizationSwitcher} from './client/components/presentation/OrganizationSwitcher/OrganizationSwitcher';
+export {OrganizationSwitcherProps} from './client/components/presentation/OrganizationSwitcher/OrganizationSwitcher';
+
 export {default as SignedIn} from './client/components/control/SignedIn/SignedIn';
 export {SignedInProps} from './client/components/control/SignedIn/SignedIn';
 
diff --git a/packages/nextjs/src/server/AsgardeoProvider.tsx b/packages/nextjs/src/server/AsgardeoProvider.tsx
index 21efda1d6..faf2980b2 100644
--- a/packages/nextjs/src/server/AsgardeoProvider.tsx
+++ b/packages/nextjs/src/server/AsgardeoProvider.tsx
@@ -17,7 +17,7 @@
  */
 
 import {FC, PropsWithChildren, ReactElement} from 'react';
-import {AsgardeoRuntimeError, User, UserProfile} from '@asgardeo/node';
+import {AsgardeoRuntimeError, Organization, User, UserProfile} from '@asgardeo/node';
 import AsgardeoClientProvider, {AsgardeoClientProviderProps} from '../client/contexts/Asgardeo/AsgardeoProvider';
 import AsgardeoNextClient from '../AsgardeoNextClient';
 import signInAction from './actions/signInAction';
@@ -30,6 +30,7 @@ import getUserProfileAction from './actions/getUserProfileAction';
 import signUpAction from './actions/signUpAction';
 import handleOAuthCallbackAction from './actions/handleOAuthCallbackAction';
 import {AsgardeoProviderProps} from '@asgardeo/react';
+import getCurrentOrganizationAction from './actions/getCurrentOrganizationAction';
 
 /**
  * Props interface of {@link AsgardeoServerProvider}
@@ -88,13 +89,20 @@ const AsgardeoServerProvider: FC<PropsWithChildren<AsgardeoServerProviderProps>>
     profile: {},
     flattenedProfile: {},
   };
+  let currentOrganization: Organization = {
+    id: '',
+    name: '',
+    orgHandle: '',
+  };
 
   if (_isSignedIn) {
     const userResponse = await getUserAction(sessionId);
     const userProfileResponse = await getUserProfileAction(sessionId);
+    const currentOrganizationResponse = await getCurrentOrganizationAction(sessionId);
 
     user = userResponse.data?.user || {};
     userProfile = userProfileResponse.data?.userProfile;
+    currentOrganization = currentOrganizationResponse?.data?.organization as Organization;
   }
 
   return (
@@ -109,6 +117,7 @@ const AsgardeoServerProvider: FC<PropsWithChildren<AsgardeoServerProviderProps>>
       preferences={config.preferences}
       clientId={config.clientId}
       user={user}
+      currentOrganization={currentOrganization}
       userProfile={userProfile}
       isSignedIn={_isSignedIn}
     >
diff --git a/packages/nextjs/src/server/actions/createOrganizationAction.ts b/packages/nextjs/src/server/actions/createOrganizationAction.ts
new file mode 100644
index 000000000..83a1b0fc3
--- /dev/null
+++ b/packages/nextjs/src/server/actions/createOrganizationAction.ts
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+'use server';
+
+import {CreateOrganizationPayload, Organization} from '@asgardeo/node';
+import AsgardeoNextClient from '../../AsgardeoNextClient';
+
+/**
+ * Server action to create an organization.
+ */
+const createOrganizationAction = async (payload: CreateOrganizationPayload, sessionId: string) => {
+  try {
+    const client = AsgardeoNextClient.getInstance();
+    const organization: Organization = await client.createOrganization(payload, sessionId);
+    return {success: true, data: {organization}, error: null};
+  } catch (error) {
+    return {
+      success: false,
+      data: {
+        user: {},
+      },
+      error: 'Failed to create organization',
+    };
+  }
+};
+
+export default createOrganizationAction;
diff --git a/packages/nextjs/src/server/actions/getCurrentOrganizationAction.ts b/packages/nextjs/src/server/actions/getCurrentOrganizationAction.ts
new file mode 100644
index 000000000..bd08d9c7a
--- /dev/null
+++ b/packages/nextjs/src/server/actions/getCurrentOrganizationAction.ts
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+'use server';
+
+import {Organization, OrganizationDetails} from '@asgardeo/node';
+import AsgardeoNextClient from '../../AsgardeoNextClient';
+
+/**
+ * Server action to create an organization.
+ */
+const getCurrentOrganizationAction = async (sessionId: string) => {
+  try {
+    const client = AsgardeoNextClient.getInstance();
+    const organization: Organization = await client.getCurrentOrganization(sessionId) as Organization;
+    return {success: true, data: {organization}, error: null};
+  } catch (error) {
+    return {
+      success: false,
+      data: {
+        user: {},
+      },
+      error: 'Failed to get the current organization',
+    };
+  }
+};
+
+export default getCurrentOrganizationAction;
diff --git a/packages/nextjs/src/server/actions/getOrganizationAction.ts b/packages/nextjs/src/server/actions/getOrganizationAction.ts
new file mode 100644
index 000000000..e5eb99d60
--- /dev/null
+++ b/packages/nextjs/src/server/actions/getOrganizationAction.ts
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+'use server';
+
+import {OrganizationDetails} from '@asgardeo/node';
+import AsgardeoNextClient from '../../AsgardeoNextClient';
+
+/**
+ * Server action to create an organization.
+ */
+const getOrganizationAction = async (organizationId: string, sessionId: string) => {
+  try {
+    const client = AsgardeoNextClient.getInstance();
+    const organization: OrganizationDetails = await client.getOrganization(organizationId, sessionId);
+    return {success: true, data: {organization}, error: null};
+  } catch (error) {
+    return {
+      success: false,
+      data: {
+        user: {},
+      },
+      error: 'Failed to get organization',
+    };
+  }
+};
+
+export default getOrganizationAction;
diff --git a/packages/nextjs/src/server/actions/getOrganizationsAction.ts b/packages/nextjs/src/server/actions/getOrganizationsAction.ts
new file mode 100644
index 000000000..16c878071
--- /dev/null
+++ b/packages/nextjs/src/server/actions/getOrganizationsAction.ts
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+'use server';
+
+import {Organization} from '@asgardeo/node';
+import AsgardeoNextClient from '../../AsgardeoNextClient';
+
+/**
+ * Server action to get organizations.
+ */
+const getOrganizationsAction = async (sessionId: string) => {
+  try {
+    const client = AsgardeoNextClient.getInstance();
+    const organizations: Organization[] = await client.getOrganizations(sessionId);
+    return {success: true, data: {organizations}, error: null};
+  } catch (error) {
+    return {
+      success: false,
+      data: {
+        user: {},
+      },
+      error: 'Failed to get organizations',
+    };
+  }
+};
+
+export default getOrganizationsAction;
diff --git a/packages/nextjs/src/server/actions/switchOrganizationAction.ts b/packages/nextjs/src/server/actions/switchOrganizationAction.ts
new file mode 100644
index 000000000..9b049bacd
--- /dev/null
+++ b/packages/nextjs/src/server/actions/switchOrganizationAction.ts
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+'use server';
+
+import {Organization, OrganizationDetails} from '@asgardeo/node';
+import AsgardeoNextClient from '../../AsgardeoNextClient';
+
+/**
+ * Server action to create an organization.
+ */
+const switchOrganizationAction = async (organization: Organization, sessionId: string) => {
+  try {
+    const client = AsgardeoNextClient.getInstance();
+    await client.switchOrganization(organization, sessionId);
+    return {success: true, error: null};
+  } catch (error) {
+    return {
+      success: false,
+      data: {
+        user: {},
+      },
+      error: 'Failed to switch to organization',
+    };
+  }
+};
+
+export default switchOrganizationAction;
diff --git a/packages/react/src/components/presentation/OrganizationProfile/OrganizationProfile.tsx b/packages/react/src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
index e7f6eb0be..9c75d0665 100644
--- a/packages/react/src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
+++ b/packages/react/src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
@@ -23,7 +23,6 @@ import getOrganization from '../../../api/getOrganization';
 import updateOrganization, {createPatchOperations} from '../../../api/updateOrganization';
 import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
 import useTranslation from '../../../hooks/useTranslation';
-import {Dialog, DialogContent, DialogHeading} from '../../primitives/Popover/Popover';
 
 /**
  * Props for the OrganizationProfile component.
@@ -201,33 +200,7 @@ const OrganizationProfile: FC<OrganizationProfileProps> = ({
     }
   };
 
-  if (loading) {
-    return mode === 'popup' ? (
-      <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent>
-          <DialogHeading>{popupTitle || t('organization.profile.title')}</DialogHeading>
-          <div style={{padding: '1rem'}}>{loadingFallback}</div>
-        </DialogContent>
-      </Dialog>
-    ) : (
-      loadingFallback
-    );
-  }
-
-  if (error) {
-    return mode === 'popup' ? (
-      <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent>
-          <DialogHeading>{popupTitle || t('organization.profile.title')}</DialogHeading>
-          <div style={{padding: '1rem'}}>{errorFallback}</div>
-        </DialogContent>
-      </Dialog>
-    ) : (
-      errorFallback
-    );
-  }
-
-  const profileContent = (
+  return (
     <BaseOrganizationProfile
       organization={organization}
       onUpdate={handleOrganizationUpdate}
@@ -238,8 +211,6 @@ const OrganizationProfile: FC<OrganizationProfileProps> = ({
       {...rest}
     />
   );
-
-  return profileContent;
 };
 
 export default OrganizationProfile;
diff --git a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
index 6158b3ff5..15aa57444 100644
--- a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
+++ b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
@@ -692,7 +692,7 @@ const useStyles = () => {
         gap: `${theme.spacing.unit}px`,
         overflow: 'hidden',
         minHeight: '32px',
-        '& input, & .MuiInputBase-root': {
+        '& input': {
           height: '32px',
           margin: 0,
         },
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index d255ba4ba..a3e9bc784 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -239,6 +239,8 @@ export {default as LogOut} from './components/primitives/Icons/LogOut';
 export {createField, FieldFactory, validateFieldValue} from './components/factories/FieldFactory';
 export * from './components/factories/FieldFactory';
 
+export {default as BuildingAlt} from './components/primitives/Icons/BuildingAlt';
+
 export type {FlowStep, FlowMessage, FlowContextValue} from './contexts/Flow/FlowContext';
 
 export type {FlowProviderProps} from './contexts/Flow/FlowProvider';
diff --git a/samples/teamspace-nextjs/components/Header/AuthenticatedActions.tsx b/samples/teamspace-nextjs/components/Header/AuthenticatedActions.tsx
index 48fe0595c..0d4821511 100644
--- a/samples/teamspace-nextjs/components/Header/AuthenticatedActions.tsx
+++ b/samples/teamspace-nextjs/components/Header/AuthenticatedActions.tsx
@@ -1,6 +1,4 @@
-import OrganizationSwitcher from './OrganizationSwitcher';
-// import UserDropdown from './UserDropdown';
-import {SignOutButton, UserDropdown} from '@asgardeo/nextjs';
+import {SignOutButton, UserDropdown, OrganizationSwitcher} from '@asgardeo/nextjs';
 
 interface AuthenticatedActionsProps {
   className?: string;

From 73fd44b95d9fb5bef375ba9e2f60a7a7fee35e67 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 1 Jul 2025 10:44:32 +0530
Subject: [PATCH 02/21] feat: implement theme detection and customization
 options

---
 packages/browser/src/index.ts                 |   7 +
 packages/browser/src/theme/themeDetection.ts  | 134 ++++++++++++++++++
 packages/javascript/src/index.ts              |   2 +-
 .../javascript/src/theme/themeDetection.ts    | 114 +++++++++++++++
 packages/javascript/src/theme/types.ts        |  15 +-
 .../components/presentation/SignIn/SignIn.tsx |   4 +-
 .../components/presentation/SignUp/SignUp.tsx |   4 +-
 .../src/components/primitives/Card/Card.tsx   |   1 -
 .../contexts/Asgardeo/AsgardeoProvider.tsx    |   2 +-
 .../src/contexts/Theme/ThemeProvider.tsx      |  75 +++++++++-
 samples/teamspace-react/src/main.tsx          |  14 +-
 11 files changed, 356 insertions(+), 16 deletions(-)
 create mode 100644 packages/browser/src/theme/themeDetection.ts
 create mode 100644 packages/javascript/src/theme/themeDetection.ts

diff --git a/packages/browser/src/index.ts b/packages/browser/src/index.ts
index 8ad5581a8..7702f3d93 100644
--- a/packages/browser/src/index.ts
+++ b/packages/browser/src/index.ts
@@ -51,3 +51,10 @@ export {default as AsgardeoBrowserClient} from './AsgardeoBrowserClient';
 
 // Re-export everything from the JavaScript package
 export * from '@asgardeo/javascript';
+
+export {
+  detectThemeMode,
+  createClassObserver,
+  createMediaQueryListener,
+  BrowserThemeDetection,
+} from './theme/themeDetection';
diff --git a/packages/browser/src/theme/themeDetection.ts b/packages/browser/src/theme/themeDetection.ts
new file mode 100644
index 000000000..5c47329ec
--- /dev/null
+++ b/packages/browser/src/theme/themeDetection.ts
@@ -0,0 +1,134 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {ThemeDetection, ThemeMode} from '@asgardeo/javascript';
+
+/**
+ * Extended theme detection config that includes DOM-specific options
+ */
+export interface BrowserThemeDetection extends ThemeDetection {
+  /**
+   * The element to observe for class changes
+   * @default document.documentElement (html element)
+   */
+  targetElement?: HTMLElement;
+}
+
+/**
+ * Detects the current theme mode based on the specified method
+ */
+export const detectThemeMode = (mode: ThemeMode, config: BrowserThemeDetection = {}): 'light' | 'dark' => {
+  const {
+    darkClass = 'dark',
+    lightClass = 'light',
+    targetElement = typeof document !== 'undefined' ? document.documentElement : null,
+  } = config;
+
+  if (mode === 'light') return 'light';
+  if (mode === 'dark') return 'dark';
+
+  if (mode === 'system') {
+    if (typeof window !== 'undefined' && window.matchMedia) {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    return 'light';
+  }
+
+  if (mode === 'class') {
+    if (!targetElement) {
+      console.warn('ThemeDetection: targetElement is required for class-based detection, falling back to light mode');
+      return 'light';
+    }
+
+    const classList = targetElement.classList;
+
+    // Check for explicit dark class first
+    if (classList.contains(darkClass)) {
+      return 'dark';
+    }
+
+    // Check for explicit light class
+    if (classList.contains(lightClass)) {
+      return 'light';
+    }
+
+    // If neither class is present, default to light
+    return 'light';
+  }
+
+  return 'light';
+};
+
+/**
+ * Creates a MutationObserver to watch for class changes on the target element
+ */
+export const createClassObserver = (
+  targetElement: HTMLElement,
+  callback: (isDark: boolean) => void,
+  config: BrowserThemeDetection = {},
+): MutationObserver => {
+  const {darkClass = 'dark', lightClass = 'light'} = config;
+
+  const observer = new MutationObserver(mutations => {
+    mutations.forEach(mutation => {
+      if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+        const classList = targetElement.classList;
+
+        if (classList.contains(darkClass)) {
+          callback(true);
+        } else if (classList.contains(lightClass)) {
+          callback(false);
+        }
+        // If neither class is present, we don't trigger the callback
+        // to avoid unnecessary re-renders
+      }
+    });
+  });
+
+  observer.observe(targetElement, {
+    attributes: true,
+    attributeFilter: ['class'],
+  });
+
+  return observer;
+};
+
+/**
+ * Creates a media query listener for system theme changes
+ */
+export const createMediaQueryListener = (callback: (isDark: boolean) => void): MediaQueryList | null => {
+  if (typeof window === 'undefined' || !window.matchMedia) {
+    return null;
+  }
+
+  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+  const handleChange = (e: MediaQueryListEvent) => {
+    callback(e.matches);
+  };
+
+  // Modern browsers
+  if (mediaQuery.addEventListener) {
+    mediaQuery.addEventListener('change', handleChange);
+  } else {
+    // Fallback for older browsers
+    mediaQuery.addListener(handleChange);
+  }
+
+  return mediaQuery;
+};
diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index 5813533f8..afebdd7f6 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -100,7 +100,7 @@ export {I18nBundle, I18nTranslations, I18nMetadata} from './models/i18n';
 export {default as AsgardeoJavaScriptClient} from './AsgardeoJavaScriptClient';
 
 export {default as createTheme} from './theme/createTheme';
-export {ThemeColors, ThemeConfig, Theme, ThemeMode} from './theme/types';
+export {ThemeColors, ThemeConfig, Theme, ThemeMode, ThemeDetection} from './theme/types';
 
 export {default as deepMerge} from './utils/deepMerge';
 export {default as extractUserClaimsFromIdToken} from './utils/extractUserClaimsFromIdToken';
diff --git a/packages/javascript/src/theme/themeDetection.ts b/packages/javascript/src/theme/themeDetection.ts
new file mode 100644
index 000000000..39a99cf06
--- /dev/null
+++ b/packages/javascript/src/theme/themeDetection.ts
@@ -0,0 +1,114 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {ThemeDetection, ThemeMode} from './types';
+
+/**
+ * Detects the current theme mode based on the specified method
+ */
+export const detectThemeMode = (mode: ThemeMode, config: ThemeDetection = {}): 'light' | 'dark' => {
+  const {
+    darkClass = 'dark',
+    lightClass = 'light',
+    targetElement = typeof document !== 'undefined' ? document.documentElement : null,
+  } = config;
+
+  if (typeof window === 'undefined') {
+    return 'light'; // Default to light mode on server side
+  }
+
+  switch (mode) {
+    case 'dark':
+      return 'dark';
+    case 'light':
+      return 'light';
+    case 'system':
+      return window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    case 'class':
+      if (!targetElement) {
+        console.warn('ThemeProvider: Target element not available for class-based theme detection');
+        return 'light';
+      }
+
+      // Check for dark class first, then light class, then default to light
+      if (targetElement.classList.contains(darkClass)) {
+        return 'dark';
+      }
+      if (targetElement.classList.contains(lightClass)) {
+        return 'light';
+      }
+
+      // If neither class is present, default to light
+      return 'light';
+    default:
+      return 'light';
+  }
+};
+
+/**
+ * Creates a MutationObserver to watch for class changes on the target element
+ */
+export const createClassObserver = (
+  targetElement: HTMLElement,
+  callback: (isDark: boolean) => void,
+  config: ThemeDetection = {},
+): MutationObserver => {
+  const {darkClass = 'dark', lightClass = 'light'} = config;
+
+  const observer = new MutationObserver(mutations => {
+    mutations.forEach(mutation => {
+      if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+        const classList = (mutation.target as HTMLElement).classList;
+        const isDark = classList.contains(darkClass);
+        callback(isDark);
+      }
+    });
+  });
+
+  observer.observe(targetElement, {
+    attributes: true,
+    attributeFilter: ['class'],
+  });
+
+  return observer;
+};
+
+/**
+ * Creates a media query listener for system theme changes
+ */
+export const createMediaQueryListener = (callback: (isDark: boolean) => void): MediaQueryList | null => {
+  if (typeof window === 'undefined' || !window.matchMedia) {
+    return null;
+  }
+
+  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+  const handleChange = (e: MediaQueryListEvent) => {
+    callback(e.matches);
+  };
+
+  // Use addEventListener if available, otherwise use deprecated addListener
+  if (mediaQuery.addEventListener) {
+    mediaQuery.addEventListener('change', handleChange);
+  } else {
+    // Fallback for older browsers
+    mediaQuery.addListener(handleChange);
+  }
+
+  return mediaQuery;
+};
diff --git a/packages/javascript/src/theme/types.ts b/packages/javascript/src/theme/types.ts
index 6d4cf5d61..db009a03a 100644
--- a/packages/javascript/src/theme/types.ts
+++ b/packages/javascript/src/theme/types.ts
@@ -72,4 +72,17 @@ export interface Theme extends ThemeConfig {
   cssVariables: Record<string, string>;
 }
 
-export type ThemeMode = 'light' | 'dark' | 'system';
+export type ThemeMode = 'light' | 'dark' | 'system' | 'class';
+
+export interface ThemeDetection {
+  /**
+   * The CSS class name to detect for dark mode (without the dot)
+   * @default 'dark'
+   */
+  darkClass?: string;
+  /**
+   * The CSS class name to detect for light mode (without the dot)
+   * @default 'light'
+   */
+  lightClass?: string;
+}
diff --git a/packages/react/src/components/presentation/SignIn/SignIn.tsx b/packages/react/src/components/presentation/SignIn/SignIn.tsx
index 8a170baea..da9c5b809 100644
--- a/packages/react/src/components/presentation/SignIn/SignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/SignIn.tsx
@@ -57,7 +57,7 @@ export type SignInProps = Pick<BaseSignInProps, 'className' | 'onSuccess' | 'onE
  * };
  * ```
  */
-const SignIn: FC<SignInProps> = ({className, size = 'medium', variant = 'outlined'}: SignInProps) => {
+const SignIn: FC<SignInProps> = ({className, size = 'medium', ...rest}: SignInProps) => {
   const {signIn, afterSignInUrl, isInitialized, isLoading} = useAsgardeo();
 
   /**
@@ -103,7 +103,7 @@ const SignIn: FC<SignInProps> = ({className, size = 'medium', variant = 'outline
       onSuccess={handleSuccess}
       className={className}
       size={size}
-      variant={variant}
+      {...rest}
     />
   );
 };
diff --git a/packages/react/src/components/presentation/SignUp/SignUp.tsx b/packages/react/src/components/presentation/SignUp/SignUp.tsx
index 187662327..69642e410 100644
--- a/packages/react/src/components/presentation/SignUp/SignUp.tsx
+++ b/packages/react/src/components/presentation/SignUp/SignUp.tsx
@@ -64,11 +64,11 @@ export type SignUpProps = BaseSignUpProps;
 const SignUp: FC<SignUpProps> = ({
   className,
   size = 'medium',
-  variant = 'outlined',
   afterSignUpUrl,
   onError,
   onComplete,
   shouldRedirectAfterSignUp = true,
+  ...rest
 }) => {
   const {signUp, isInitialized} = useAsgardeo();
 
@@ -121,8 +121,8 @@ const SignUp: FC<SignUpProps> = ({
       onComplete={handleComplete}
       className={className}
       size={size}
-      variant={variant}
       isInitialized={isInitialized}
+      {...rest}
     />
   );
 };
diff --git a/packages/react/src/components/primitives/Card/Card.tsx b/packages/react/src/components/primitives/Card/Card.tsx
index 5500ce812..12af7e2a9 100644
--- a/packages/react/src/components/primitives/Card/Card.tsx
+++ b/packages/react/src/components/primitives/Card/Card.tsx
@@ -115,7 +115,6 @@ const useCardStyles = (variant: CardVariant, clickable: boolean) => {
       outlined: {
         ...baseStyles,
         border: `1px solid ${theme.colors.border}`,
-        backgroundColor: 'transparent',
       },
       elevated: {
         ...baseStyles,
diff --git a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
index c974e0e16..9670fec45 100644
--- a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
+++ b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -249,7 +249,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
       }}
     >
       <I18nProvider preferences={preferences?.i18n}>
-        <ThemeProvider theme={preferences?.theme?.overrides} defaultColorScheme={isDarkMode ? 'dark' : 'light'}>
+        <ThemeProvider theme={preferences?.theme?.overrides} mode={isDarkMode ? 'dark' : 'light'}>
           <FlowProvider>
             <UserProvider
               profile={userProfile}
diff --git a/packages/react/src/contexts/Theme/ThemeProvider.tsx b/packages/react/src/contexts/Theme/ThemeProvider.tsx
index 3d0ed2021..7677ff45d 100644
--- a/packages/react/src/contexts/Theme/ThemeProvider.tsx
+++ b/packages/react/src/contexts/Theme/ThemeProvider.tsx
@@ -16,13 +16,34 @@
  * under the License.
  */
 
-import {FC, PropsWithChildren, ReactElement, useEffect, useMemo, useState} from 'react';
-import {createTheme, Theme, ThemeConfig, RecursivePartial} from '@asgardeo/browser';
+import {FC, PropsWithChildren, ReactElement, useEffect, useMemo, useState, useCallback} from 'react';
+import {
+  createTheme,
+  Theme,
+  ThemeConfig,
+  ThemeMode,
+  RecursivePartial,
+  detectThemeMode,
+  createClassObserver,
+  createMediaQueryListener,
+  BrowserThemeDetection,
+} from '@asgardeo/browser';
 import ThemeContext from './ThemeContext';
 
 export interface ThemeProviderProps {
   theme?: RecursivePartial<ThemeConfig>;
-  defaultColorScheme?: 'light' | 'dark';
+  /**
+   * The theme mode to use for automatic detection
+   * - 'light': Always use light theme
+   * - 'dark': Always use dark theme
+   * - 'system': Use system preference (prefers-color-scheme media query)
+   * - 'class': Detect theme based on CSS classes on HTML element
+   */
+  mode?: ThemeMode;
+  /**
+   * Configuration for theme detection when using 'class' or 'system' mode
+   */
+  detection?: BrowserThemeDetection;
 }
 
 const applyThemeToDOM = (theme: Theme) => {
@@ -34,15 +55,55 @@ const applyThemeToDOM = (theme: Theme) => {
 const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({
   children,
   theme: themeConfig,
-  defaultColorScheme = 'light',
+  mode = 'system',
+  detection = {},
 }: PropsWithChildren<ThemeProviderProps>): ReactElement => {
-  const [colorScheme, setColorScheme] = useState<'light' | 'dark'>(defaultColorScheme);
+  const [colorScheme, setColorScheme] = useState<'light' | 'dark'>(() => {
+    // Initialize with detected theme mode or fallback to defaultMode
+    if (mode === 'light' || mode === 'dark') {
+      return mode;
+    }
+    return detectThemeMode(mode, detection);
+  });
 
   const theme = useMemo(() => createTheme(themeConfig, colorScheme === 'dark'), [themeConfig, colorScheme]);
 
-  const toggleTheme = () => {
+  const handleThemeChange = useCallback((isDark: boolean) => {
+    setColorScheme(isDark ? 'dark' : 'light');
+  }, []);
+
+  const toggleTheme = useCallback(() => {
     setColorScheme(prev => (prev === 'light' ? 'dark' : 'light'));
-  };
+  }, []);
+
+  useEffect(() => {
+    let observer: MutationObserver | null = null;
+    let mediaQuery: MediaQueryList | null = null;
+
+    if (mode === 'class') {
+      const targetElement = detection.targetElement || document.documentElement;
+      if (targetElement) {
+        observer = createClassObserver(targetElement, handleThemeChange, detection);
+      }
+    } else if (mode === 'system') {
+      mediaQuery = createMediaQueryListener(handleThemeChange);
+    }
+
+    return () => {
+      if (observer) {
+        observer.disconnect();
+      }
+      if (mediaQuery) {
+        // Clean up media query listener
+        if (mediaQuery.removeEventListener) {
+          mediaQuery.removeEventListener('change', handleThemeChange as any);
+        } else {
+          // Fallback for older browsers
+          mediaQuery.removeListener(handleThemeChange as any);
+        }
+      }
+    };
+  }, [mode, detection, handleThemeChange]);
 
   useEffect(() => {
     applyThemeToDOM(theme);
diff --git a/samples/teamspace-react/src/main.tsx b/samples/teamspace-react/src/main.tsx
index eb23c4eb0..4a75531a5 100644
--- a/samples/teamspace-react/src/main.tsx
+++ b/samples/teamspace-react/src/main.tsx
@@ -26,7 +26,19 @@ createRoot(document.getElementById('root')!).render(
       ]}
       preferences={{
         theme: {
-          mode: 'light',
+          mode: 'light', // This will detect theme based on CSS classes
+          // You can also use other modes:
+          // mode: 'system', // Follows system preference (prefers-color-scheme)
+          // mode: 'light',  // Always light
+          // mode: 'dark',   // Always dark
+
+          // For class-based detection, you can customize the class names:
+          // detection: {
+          //   darkClass: 'dark',  // CSS class for dark theme (default)
+          //   lightClass: 'light', // CSS class for light theme (default)
+          //   targetElement: document.documentElement, // Element to observe (default: <html>)
+          // },
+
           // overrides: {
           //   colors: {
           //     primary: {

From 9ee4ef45c277687a22aca62d05d42a0ad8e2d0dd Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 1 Jul 2025 12:12:32 +0530
Subject: [PATCH 03/21] fix: update ThemeProvider prop from defaultColorScheme
 to mode

---
 .../javascript/src/theme/themeDetection.ts    | 114 ------------------
 .../contexts/Asgardeo/AsgardeoProvider.tsx    |   2 +-
 2 files changed, 1 insertion(+), 115 deletions(-)
 delete mode 100644 packages/javascript/src/theme/themeDetection.ts

diff --git a/packages/javascript/src/theme/themeDetection.ts b/packages/javascript/src/theme/themeDetection.ts
deleted file mode 100644
index 39a99cf06..000000000
--- a/packages/javascript/src/theme/themeDetection.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import {ThemeDetection, ThemeMode} from './types';
-
-/**
- * Detects the current theme mode based on the specified method
- */
-export const detectThemeMode = (mode: ThemeMode, config: ThemeDetection = {}): 'light' | 'dark' => {
-  const {
-    darkClass = 'dark',
-    lightClass = 'light',
-    targetElement = typeof document !== 'undefined' ? document.documentElement : null,
-  } = config;
-
-  if (typeof window === 'undefined') {
-    return 'light'; // Default to light mode on server side
-  }
-
-  switch (mode) {
-    case 'dark':
-      return 'dark';
-    case 'light':
-      return 'light';
-    case 'system':
-      return window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-    case 'class':
-      if (!targetElement) {
-        console.warn('ThemeProvider: Target element not available for class-based theme detection');
-        return 'light';
-      }
-
-      // Check for dark class first, then light class, then default to light
-      if (targetElement.classList.contains(darkClass)) {
-        return 'dark';
-      }
-      if (targetElement.classList.contains(lightClass)) {
-        return 'light';
-      }
-
-      // If neither class is present, default to light
-      return 'light';
-    default:
-      return 'light';
-  }
-};
-
-/**
- * Creates a MutationObserver to watch for class changes on the target element
- */
-export const createClassObserver = (
-  targetElement: HTMLElement,
-  callback: (isDark: boolean) => void,
-  config: ThemeDetection = {},
-): MutationObserver => {
-  const {darkClass = 'dark', lightClass = 'light'} = config;
-
-  const observer = new MutationObserver(mutations => {
-    mutations.forEach(mutation => {
-      if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
-        const classList = (mutation.target as HTMLElement).classList;
-        const isDark = classList.contains(darkClass);
-        callback(isDark);
-      }
-    });
-  });
-
-  observer.observe(targetElement, {
-    attributes: true,
-    attributeFilter: ['class'],
-  });
-
-  return observer;
-};
-
-/**
- * Creates a media query listener for system theme changes
- */
-export const createMediaQueryListener = (callback: (isDark: boolean) => void): MediaQueryList | null => {
-  if (typeof window === 'undefined' || !window.matchMedia) {
-    return null;
-  }
-
-  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-
-  const handleChange = (e: MediaQueryListEvent) => {
-    callback(e.matches);
-  };
-
-  // Use addEventListener if available, otherwise use deprecated addListener
-  if (mediaQuery.addEventListener) {
-    mediaQuery.addEventListener('change', handleChange);
-  } else {
-    // Fallback for older browsers
-    mediaQuery.addListener(handleChange);
-  }
-
-  return mediaQuery;
-};
diff --git a/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx
index 0b48ee20e..30bda02b6 100644
--- a/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx
+++ b/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -270,7 +270,7 @@ const AsgardeoClientProvider: FC<PropsWithChildren<AsgardeoClientProviderProps>>
   return (
     <AsgardeoContext.Provider value={contextValue}>
       <I18nProvider preferences={preferences?.i18n}>
-        <ThemeProvider theme={preferences?.theme?.overrides} defaultColorScheme={isDarkMode ? 'dark' : 'light'}>
+        <ThemeProvider theme={preferences?.theme?.overrides} mode={isDarkMode ? 'dark' : 'light'}>
           <FlowProvider>
             <UserProvider profile={userProfile}>
               <OrganizationProvider

From 7d1b6ff8f7ad27a6e3e3a065f48a6638c7b176cd Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 1 Jul 2025 16:54:59 +0530
Subject: [PATCH 04/21] feat(javascript): add getBrandingPreference API and
 related models for branding configuration

---
 .../__tests__/getBrandingPreference.test.ts   | 234 +++++++++++++++
 .../src/api/getBrandingPreference.ts          | 183 ++++++++++++
 packages/javascript/src/index.ts              |  13 +
 .../src/models/branding-preference.ts         | 267 ++++++++++++++++++
 4 files changed, 697 insertions(+)
 create mode 100644 packages/javascript/src/api/__tests__/getBrandingPreference.test.ts
 create mode 100644 packages/javascript/src/api/getBrandingPreference.ts
 create mode 100644 packages/javascript/src/models/branding-preference.ts

diff --git a/packages/javascript/src/api/__tests__/getBrandingPreference.test.ts b/packages/javascript/src/api/__tests__/getBrandingPreference.test.ts
new file mode 100644
index 000000000..d5bc40c83
--- /dev/null
+++ b/packages/javascript/src/api/__tests__/getBrandingPreference.test.ts
@@ -0,0 +1,234 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {describe, it, expect, vi, beforeEach} from 'vitest';
+import getBrandingPreference from '../getBrandingPreference';
+import {BrandingPreference} from '../../models/branding-preference';
+import AsgardeoAPIError from '../../errors/AsgardeoAPIError';
+
+describe('getBrandingPreference', (): void => {
+  beforeEach((): void => {
+    vi.resetAllMocks();
+  });
+
+  it('should fetch branding preference successfully', async (): Promise<void> => {
+    const mockBrandingPreference: BrandingPreference = {
+      type: 'ORG',
+      name: 'dxlab',
+      locale: 'en-US',
+      preference: {
+        configs: {
+          isBrandingEnabled: true,
+          removeDefaultBranding: false,
+        },
+        layout: {
+          activeLayout: 'centered',
+        },
+        organizationDetails: {
+          displayName: '',
+          supportEmail: '',
+        },
+        theme: {
+          activeTheme: 'DARK',
+          LIGHT: {
+            buttons: {
+              primary: {
+                base: {
+                  border: {
+                    borderRadius: '22px',
+                  },
+                  font: {
+                    color: '#ffffffe6',
+                  },
+                },
+              },
+            },
+            colors: {
+              primary: {
+                main: '#FF7300',
+              },
+              secondary: {
+                main: '#E0E1E2',
+              },
+            },
+          },
+          DARK: {
+            buttons: {
+              primary: {
+                base: {
+                  border: {
+                    borderRadius: '22px',
+                  },
+                  font: {
+                    color: '#ffffff',
+                  },
+                },
+              },
+            },
+            colors: {
+              primary: {
+                main: '#FF7300',
+              },
+              secondary: {
+                main: '#E0E1E2',
+              },
+            },
+          },
+        },
+        urls: {
+          selfSignUpURL: 'https://localhost:5173/signup',
+        },
+      },
+    };
+
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve(mockBrandingPreference),
+    });
+
+    const baseUrl: string = 'https://api.asgardeo.io/t/dxlab';
+    const result: BrandingPreference = await getBrandingPreference({baseUrl});
+
+    expect(fetch).toHaveBeenCalledWith(`${baseUrl}/api/server/v1/branding-preference`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+      },
+    });
+    expect(result).toEqual(mockBrandingPreference);
+  });
+
+  it('should fetch branding preference with query parameters', async (): Promise<void> => {
+    const mockBrandingPreference: BrandingPreference = {
+      type: 'ORG',
+      name: 'custom',
+      locale: 'en-US',
+    };
+
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve(mockBrandingPreference),
+    });
+
+    const baseUrl: string = 'https://api.asgardeo.io/t/dxlab';
+    await getBrandingPreference({
+      baseUrl,
+      locale: 'en-US',
+      name: 'custom',
+      type: 'org',
+    });
+
+    expect(fetch).toHaveBeenCalledWith(
+      `${baseUrl}/api/server/v1/branding-preference?locale=en-US&name=custom&type=org`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          Accept: 'application/json',
+        },
+      },
+    );
+  });
+
+  it('should handle custom fetcher', async (): Promise<void> => {
+    const mockBrandingPreference: BrandingPreference = {
+      type: 'ORG',
+      name: 'default',
+    };
+
+    const customFetcher = vi.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve(mockBrandingPreference),
+    });
+
+    const baseUrl: string = 'https://api.asgardeo.io/t/dxlab';
+    await getBrandingPreference({baseUrl, fetcher: customFetcher});
+
+    expect(customFetcher).toHaveBeenCalledWith(`${baseUrl}/api/server/v1/branding-preference`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+      },
+    });
+  });
+
+  it('should handle invalid base URL', async (): Promise<void> => {
+    const invalidUrl: string = 'invalid-url';
+
+    await expect(getBrandingPreference({baseUrl: invalidUrl})).rejects.toThrow(AsgardeoAPIError);
+    await expect(getBrandingPreference({baseUrl: invalidUrl})).rejects.toThrow('Invalid base URL provided.');
+  });
+
+  it('should handle HTTP error responses', async (): Promise<void> => {
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: false,
+      status: 404,
+      statusText: 'Not Found',
+      text: () => Promise.resolve('Branding preference not found'),
+    });
+
+    const baseUrl: string = 'https://api.asgardeo.io/t/dxlab';
+
+    await expect(getBrandingPreference({baseUrl})).rejects.toThrow(AsgardeoAPIError);
+    await expect(getBrandingPreference({baseUrl})).rejects.toThrow(
+      'Failed to get branding preference: Branding preference not found',
+    );
+  });
+
+  it('should handle network errors', async (): Promise<void> => {
+    global.fetch = vi.fn().mockRejectedValue(new Error('Network error'));
+
+    const baseUrl: string = 'https://api.asgardeo.io/t/dxlab';
+
+    await expect(getBrandingPreference({baseUrl})).rejects.toThrow(AsgardeoAPIError);
+    await expect(getBrandingPreference({baseUrl})).rejects.toThrow('Network or parsing error: Network error');
+  });
+
+  it('should pass through custom headers', async (): Promise<void> => {
+    const mockBrandingPreference: BrandingPreference = {
+      type: 'ORG',
+      name: 'default',
+    };
+
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve(mockBrandingPreference),
+    });
+
+    const baseUrl: string = 'https://api.asgardeo.io/t/dxlab';
+    const customHeaders = {
+      Authorization: 'Bearer token',
+      'X-Custom-Header': 'custom-value',
+    };
+
+    await getBrandingPreference({
+      baseUrl,
+      headers: customHeaders,
+    });
+
+    expect(fetch).toHaveBeenCalledWith(`${baseUrl}/api/server/v1/branding-preference`, {
+      method: 'GET',
+      headers: {
+        Authorization: 'Bearer token',
+        'X-Custom-Header': 'custom-value',
+      },
+    });
+  });
+});
diff --git a/packages/javascript/src/api/getBrandingPreference.ts b/packages/javascript/src/api/getBrandingPreference.ts
new file mode 100644
index 000000000..2491353e0
--- /dev/null
+++ b/packages/javascript/src/api/getBrandingPreference.ts
@@ -0,0 +1,183 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {BrandingPreference} from '../models/branding-preference';
+import AsgardeoAPIError from '../errors/AsgardeoAPIError';
+
+/**
+ * Configuration for the getBrandingPreference request
+ */
+export interface GetBrandingPreferenceConfig extends Omit<RequestInit, 'method'> {
+  /**
+   * The base URL for the API endpoint.
+   */
+  baseUrl: string;
+  /**
+   * Locale for the branding preference
+   */
+  locale?: string;
+  /**
+   * Name of the branding preference
+   */
+  name?: string;
+  /**
+   * Type of the branding preference
+   */
+  type?: string;
+  /**
+   * Optional custom fetcher function.
+   * If not provided, native fetch will be used
+   */
+  fetcher?: (url: string, config: RequestInit) => Promise<Response>;
+}
+
+/**
+ * Retrieves branding preference configuration.
+ *
+ * @param config - Configuration object containing baseUrl, optional query parameters, and request config.
+ * @returns A promise that resolves with the branding preference information.
+ * @example
+ * ```typescript
+ * // Using default fetch
+ * try {
+ *   const response = await getBrandingPreference({
+ *     baseUrl: "https://api.asgardeo.io/t/<ORGANIZATION>",
+ *     locale: "en-US",
+ *     name: "my-branding",
+ *     type: "org"
+ *   });
+ *   console.log(response.theme);
+ * } catch (error) {
+ *   if (error instanceof AsgardeoAPIError) {
+ *     console.error('Failed to get branding preference:', error.message);
+ *   }
+ * }
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Using custom fetcher (e.g., axios-based httpClient)
+ * try {
+ *   const response = await getBrandingPreference({
+ *     baseUrl: "https://api.asgardeo.io/t/<ORGANIZATION>",
+ *     locale: "en-US",
+ *     name: "my-branding",
+ *     type: "org",
+ *     fetcher: async (url, config) => {
+ *       const response = await httpClient({
+ *         url,
+ *         method: config.method,
+ *         headers: config.headers,
+ *         ...config
+ *       });
+ *       // Convert axios-like response to fetch-like Response
+ *       return {
+ *         ok: response.status >= 200 && response.status < 300,
+ *         status: response.status,
+ *         statusText: response.statusText,
+ *         json: () => Promise.resolve(response.data),
+ *         text: () => Promise.resolve(typeof response.data === 'string' ? response.data : JSON.stringify(response.data))
+ *       } as Response;
+ *     }
+ *   });
+ *   console.log(response.theme);
+ * } catch (error) {
+ *   if (error instanceof AsgardeoAPIError) {
+ *     console.error('Failed to get branding preference:', error.message);
+ *   }
+ * }
+ * ```
+ */
+const getBrandingPreference = async ({
+  baseUrl,
+  locale,
+  name,
+  type,
+  fetcher,
+  ...requestConfig
+}: GetBrandingPreferenceConfig): Promise<BrandingPreference> => {
+  try {
+    new URL(baseUrl);
+  } catch (error) {
+    throw new AsgardeoAPIError(
+      `Invalid base URL provided. ${error?.toString()}`,
+      'getBrandingPreference-ValidationError-001',
+      'javascript',
+      400,
+      'The provided `baseUrl` does not adhere to the URL schema.',
+    );
+  }
+
+  const queryParams: URLSearchParams = new URLSearchParams(
+    Object.fromEntries(
+      Object.entries({
+        locale: locale || '',
+        name: name || '',
+        type: type || '',
+      }).filter(([, value]: [string, string]) => Boolean(value)),
+    ),
+  );
+
+  const fetchFn = fetcher || fetch;
+  const resolvedUrl = `${baseUrl}/api/server/v1/branding-preference${
+    queryParams.toString() ? `?${queryParams.toString()}` : ''
+  }`;
+
+  const requestInit: RequestInit = {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+      Accept: 'application/json',
+      ...requestConfig.headers,
+    },
+    ...requestConfig,
+  };
+
+  try {
+    const response: Response = await fetchFn(resolvedUrl, requestInit);
+
+    if (!response?.ok) {
+      const errorText = await response.text();
+
+      throw new AsgardeoAPIError(
+        `Failed to get branding preference: ${errorText}`,
+        'getBrandingPreference-ResponseError-001',
+        'javascript',
+        response.status,
+        response.statusText,
+      );
+    }
+
+    const data = (await response.json()) as BrandingPreference;
+    return data;
+  } catch (error) {
+    if (error instanceof AsgardeoAPIError) {
+      throw error;
+    }
+
+    throw new AsgardeoAPIError(
+      `Network or parsing error: ${error instanceof Error ? error.message : 'Unknown error'}`,
+      'getBrandingPreference-NetworkError-001',
+      'javascript',
+      0,
+      'Network Error',
+    );
+  }
+};
+
+export default getBrandingPreference;
diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index afebdd7f6..83e3ffa8b 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -41,6 +41,7 @@ export {default as getMeOrganizations, GetMeOrganizationsConfig} from './api/get
 export {default as getOrganization, OrganizationDetails, GetOrganizationConfig} from './api/getOrganization';
 export {default as updateOrganization, createPatchOperations, UpdateOrganizationConfig} from './api/updateOrganization';
 export {default as updateMeProfile, UpdateMeProfileConfig} from './api/updateMeProfile';
+export {default as getBrandingPreference, GetBrandingPreferenceConfig} from './api/getBrandingPreference';
 
 export {default as ApplicationNativeAuthenticationConstants} from './constants/ApplicationNativeAuthenticationConstants';
 export {default as TokenConstants} from './constants/TokenConstants';
@@ -92,6 +93,18 @@ export {Storage, TemporaryStore} from './models/store';
 export {User, UserProfile} from './models/user';
 export {SessionData} from './models/session';
 export {Organization} from './models/organization';
+export {
+  BrandingPreference,
+  BrandingPreferenceConfig,
+  BrandingLayout,
+  BrandingTheme,
+  ThemeVariant,
+  ButtonsConfig,
+  ColorsConfig,
+  ColorVariants,
+  OrganizationDetails,
+  UrlsConfig,
+} from './models/branding-preference';
 export {Schema, SchemaAttribute, WellKnownSchemaIds, FlattenedSchema} from './models/scim2-schema';
 export {RecursivePartial} from './models/utility-types';
 export {FieldType} from './models/field';
diff --git a/packages/javascript/src/models/branding-preference.ts b/packages/javascript/src/models/branding-preference.ts
new file mode 100644
index 000000000..c656c21be
--- /dev/null
+++ b/packages/javascript/src/models/branding-preference.ts
@@ -0,0 +1,267 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * Interface for color configuration with multiple variants.
+ */
+export interface ColorVariants {
+  contrastText?: string;
+  dark?: string;
+  inverted?: string;
+  light?: string;
+  main?: string;
+}
+
+/**
+ * Interface for text color configuration.
+ */
+export interface TextColors {
+  primary?: string;
+  secondary?: string;
+}
+
+/**
+ * Interface for button styling configuration.
+ */
+export interface ButtonStyle {
+  base?: {
+    background?: {
+      backgroundColor?: string;
+    };
+    border?: {
+      borderColor?: string;
+      borderRadius?: string;
+    };
+    font?: {
+      color?: string;
+    };
+  };
+}
+
+/**
+ * Interface for buttons configuration.
+ */
+export interface ButtonsConfig {
+  externalConnection?: ButtonStyle;
+  primary?: ButtonStyle;
+  secondary?: ButtonStyle;
+}
+
+/**
+ * Interface for color palette configuration.
+ */
+export interface ColorsConfig {
+  alerts?: {
+    error?: ColorVariants;
+    info?: ColorVariants;
+    neutral?: ColorVariants;
+    warning?: ColorVariants;
+  };
+  background?: {
+    body?: ColorVariants;
+    surface?: ColorVariants;
+  };
+  illustrations?: {
+    accent1?: ColorVariants;
+    accent2?: ColorVariants;
+    accent3?: ColorVariants;
+    primary?: ColorVariants;
+    secondary?: ColorVariants;
+  };
+  outlined?: {
+    default?: string;
+  };
+  primary?: ColorVariants;
+  secondary?: ColorVariants;
+  text?: TextColors;
+}
+
+/**
+ * Interface for footer configuration.
+ */
+export interface FooterConfig {
+  border?: {
+    borderColor?: string;
+  };
+  font?: {
+    color?: string;
+  };
+}
+
+/**
+ * Interface for image configuration.
+ */
+export interface ImageConfig {
+  altText?: string;
+  imgURL?: string;
+  title?: string;
+}
+
+/**
+ * Interface for images configuration.
+ */
+export interface ImagesConfig {
+  favicon?: Partial<ImageConfig>;
+  logo?: Partial<ImageConfig>;
+  myAccountLogo?: Partial<ImageConfig>;
+}
+
+/**
+ * Interface for input styling configuration.
+ */
+export interface InputsConfig {
+  base?: {
+    background?: {
+      backgroundColor?: string;
+    };
+    border?: {
+      borderColor?: string;
+      borderRadius?: string;
+    };
+    font?: {
+      color?: string;
+    };
+    labels?: {
+      font?: {
+        color?: string;
+      };
+    };
+  };
+}
+
+/**
+ * Interface for login box configuration.
+ */
+export interface LoginBoxConfig {
+  background?: {
+    backgroundColor?: string;
+  };
+  border?: {
+    borderColor?: string;
+    borderRadius?: string;
+    borderWidth?: string;
+  };
+  font?: {
+    color?: string;
+  };
+}
+
+/**
+ * Interface for login page configuration.
+ */
+export interface LoginPageConfig {
+  background?: {
+    backgroundColor?: string;
+  };
+  font?: {
+    color?: string;
+  };
+}
+
+/**
+ * Interface for typography configuration.
+ */
+export interface TypographyConfig {
+  font?: {
+    color?: string;
+    fontFamily?: string;
+    importURL?: string;
+  };
+  heading?: {
+    font?: {
+      color?: string;
+    };
+  };
+}
+
+/**
+ * Interface for theme variant configuration (LIGHT/DARK).
+ */
+export interface ThemeVariant {
+  buttons?: ButtonsConfig;
+  colors?: ColorsConfig;
+  footer?: FooterConfig;
+  images?: ImagesConfig;
+  inputs?: InputsConfig;
+  loginBox?: LoginBoxConfig;
+  loginPage?: LoginPageConfig;
+  typography?: TypographyConfig;
+}
+
+/**
+ * Interface for branding preference layout configuration.
+ */
+export interface BrandingLayout {
+  activeLayout?: string;
+  sideImg?: {
+    altText?: string;
+    imgURL?: string;
+  };
+}
+
+/**
+ * Interface for organization details configuration.
+ */
+export interface OrganizationDetails {
+  displayName?: string;
+  supportEmail?: string;
+}
+
+/**
+ * Interface for URL configurations.
+ */
+export interface UrlsConfig {
+  cookiePolicyURL?: string;
+  privacyPolicyURL?: string;
+  termsOfUseURL?: string;
+  selfSignUpURL?: string;
+}
+
+/**
+ * Interface for branding preference theme configuration.
+ */
+export interface BrandingTheme {
+  activeTheme?: string;
+  LIGHT?: ThemeVariant;
+  DARK?: ThemeVariant;
+}
+
+/**
+ * Interface for branding preference configuration.
+ */
+export interface BrandingPreferenceConfig {
+  configs?: {
+    isBrandingEnabled?: boolean;
+    removeDefaultBranding?: boolean;
+    selfSignUpEnabled?: boolean;
+  };
+  layout?: BrandingLayout;
+  organizationDetails?: OrganizationDetails;
+  theme?: BrandingTheme;
+  urls?: UrlsConfig;
+}
+
+/**
+ * Interface for branding preference configuration.
+ */
+export interface BrandingPreference {
+  type?: string;
+  name?: string;
+  locale?: string;
+  preference?: BrandingPreferenceConfig;
+}

From c9075e5caadf157e3ffac3d88f93e4c682663ab9 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 1 Jul 2025 16:55:44 +0530
Subject: [PATCH 05/21] chore(javascript): rename OrganizationDetails to
 BrandingOrganizationDetails in branding preference models

---
 packages/javascript/src/index.ts                      | 2 +-
 packages/javascript/src/models/branding-preference.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index 83e3ffa8b..1856ecd54 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -102,7 +102,7 @@ export {
   ButtonsConfig,
   ColorsConfig,
   ColorVariants,
-  OrganizationDetails,
+  BrandingOrganizationDetails,
   UrlsConfig,
 } from './models/branding-preference';
 export {Schema, SchemaAttribute, WellKnownSchemaIds, FlattenedSchema} from './models/scim2-schema';
diff --git a/packages/javascript/src/models/branding-preference.ts b/packages/javascript/src/models/branding-preference.ts
index c656c21be..4da3c0596 100644
--- a/packages/javascript/src/models/branding-preference.ts
+++ b/packages/javascript/src/models/branding-preference.ts
@@ -217,7 +217,7 @@ export interface BrandingLayout {
 /**
  * Interface for organization details configuration.
  */
-export interface OrganizationDetails {
+export interface BrandingOrganizationDetails {
   displayName?: string;
   supportEmail?: string;
 }
@@ -251,7 +251,7 @@ export interface BrandingPreferenceConfig {
     selfSignUpEnabled?: boolean;
   };
   layout?: BrandingLayout;
-  organizationDetails?: OrganizationDetails;
+  organizationDetails?: BrandingOrganizationDetails;
   theme?: BrandingTheme;
   urls?: UrlsConfig;
 }

From 0a0b259fd4f5b7c4f8a1de7464b1d0f2ec53aeaa Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 1 Jul 2025 17:35:39 +0530
Subject: [PATCH 06/21] fix: enhance readonly field handling in BaseUserProfile
 component

---
 .../UserProfile/BaseUserProfile.tsx           | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
index 15aa57444..6d41ff1db 100644
--- a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
+++ b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
@@ -76,6 +76,17 @@ export interface BaseUserProfileProps {
   title?: string;
 }
 
+// Fields to skip based on schema.name
+const fieldsToSkip: string[] = [
+  'verifiedMobileNumbers',
+  'verifiedEmailAddresses',
+  'phoneNumbers.mobile',
+  'emailAddresses',
+];
+
+// Fields that should be readonly
+const readonlyFields: string[] = ['username', 'userName', 'user_name'];
+
 const BaseUserProfile: FC<BaseUserProfileProps> = ({
   fallback = null,
   className = '',
@@ -319,7 +330,7 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
     }
     if (Array.isArray(value)) {
       const hasValues = value.length > 0;
-      const isEditable = editable && mutability !== 'READ_ONLY';
+      const isEditable = editable && mutability !== 'READ_ONLY' && !readonlyFields.includes(name || '');
 
       let displayValue: string;
       if (hasValues) {
@@ -363,7 +374,7 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
       return <ObjectDisplay data={value} />;
     }
     // If editing, show field instead of value
-    if (isEditing && onEditValue && mutability !== 'READ_ONLY') {
+    if (isEditing && onEditValue && mutability !== 'READ_ONLY' && !readonlyFields.includes(name || '')) {
       // Use editedUser value if available, then flattenedProfile, then schema value
       const fieldValue =
         editedUser && name && editedUser[name] !== undefined
@@ -425,7 +436,7 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
     }
     // Default: view mode
     const hasValue = value !== undefined && value !== null && value !== '';
-    const isEditable = editable && mutability !== 'READ_ONLY';
+    const isEditable = editable && mutability !== 'READ_ONLY' && !readonlyFields.includes(name || '');
 
     let displayValue: string;
     if (hasValue) {
@@ -472,6 +483,7 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
     // Skip fields with undefined or empty values unless editing or editable
     const hasValue = schema.value !== undefined && schema.value !== '' && schema.value !== null;
     const isFieldEditing = editingFields[schema.name];
+    const isReadonlyField = readonlyFields.includes(schema.name);
 
     // Show field if: has value, currently editing, or is editable and READ_WRITE
     const shouldShow = hasValue || isFieldEditing || (editable && schema.mutability === 'READ_WRITE');
@@ -501,7 +513,7 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
             () => toggleFieldEdit(schema.name!),
           )}
         </div>
-        {editable && schema.mutability !== 'READ_ONLY' && (
+        {editable && schema.mutability !== 'READ_ONLY' && !isReadonlyField && (
           <div
             style={{
               display: 'flex',
@@ -570,9 +582,6 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
   const avatarAttributes = ['picture'];
   const excludedProps = avatarAttributes.map(attr => mergedMappings[attr] || attr);
 
-  // Fields to skip based on schema.name
-  const fieldsToSkip: string[] = ['verifiedMobileNumbers', 'verifiedEmailAddresses'];
-
   const profileContent = (
     <Card style={containerStyle} className={clsx(withVendorCSSClassPrefix('user-profile'), className)}>
       <div style={styles.header}>
@@ -612,6 +621,7 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
               ...schema,
               value,
             };
+
             return <div key={schema.name || index}>{renderUserInfo(schemaWithValue)}</div>;
           })}
       </div>

From f64265aca2c0625c56fcb41a1a0f2f609e331bf5 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 1 Jul 2025 18:44:22 +0530
Subject: [PATCH 07/21] chore: add MultiInput component for handling multiple
 input values

---
 .../UserProfile/BaseUserProfile.tsx           |  85 ++++-
 .../primitives/MultiInput/MultiInput.tsx      | 310 ++++++++++++++++++
 packages/react/src/index.ts                   |   3 +
 3 files changed, 393 insertions(+), 5 deletions(-)
 create mode 100644 packages/react/src/components/primitives/MultiInput/MultiInput.tsx

diff --git a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
index 6d41ff1db..50e59dd6b 100644
--- a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
+++ b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
@@ -27,6 +27,7 @@ import Checkbox from '../../primitives/Checkbox/Checkbox';
 import DatePicker from '../../primitives/DatePicker/DatePicker';
 import {Dialog, DialogContent, DialogHeading} from '../../primitives/Popover/Popover';
 import TextField from '../../primitives/TextField/TextField';
+import MultiInput from '../../primitives/MultiInput/MultiInput';
 import Card from '../../primitives/Card/Card';
 
 interface ExtendedFlatSchema {
@@ -78,6 +79,20 @@ export interface BaseUserProfileProps {
 
 // Fields to skip based on schema.name
 const fieldsToSkip: string[] = [
+  'roles.default',
+  'active',
+  'groups',
+  'profileUrl',
+  'accountLocked',
+  'accountDisabled',
+  'oneTimePassword',
+  'userSourceId',
+  'idpType',
+  'localCredentialExists',
+  'active',
+  'ResourceType',
+  'ExternalID',
+  'MetaData',
   'verifiedMobileNumbers',
   'verifiedEmailAddresses',
   'phoneNumbers.mobile',
@@ -199,13 +214,18 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
       if (!onUpdate || !schema.name) return;
 
       const fieldName: string = schema.name;
-      const fieldValue: any =
+      let fieldValue: any =
         editedUser && fieldName && editedUser[fieldName] !== undefined
           ? editedUser[fieldName]
           : flattenedProfile && flattenedProfile[fieldName] !== undefined
           ? flattenedProfile[fieldName]
           : '';
 
+      // Filter out empty values for arrays when saving
+      if (Array.isArray(fieldValue)) {
+        fieldValue = fieldValue.filter(v => v !== undefined && v !== null && v !== '');
+      }
+
       let payload: Record<string, any> = {};
 
       // SCIM Patch Operation Logic:
@@ -304,7 +324,7 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
     onStartEdit?: () => void,
   ): ReactElement | null => {
     if (!schema) return null;
-    const {value, displayName, description, name, type, required, mutability, subAttributes} = schema;
+    const {value, displayName, description, name, type, required, mutability, subAttributes, multiValued} = schema;
     const label = displayName || description || name || '';
 
     // If complex or subAttributes, fallback to original renderSchemaValue
@@ -328,13 +348,68 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
         </>
       );
     }
-    if (Array.isArray(value)) {
-      const hasValues = value.length > 0;
+
+    // Handle multi-valued fields (either array values or multiValued property)
+    if (Array.isArray(value) || multiValued) {
+      const hasValues = Array.isArray(value) ? value.length > 0 : value !== undefined && value !== null && value !== '';
       const isEditable = editable && mutability !== 'READ_ONLY' && !readonlyFields.includes(name || '');
 
+      // If editing, show multi-valued input
+      if (isEditing && onEditValue && isEditable) {
+        // Use editedUser value if available, then flattenedProfile, then schema value
+        const currentValue =
+          editedUser && name && editedUser[name] !== undefined
+            ? editedUser[name]
+            : flattenedProfile && name && flattenedProfile[name] !== undefined
+            ? flattenedProfile[name]
+            : value;
+
+        let fieldValues: string[];
+        if (Array.isArray(currentValue)) {
+          fieldValues = currentValue.map(String);
+        } else if (currentValue !== undefined && currentValue !== null && currentValue !== '') {
+          fieldValues = [String(currentValue)];
+        } else {
+          fieldValues = [];
+        }
+
+        return (
+          <>
+            <span style={styles.label}>{label}</span>
+            <div style={styles.value}>
+              <MultiInput
+                values={fieldValues}
+                onChange={newValues => {
+                  // Don't filter out empty values during editing - only when saving
+                  // This allows users to type and keeps empty fields for adding new values
+                  if (multiValued || Array.isArray(currentValue)) {
+                    onEditValue(newValues);
+                  } else {
+                    // Single value field, just take the first value (including empty for typing)
+                    onEditValue(newValues[0] || '');
+                  }
+                }}
+                placeholder={getFieldPlaceholder(schema)}
+                fieldType={type as 'STRING' | 'DATE_TIME' | 'BOOLEAN'}
+                type={type === 'DATE_TIME' ? 'date' : type === 'STRING' ? 'text' : 'text'}
+                required={required}
+                style={{
+                  marginBottom: 0,
+                }}
+              />
+            </div>
+          </>
+        );
+      }
+
+      // View mode for multi-valued fields
       let displayValue: string;
       if (hasValues) {
-        displayValue = value.map(item => (typeof item === 'object' ? JSON.stringify(item) : String(item))).join(', ');
+        if (Array.isArray(value)) {
+          displayValue = value.map(item => (typeof item === 'object' ? JSON.stringify(item) : String(item))).join(', ');
+        } else {
+          displayValue = String(value);
+        }
       } else if (isEditable) {
         displayValue = getFieldPlaceholder(schema);
       } else {
diff --git a/packages/react/src/components/primitives/MultiInput/MultiInput.tsx b/packages/react/src/components/primitives/MultiInput/MultiInput.tsx
new file mode 100644
index 000000000..423f289b6
--- /dev/null
+++ b/packages/react/src/components/primitives/MultiInput/MultiInput.tsx
@@ -0,0 +1,310 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {CSSProperties, FC, ReactNode, useCallback, useState} from 'react';
+import useTheme from '../../../contexts/Theme/useTheme';
+import clsx from 'clsx';
+import FormControl from '../FormControl/FormControl';
+import InputLabel from '../InputLabel/InputLabel';
+import TextField from '../TextField/TextField';
+import DatePicker from '../DatePicker/DatePicker';
+import Checkbox from '../Checkbox/Checkbox';
+import Button from '../Button/Button';
+import {withVendorCSSClassPrefix} from '@asgardeo/browser';
+
+export interface MultiInputProps {
+  /**
+   * Label text to display above the inputs
+   */
+  label?: string;
+  /**
+   * Error message to display below the inputs
+   */
+  error?: string;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Whether the field is required
+   */
+  required?: boolean;
+  /**
+   * Whether the field is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Helper text to display below the inputs
+   */
+  helperText?: string;
+  /**
+   * Placeholder text for input fields
+   */
+  placeholder?: string;
+  /**
+   * Array of values
+   */
+  values: string[];
+  /**
+   * Callback when values change
+   */
+  onChange: (values: string[]) => void;
+  /**
+   * Custom style object
+   */
+  style?: CSSProperties;
+  /**
+   * Input type
+   */
+  type?: 'text' | 'email' | 'tel' | 'url' | 'password' | 'date' | 'boolean';
+  /**
+   * Field type for different input components
+   */
+  fieldType?: 'STRING' | 'DATE_TIME' | 'BOOLEAN';
+  /**
+   * Icon to display at the start (left) of each input
+   */
+  startIcon?: ReactNode;
+  /**
+   * Icon to display at the end (right) of each input (in addition to add/remove buttons)
+   */
+  endIcon?: ReactNode;
+  /**
+   * Minimum number of fields to show (default: 1)
+   */
+  minFields?: number;
+  /**
+   * Maximum number of fields to allow (default: unlimited)
+   */
+  maxFields?: number;
+}
+
+const MultiInput: FC<MultiInputProps> = ({
+  label,
+  error,
+  required,
+  className,
+  disabled,
+  helperText,
+  placeholder = 'Enter value',
+  values = [],
+  onChange,
+  style = {},
+  type = 'text',
+  fieldType = 'STRING',
+  startIcon,
+  endIcon,
+  minFields = 1,
+  maxFields,
+}) => {
+  const {theme} = useTheme();
+
+  const PlusIcon = () => (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M12 5v14M5 12h14" />
+    </svg>
+  );
+
+  const BinIcon = () => (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14ZM10 11v6M14 11v6" />
+    </svg>
+  );
+
+  const handleAddValue = useCallback((newValue: string) => {
+    if (newValue.trim() !== '' && (!maxFields || values.length < maxFields)) {
+      onChange([...values, newValue.trim()]);
+    }
+  }, [values, onChange, maxFields]);
+
+  const handleRemoveValue = useCallback(
+    (index: number) => {
+      if (values.length > minFields) {
+        const updatedValues = values.filter((_, i) => i !== index);
+        onChange(updatedValues);
+      }
+    },
+    [values, onChange, minFields],
+  );
+
+  const renderInputField = useCallback(
+    (value: string, onValueChange: (value: string) => void, attachedEndIcon?: ReactNode, onEndIconClick?: () => void) => {
+      const handleInputChange = (e: any) => {
+        const newValue = e.target ? e.target.value : e;
+        onValueChange(newValue);
+      };
+
+      const handleKeyDown = (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter' && onEndIconClick) {
+          e.preventDefault();
+          onEndIconClick();
+        }
+      };
+
+      const finalEndIcon = attachedEndIcon || endIcon;
+
+      const commonProps = {
+        value,
+        onChange: handleInputChange,
+        onKeyDown: handleKeyDown,
+        placeholder,
+        disabled,
+        startIcon,
+        endIcon: finalEndIcon,
+        onEndIconClick,
+        error,
+      };
+
+      switch (fieldType) {
+        case 'DATE_TIME':
+          return <DatePicker {...commonProps} />;
+        case 'BOOLEAN':
+          return (
+            <Checkbox
+              {...commonProps}
+              checked={value === 'true' || Boolean(value)}
+              onChange={(e: any) => onValueChange(e.target.checked ? 'true' : 'false')}
+            />
+          );
+        default:
+          return <TextField {...commonProps} type={type} />;
+      }
+    },
+    [placeholder, disabled, startIcon, endIcon, error, fieldType, type],
+  );
+
+  const containerStyle: CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: `${theme.spacing.unit}px`,
+  };
+
+  const inputRowStyle: CSSProperties = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: `${theme.spacing.unit}px`,
+    position: 'relative',
+  };
+
+  const listItemStyle: CSSProperties = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 1.5}px`,
+    backgroundColor: theme.colors.background.surface,
+    border: `1px solid ${theme.colors.border}`,
+    borderRadius: theme.borderRadius.medium,
+    fontSize: '1rem',
+    color: theme.colors.text.primary,
+  };
+
+  const listContainerStyle: CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: `${theme.spacing.unit / 2}px`,
+  };
+
+  const canAddMore = !maxFields || values.length < maxFields;
+  const canRemove = values.length > minFields;
+
+  // State for the current input value
+  const [currentInputValue, setCurrentInputValue] = useState('');
+
+  const handleInputSubmit = useCallback(() => {
+    if (currentInputValue.trim() !== '') {
+      handleAddValue(currentInputValue);
+      setCurrentInputValue('');
+    }
+  }, [currentInputValue, handleAddValue]);
+
+  return (
+    <FormControl
+      error={error}
+      helperText={helperText}
+      className={clsx(withVendorCSSClassPrefix('multi-input'), className)}
+      style={style}
+    >
+      {label && (
+        <InputLabel required={required} error={!!error}>
+          {label}
+        </InputLabel>
+      )}
+      <div style={containerStyle}>
+        {/* Input field at the top */}
+        <div style={inputRowStyle}>
+          <div style={{flex: 1}}>
+            {renderInputField(
+              currentInputValue,
+              setCurrentInputValue,
+              canAddMore ? <PlusIcon /> : undefined,
+              canAddMore ? handleInputSubmit : undefined,
+            )}
+          </div>
+        </div>
+
+        {/* List of added items */}
+        {values.length > 0 && (
+          <div style={listContainerStyle}>
+            {values.map((value, index) => (
+              <div key={index} style={listItemStyle}>
+                <span>{value}</span>
+                {canRemove && (
+                  <Button
+                    size="small"
+                    color="secondary"
+                    variant="text"
+                    onClick={() => handleRemoveValue(index)}
+                    disabled={disabled}
+                    title="Remove value"
+                    style={{
+                      padding: `${theme.spacing.unit / 2}px`,
+                      minWidth: 'auto',
+                      color: theme.colors.error.main,
+                    }}
+                  >
+                    <BinIcon />
+                  </Button>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </FormControl>
+  );
+};
+
+export default MultiInput;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index a3e9bc784..0945cf56f 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -197,6 +197,9 @@ export * from './components/primitives/OtpField/OtpField';
 export {default as TextField} from './components/primitives/TextField/TextField';
 export * from './components/primitives/TextField/TextField';
 
+export {default as MultiInput} from './components/primitives/MultiInput/MultiInput';
+export * from './components/primitives/MultiInput/MultiInput';
+
 export {default as PasswordField} from './components/primitives/PasswordField/PasswordField';
 export * from './components/primitives/PasswordField/PasswordField';
 

From f5b98d71a2e0781b973b33b8fcef0c61fd8a2cdc Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 1 Jul 2025 20:36:48 +0530
Subject: [PATCH 08/21] feat: refactor MultiInput component styles using
 useMemo for improved performance

---
 .../primitives/MultiInput/MultiInput.tsx      | 113 ++++++++++--------
 1 file changed, 64 insertions(+), 49 deletions(-)

diff --git a/packages/react/src/components/primitives/MultiInput/MultiInput.tsx b/packages/react/src/components/primitives/MultiInput/MultiInput.tsx
index 423f289b6..07de69c7d 100644
--- a/packages/react/src/components/primitives/MultiInput/MultiInput.tsx
+++ b/packages/react/src/components/primitives/MultiInput/MultiInput.tsx
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import {CSSProperties, FC, ReactNode, useCallback, useState} from 'react';
+import {CSSProperties, FC, ReactNode, useCallback, useState, useMemo} from 'react';
 import useTheme from '../../../contexts/Theme/useTheme';
 import clsx from 'clsx';
 import FormControl from '../FormControl/FormControl';
@@ -94,6 +94,48 @@ export interface MultiInputProps {
   maxFields?: number;
 }
 
+const useStyles = () => {
+  const {theme} = useTheme();
+
+  return useMemo(() => ({
+    container: {
+      display: 'flex',
+      flexDirection: 'column' as const,
+      gap: `${theme.spacing.unit}px`,
+    },
+    inputRow: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: `${theme.spacing.unit}px`,
+      position: 'relative' as const,
+    },
+    inputWrapper: {
+      flex: 1,
+    },
+    listContainer: {
+      display: 'flex',
+      flexDirection: 'column' as const,
+      gap: `${theme.spacing.unit / 2}px`,
+    },
+    listItem: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      padding: `${theme.spacing.unit}px ${theme.spacing.unit * 1.5}px`,
+      backgroundColor: theme.colors.background.surface,
+      border: `1px solid ${theme.colors.border}`,
+      borderRadius: theme.borderRadius.medium,
+      fontSize: '1rem',
+      color: theme.colors.text.primary,
+    },
+    removeButton: {
+      padding: `${theme.spacing.unit / 2}px`,
+      minWidth: 'auto',
+      color: theme.colors.error.main,
+    },
+  }), [theme]);
+};
+
 const MultiInput: FC<MultiInputProps> = ({
   label,
   error,
@@ -112,7 +154,7 @@ const MultiInput: FC<MultiInputProps> = ({
   minFields = 1,
   maxFields,
 }) => {
-  const {theme} = useTheme();
+  const styles = useStyles();
 
   const PlusIcon = () => (
     <svg
@@ -144,11 +186,14 @@ const MultiInput: FC<MultiInputProps> = ({
     </svg>
   );
 
-  const handleAddValue = useCallback((newValue: string) => {
-    if (newValue.trim() !== '' && (!maxFields || values.length < maxFields)) {
-      onChange([...values, newValue.trim()]);
-    }
-  }, [values, onChange, maxFields]);
+  const handleAddValue = useCallback(
+    (newValue: string) => {
+      if (newValue.trim() !== '' && (!maxFields || values.length < maxFields)) {
+        onChange([...values, newValue.trim()]);
+      }
+    },
+    [values, onChange, maxFields],
+  );
 
   const handleRemoveValue = useCallback(
     (index: number) => {
@@ -161,7 +206,12 @@ const MultiInput: FC<MultiInputProps> = ({
   );
 
   const renderInputField = useCallback(
-    (value: string, onValueChange: (value: string) => void, attachedEndIcon?: ReactNode, onEndIconClick?: () => void) => {
+    (
+      value: string,
+      onValueChange: (value: string) => void,
+      attachedEndIcon?: ReactNode,
+      onEndIconClick?: () => void,
+    ) => {
       const handleInputChange = (e: any) => {
         const newValue = e.target ? e.target.value : e;
         onValueChange(newValue);
@@ -206,37 +256,6 @@ const MultiInput: FC<MultiInputProps> = ({
     [placeholder, disabled, startIcon, endIcon, error, fieldType, type],
   );
 
-  const containerStyle: CSSProperties = {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: `${theme.spacing.unit}px`,
-  };
-
-  const inputRowStyle: CSSProperties = {
-    display: 'flex',
-    alignItems: 'center',
-    gap: `${theme.spacing.unit}px`,
-    position: 'relative',
-  };
-
-  const listItemStyle: CSSProperties = {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 1.5}px`,
-    backgroundColor: theme.colors.background.surface,
-    border: `1px solid ${theme.colors.border}`,
-    borderRadius: theme.borderRadius.medium,
-    fontSize: '1rem',
-    color: theme.colors.text.primary,
-  };
-
-  const listContainerStyle: CSSProperties = {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: `${theme.spacing.unit / 2}px`,
-  };
-
   const canAddMore = !maxFields || values.length < maxFields;
   const canRemove = values.length > minFields;
 
@@ -262,10 +281,10 @@ const MultiInput: FC<MultiInputProps> = ({
           {label}
         </InputLabel>
       )}
-      <div style={containerStyle}>
+      <div style={styles.container}>
         {/* Input field at the top */}
-        <div style={inputRowStyle}>
-          <div style={{flex: 1}}>
+        <div style={styles.inputRow}>
+          <div style={styles.inputWrapper}>
             {renderInputField(
               currentInputValue,
               setCurrentInputValue,
@@ -277,9 +296,9 @@ const MultiInput: FC<MultiInputProps> = ({
 
         {/* List of added items */}
         {values.length > 0 && (
-          <div style={listContainerStyle}>
+          <div style={styles.listContainer}>
             {values.map((value, index) => (
-              <div key={index} style={listItemStyle}>
+              <div key={index} style={styles.listItem}>
                 <span>{value}</span>
                 {canRemove && (
                   <Button
@@ -289,11 +308,7 @@ const MultiInput: FC<MultiInputProps> = ({
                     onClick={() => handleRemoveValue(index)}
                     disabled={disabled}
                     title="Remove value"
-                    style={{
-                      padding: `${theme.spacing.unit / 2}px`,
-                      minWidth: 'auto',
-                      color: theme.colors.error.main,
-                    }}
+                    style={styles.removeButton}
                   >
                     <BinIcon />
                   </Button>

From df5d0624ab4d4c93c40b3654e6e9f2eb7b90ed2b Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 1 Jul 2025 21:13:57 +0530
Subject: [PATCH 09/21] feat: add PlusIcon styling to MultiInput component for
 improved UI

---
 .../primitives/MultiInput/MultiInput.tsx      | 88 +++++++++++--------
 1 file changed, 49 insertions(+), 39 deletions(-)

diff --git a/packages/react/src/components/primitives/MultiInput/MultiInput.tsx b/packages/react/src/components/primitives/MultiInput/MultiInput.tsx
index 07de69c7d..3808e2776 100644
--- a/packages/react/src/components/primitives/MultiInput/MultiInput.tsx
+++ b/packages/react/src/components/primitives/MultiInput/MultiInput.tsx
@@ -97,43 +97,52 @@ export interface MultiInputProps {
 const useStyles = () => {
   const {theme} = useTheme();
 
-  return useMemo(() => ({
-    container: {
-      display: 'flex',
-      flexDirection: 'column' as const,
-      gap: `${theme.spacing.unit}px`,
-    },
-    inputRow: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: `${theme.spacing.unit}px`,
-      position: 'relative' as const,
-    },
-    inputWrapper: {
-      flex: 1,
-    },
-    listContainer: {
-      display: 'flex',
-      flexDirection: 'column' as const,
-      gap: `${theme.spacing.unit / 2}px`,
-    },
-    listItem: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      padding: `${theme.spacing.unit}px ${theme.spacing.unit * 1.5}px`,
-      backgroundColor: theme.colors.background.surface,
-      border: `1px solid ${theme.colors.border}`,
-      borderRadius: theme.borderRadius.medium,
-      fontSize: '1rem',
-      color: theme.colors.text.primary,
-    },
-    removeButton: {
-      padding: `${theme.spacing.unit / 2}px`,
-      minWidth: 'auto',
-      color: theme.colors.error.main,
-    },
-  }), [theme]);
+  return useMemo(
+    () => ({
+      container: {
+        display: 'flex',
+        flexDirection: 'column' as const,
+        gap: `${theme.spacing.unit}px`,
+      },
+      inputRow: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: `${theme.spacing.unit}px`,
+        position: 'relative' as const,
+      },
+      inputWrapper: {
+        flex: 1,
+      },
+      plusIcon: {
+        background: 'var(--asgardeo-color-secondary-main)',
+        borderRadius: '50%',
+        outline: '4px var(--asgardeo-color-secondary-main) auto',
+        color: 'var(--asgardeo-color-secondary-contrastText)',
+      },
+      listContainer: {
+        display: 'flex',
+        flexDirection: 'column' as const,
+        gap: `${theme.spacing.unit / 2}px`,
+      },
+      listItem: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: `${theme.spacing.unit}px ${theme.spacing.unit * 1.5}px`,
+        backgroundColor: theme.colors.background.surface,
+        border: `1px solid ${theme.colors.border}`,
+        borderRadius: theme.borderRadius.medium,
+        fontSize: '1rem',
+        color: theme.colors.text.primary,
+      },
+      removeButton: {
+        padding: `${theme.spacing.unit / 2}px`,
+        minWidth: 'auto',
+        color: theme.colors.error.main,
+      },
+    }),
+    [theme],
+  );
 };
 
 const MultiInput: FC<MultiInputProps> = ({
@@ -156,7 +165,7 @@ const MultiInput: FC<MultiInputProps> = ({
 }) => {
   const styles = useStyles();
 
-  const PlusIcon = () => (
+  const PlusIcon = ({style}) => (
     <svg
       width="16"
       height="16"
@@ -166,6 +175,7 @@ const MultiInput: FC<MultiInputProps> = ({
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
+      style={style}
     >
       <path d="M12 5v14M5 12h14" />
     </svg>
@@ -288,7 +298,7 @@ const MultiInput: FC<MultiInputProps> = ({
             {renderInputField(
               currentInputValue,
               setCurrentInputValue,
-              canAddMore ? <PlusIcon /> : undefined,
+              canAddMore ? <PlusIcon style={styles.plusIcon} /> : undefined,
               canAddMore ? handleInputSubmit : undefined,
             )}
           </div>

From 0d5e748e88e077719b54cb1c554f04e8fce6500d Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 2 Jul 2025 00:32:28 +0530
Subject: [PATCH 10/21] fix(javascript): enhance API request handling by
 integrating requestConfig in multiple endpoints

---
 packages/javascript/src/api/createOrganization.ts           | 3 ++-
 packages/javascript/src/api/executeEmbeddedSignInFlow.ts    | 5 ++---
 packages/javascript/src/api/executeEmbeddedSignUpFlow.ts    | 5 ++---
 packages/javascript/src/api/getAllOrganizations.ts          | 2 +-
 packages/javascript/src/api/getBrandingPreference.ts        | 2 +-
 packages/javascript/src/api/getMeOrganizations.ts           | 2 +-
 packages/javascript/src/api/getOrganization.ts              | 2 +-
 packages/javascript/src/api/getSchemas.ts                   | 2 +-
 packages/javascript/src/api/getScim2Me.ts                   | 2 +-
 packages/javascript/src/api/getUserInfo.ts                  | 3 ++-
 packages/javascript/src/api/initializeEmbeddedSignInFlow.ts | 5 ++---
 packages/javascript/src/api/updateMeProfile.ts              | 4 ++--
 packages/javascript/src/api/updateOrganization.ts           | 2 +-
 13 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/packages/javascript/src/api/createOrganization.ts b/packages/javascript/src/api/createOrganization.ts
index 6e0041117..ef30b5da2 100644
--- a/packages/javascript/src/api/createOrganization.ts
+++ b/packages/javascript/src/api/createOrganization.ts
@@ -168,6 +168,7 @@ const createOrganization = async ({
   const resolvedUrl = `${baseUrl}/api/server/v1/organizations`;
 
   const requestInit: RequestInit = {
+    ...requestConfig,
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
@@ -175,7 +176,6 @@ const createOrganization = async ({
       ...requestConfig.headers,
     },
     body: JSON.stringify(organizationPayload),
-    ...requestConfig,
   };
 
   try {
@@ -195,6 +195,7 @@ const createOrganization = async ({
 
     return (await response.json()) as Organization;
   } catch (error) {
+    console.log('[JS][createOrganization] Error creating organization:', error);
     if (error instanceof AsgardeoAPIError) {
       throw error;
     }
diff --git a/packages/javascript/src/api/executeEmbeddedSignInFlow.ts b/packages/javascript/src/api/executeEmbeddedSignInFlow.ts
index 3d8bd1b83..e91777e21 100644
--- a/packages/javascript/src/api/executeEmbeddedSignInFlow.ts
+++ b/packages/javascript/src/api/executeEmbeddedSignInFlow.ts
@@ -36,16 +36,15 @@ const executeEmbeddedSignInFlow = async ({
     );
   }
 
-  const {headers: customHeaders, ...otherConfig} = requestConfig;
   const response: Response = await fetch(url ?? `${baseUrl}/oauth2/authn`, {
+    ...requestConfig,
     method: requestConfig.method || 'POST',
     headers: {
       'Content-Type': 'application/json',
       Accept: 'application/json',
-      ...customHeaders,
+      ...requestConfig.headers,
     },
     body: JSON.stringify(payload),
-    ...otherConfig,
   });
 
   if (!response.ok) {
diff --git a/packages/javascript/src/api/executeEmbeddedSignUpFlow.ts b/packages/javascript/src/api/executeEmbeddedSignUpFlow.ts
index 8e2581e7e..8224a1296 100644
--- a/packages/javascript/src/api/executeEmbeddedSignUpFlow.ts
+++ b/packages/javascript/src/api/executeEmbeddedSignUpFlow.ts
@@ -59,19 +59,18 @@ const executeEmbeddedSignUpFlow = async ({
     );
   }
 
-  const {headers: customHeaders, ...otherConfig} = requestConfig;
   const response: Response = await fetch(url ?? `${baseUrl}/api/server/v1/flow/execute`, {
+    ...requestConfig,
     method: requestConfig.method || 'POST',
     headers: {
       'Content-Type': 'application/json',
       Accept: 'application/json',
-      ...customHeaders,
+      ...requestConfig.headers,
     },
     body: JSON.stringify({
       ...(payload ?? {}),
       flowType: EmbeddedFlowType.Registration,
     }),
-    ...otherConfig,
   });
 
   if (!response.ok) {
diff --git a/packages/javascript/src/api/getAllOrganizations.ts b/packages/javascript/src/api/getAllOrganizations.ts
index 0cd7223ce..0d9e53149 100644
--- a/packages/javascript/src/api/getAllOrganizations.ts
+++ b/packages/javascript/src/api/getAllOrganizations.ts
@@ -147,13 +147,13 @@ const getAllOrganizations = async ({
   const resolvedUrl = `${baseUrl}/api/server/v1/organizations?${queryParams.toString()}`;
 
   const requestInit: RequestInit = {
+    ...requestConfig,
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',
       Accept: 'application/json',
       ...requestConfig.headers,
     },
-    ...requestConfig,
   };
 
   try {
diff --git a/packages/javascript/src/api/getBrandingPreference.ts b/packages/javascript/src/api/getBrandingPreference.ts
index 2491353e0..8a040394f 100644
--- a/packages/javascript/src/api/getBrandingPreference.ts
+++ b/packages/javascript/src/api/getBrandingPreference.ts
@@ -139,13 +139,13 @@ const getBrandingPreference = async ({
   }`;
 
   const requestInit: RequestInit = {
+    ...requestConfig,
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',
       Accept: 'application/json',
       ...requestConfig.headers,
     },
-    ...requestConfig,
   };
 
   try {
diff --git a/packages/javascript/src/api/getMeOrganizations.ts b/packages/javascript/src/api/getMeOrganizations.ts
index 159a4158c..984a3de7f 100644
--- a/packages/javascript/src/api/getMeOrganizations.ts
+++ b/packages/javascript/src/api/getMeOrganizations.ts
@@ -159,13 +159,13 @@ const getMeOrganizations = async ({
   const resolvedUrl = `${baseUrl}/api/users/v1/me/organizations?${queryParams.toString()}`;
 
   const requestInit: RequestInit = {
+    ...requestConfig,
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',
       Accept: 'application/json',
       ...requestConfig.headers,
     },
-    ...requestConfig,
   };
 
   try {
diff --git a/packages/javascript/src/api/getOrganization.ts b/packages/javascript/src/api/getOrganization.ts
index 0c7912157..f40012ee6 100644
--- a/packages/javascript/src/api/getOrganization.ts
+++ b/packages/javascript/src/api/getOrganization.ts
@@ -142,13 +142,13 @@ const getOrganization = async ({
   const resolvedUrl = `${baseUrl}/api/server/v1/organizations/${organizationId}`;
 
   const requestInit: RequestInit = {
+    ...requestConfig,
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',
       Accept: 'application/json',
       ...requestConfig.headers,
     },
-    ...requestConfig,
   };
 
   try {
diff --git a/packages/javascript/src/api/getSchemas.ts b/packages/javascript/src/api/getSchemas.ts
index 495872f2a..435bc0890 100644
--- a/packages/javascript/src/api/getSchemas.ts
+++ b/packages/javascript/src/api/getSchemas.ts
@@ -106,13 +106,13 @@ const getSchemas = async ({url, baseUrl, fetcher, ...requestConfig}: GetSchemasC
   const resolvedUrl: string = url ?? `${baseUrl}/scim2/Schemas`;
 
   const requestInit: RequestInit = {
+    ...requestConfig,
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',
       Accept: 'application/json',
       ...requestConfig.headers,
     },
-    ...requestConfig,
   };
 
   try {
diff --git a/packages/javascript/src/api/getScim2Me.ts b/packages/javascript/src/api/getScim2Me.ts
index a690678c3..5cba4f2e8 100644
--- a/packages/javascript/src/api/getScim2Me.ts
+++ b/packages/javascript/src/api/getScim2Me.ts
@@ -106,13 +106,13 @@ const getScim2Me = async ({url, baseUrl, fetcher, ...requestConfig}: GetScim2MeC
   const resolvedUrl: string = url ?? `${baseUrl}/scim2/Me`
 
   const requestInit: RequestInit = {
+    ...requestConfig,
     method: 'GET',
     headers: {
       'Content-Type': 'application/scim+json',
       Accept: 'application/json',
       ...requestConfig.headers,
     },
-    ...requestConfig,
   };
 
   try {
diff --git a/packages/javascript/src/api/getUserInfo.ts b/packages/javascript/src/api/getUserInfo.ts
index 37c719137..087844630 100644
--- a/packages/javascript/src/api/getUserInfo.ts
+++ b/packages/javascript/src/api/getUserInfo.ts
@@ -50,12 +50,13 @@ const getUserInfo = async ({url, ...requestConfig}: Partial<Request>): Promise<U
   }
 
   const response: Response = await fetch(url, {
+    ...requestConfig,
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',
       Accept: 'application/json',
+      ...requestConfig.headers,
     },
-    ...requestConfig,
   });
 
   if (!response.ok) {
diff --git a/packages/javascript/src/api/initializeEmbeddedSignInFlow.ts b/packages/javascript/src/api/initializeEmbeddedSignInFlow.ts
index b0ed76232..d2300f290 100644
--- a/packages/javascript/src/api/initializeEmbeddedSignInFlow.ts
+++ b/packages/javascript/src/api/initializeEmbeddedSignInFlow.ts
@@ -73,16 +73,15 @@ const initializeEmbeddedSignInFlow = async ({
     }
   });
 
-  const {headers: customHeaders, ...otherConfig} = requestConfig;
   const response: Response = await fetch(url ?? `${baseUrl}/oauth2/authorize`, {
+    ...requestConfig,
     method: requestConfig.method || 'POST',
     headers: {
       'Content-Type': 'application/x-www-form-urlencoded',
       Accept: 'application/json',
-      ...customHeaders,
+      ...requestConfig.headers,
     },
     body: searchParams.toString(),
-    ...otherConfig,
   });
 
   if (!response.ok) {
diff --git a/packages/javascript/src/api/updateMeProfile.ts b/packages/javascript/src/api/updateMeProfile.ts
index e95ed4816..90c376f60 100644
--- a/packages/javascript/src/api/updateMeProfile.ts
+++ b/packages/javascript/src/api/updateMeProfile.ts
@@ -116,13 +116,13 @@ const updateMeProfile = async ({
 
   const requestInit: RequestInit = {
     method: 'PATCH',
+    ...requestConfig,
     headers: {
+      ...requestConfig.headers,
       'Content-Type': 'application/scim+json',
       Accept: 'application/json',
-      ...requestConfig.headers,
     },
     body: JSON.stringify(data),
-    ...requestConfig,
   };
 
   try {
diff --git a/packages/javascript/src/api/updateOrganization.ts b/packages/javascript/src/api/updateOrganization.ts
index 64c838662..7b69fae10 100644
--- a/packages/javascript/src/api/updateOrganization.ts
+++ b/packages/javascript/src/api/updateOrganization.ts
@@ -150,6 +150,7 @@ const updateOrganization = async ({
   const resolvedUrl = `${baseUrl}/api/server/v1/organizations/${organizationId}`;
 
   const requestInit: RequestInit = {
+    ...requestConfig,
     method: 'PATCH',
     headers: {
       'Content-Type': 'application/json',
@@ -157,7 +158,6 @@ const updateOrganization = async ({
       ...requestConfig.headers,
     },
     body: JSON.stringify(operations),
-    ...requestConfig,
   };
 
   try {

From 08f0bc5ac96c91682fd385ae2913d13c31c0ef60 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 2 Jul 2025 02:00:49 +0530
Subject: [PATCH 11/21] feat: implement updateUserProfile method across client
 and server components for user profile management

---
 .../src/AsgardeoJavaScriptClient.ts           |  2 ++
 packages/javascript/src/models/client.ts      |  2 ++
 packages/nextjs/src/AsgardeoNextClient.ts     |  6 ++--
 .../presentation/UserProfile/UserProfile.tsx  |  8 ++---
 .../contexts/Asgardeo/AsgardeoProvider.tsx    | 33 ++++++++++++++++---
 .../nextjs/src/server/AsgardeoProvider.tsx    |  2 ++
 .../server/actions/updateUserProfileAction.ts | 11 ++++---
 packages/react/src/AsgardeoReactClient.ts     |  4 +++
 .../react/src/contexts/User/UserContext.ts    |  9 ++++-
 .../react/src/contexts/User/UserProvider.tsx  | 13 ++++++--
 10 files changed, 72 insertions(+), 18 deletions(-)

diff --git a/packages/javascript/src/AsgardeoJavaScriptClient.ts b/packages/javascript/src/AsgardeoJavaScriptClient.ts
index 905ad0783..756549128 100644
--- a/packages/javascript/src/AsgardeoJavaScriptClient.ts
+++ b/packages/javascript/src/AsgardeoJavaScriptClient.ts
@@ -46,6 +46,8 @@ abstract class AsgardeoJavaScriptClient<T = Config> implements AsgardeoClient<T>
 
   abstract isSignedIn(): Promise<boolean>;
 
+  abstract updateUserProfile(payload: any, userId?: string): Promise<User>;
+
   abstract getConfiguration(): T;
 
   abstract signIn(
diff --git a/packages/javascript/src/models/client.ts b/packages/javascript/src/models/client.ts
index 405c7e266..1751b121c 100644
--- a/packages/javascript/src/models/client.ts
+++ b/packages/javascript/src/models/client.ts
@@ -59,6 +59,8 @@ export interface AsgardeoClient<T> {
 
   getConfiguration(): T;
 
+  updateUserProfile(payload: any, userId?: string): Promise<User>;
+
   /**
    * Gets user information from the session.
    *
diff --git a/packages/nextjs/src/AsgardeoNextClient.ts b/packages/nextjs/src/AsgardeoNextClient.ts
index 426d51499..46699726d 100644
--- a/packages/nextjs/src/AsgardeoNextClient.ts
+++ b/packages/nextjs/src/AsgardeoNextClient.ts
@@ -188,7 +188,7 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
     }
   }
 
-  async updateUserProfile(payload: any, userId?: string) {
+  override async updateUserProfile(payload: any, userId?: string): Promise<User> {
     await this.ensureInitialized();
 
     try {
@@ -204,7 +204,7 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
       });
     } catch (error) {
       throw new AsgardeoRuntimeError(
-        `Failed to update user profile: ${error instanceof Error ? error.message : 'Unknown error'}`,
+        `Failed to update user profile: ${error instanceof Error ? error.message : String(error)}`,
         'AsgardeoNextClient-UpdateProfileError-001',
         'react',
         'An error occurred while updating the user profile. Please check your configuration and network connection.',
@@ -226,7 +226,7 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
       });
     } catch (error) {
       throw new AsgardeoRuntimeError(
-        'Failed to create organization.',
+        `Failed to create organization: ${error instanceof Error ? error.message : String(error)}`,
         'AsgardeoReactClient-createOrganization-RuntimeError-001',
         'nextjs',
         'An error occurred while creating the organization. Please check your configuration and network connection.',
diff --git a/packages/nextjs/src/client/components/presentation/UserProfile/UserProfile.tsx b/packages/nextjs/src/client/components/presentation/UserProfile/UserProfile.tsx
index 73c244274..6465b4e73 100644
--- a/packages/nextjs/src/client/components/presentation/UserProfile/UserProfile.tsx
+++ b/packages/nextjs/src/client/components/presentation/UserProfile/UserProfile.tsx
@@ -23,7 +23,7 @@ import {BaseUserProfile, BaseUserProfileProps, useUser} from '@asgardeo/react';
 import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
 import getSessionId from '../../../../server/actions/getSessionId';
 import updateUserProfileAction from '../../../../server/actions/updateUserProfileAction';
-import { Schema, User } from '@asgardeo/node';
+import {Schema, User} from '@asgardeo/node';
 
 /**
  * Props for the UserProfile component.
@@ -56,11 +56,11 @@ export type UserProfileProps = Omit<BaseUserProfileProps, 'user' | 'profile' | '
  */
 const UserProfile: FC<UserProfileProps> = ({...rest}: UserProfileProps): ReactElement => {
   const {baseUrl} = useAsgardeo();
-  const {profile, flattenedProfile, schemas, revalidateProfile} = useUser();
+  const {profile, flattenedProfile, schemas, onUpdateProfile, updateProfile} = useUser();
 
   const handleProfileUpdate = async (payload: any): Promise<void> => {
-    await updateUserProfileAction(payload, (await getSessionId()) as string);
-    await revalidateProfile();
+    const result = await updateProfile(payload, (await getSessionId()) as string);
+    onUpdateProfile(result?.data?.user);
   };
 
   return (
diff --git a/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx
index 30bda02b6..db75a032a 100644
--- a/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx
+++ b/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -23,7 +23,9 @@ import {
   EmbeddedFlowExecuteRequestConfig,
   EmbeddedFlowExecuteRequestPayload,
   EmbeddedSignInFlowHandleRequestPayload,
+  generateFlattenedUserProfile,
   Organization,
+  UpdateMeProfileConfig,
   User,
   UserProfile,
 } from '@asgardeo/node';
@@ -59,6 +61,10 @@ export type AsgardeoClientProviderProps = Partial<Omit<AsgardeoProviderProps, 'b
     userProfile: UserProfile;
     currentOrganization: Organization;
     user: User | null;
+    updateProfile: (
+      requestConfig: UpdateMeProfileConfig,
+      sessionId?: string,
+    ) => Promise<{success: boolean; data: {user: User}; error: string}>;
   };
 
 const AsgardeoClientProvider: FC<PropsWithChildren<AsgardeoClientProviderProps>> = ({
@@ -72,16 +78,26 @@ const AsgardeoClientProvider: FC<PropsWithChildren<AsgardeoClientProviderProps>>
   isSignedIn,
   signInUrl,
   signUpUrl,
-  user,
-  userProfile,
+  user: _user,
+  userProfile: _userProfile,
   currentOrganization,
+  updateProfile,
 }: PropsWithChildren<AsgardeoClientProviderProps>) => {
   const reRenderCheckRef: RefObject<boolean> = useRef(false);
   const router = useRouter();
   const searchParams = useSearchParams();
   const [isDarkMode, setIsDarkMode] = useState(false);
   const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [_userProfile, setUserProfile] = useState<UserProfile | null>(userProfile);
+  const [user, setUser] = useState<User | null>(_user);
+  const [userProfile, setUserProfile] = useState<UserProfile>(_userProfile);
+
+  useEffect(() => {
+    setUserProfile(_userProfile);
+  }, [_userProfile]);
+
+  useEffect(() => {
+    setUser(_user);
+  }, [_user]);
 
   // Handle OAuth callback automatically
   useEffect(() => {
@@ -267,12 +283,21 @@ const AsgardeoClientProvider: FC<PropsWithChildren<AsgardeoClientProviderProps>>
     [baseUrl, user, isSignedIn, isLoading, signInUrl, signUpUrl],
   );
 
+  const handleProfileUpdate = (payload: User): void => {
+    setUser(payload);
+    setUserProfile(prev => ({
+      ...prev,
+      profile: payload,
+      flattenedProfile: generateFlattenedUserProfile(payload, prev?.schemas),
+    }));
+  };
+
   return (
     <AsgardeoContext.Provider value={contextValue}>
       <I18nProvider preferences={preferences?.i18n}>
         <ThemeProvider theme={preferences?.theme?.overrides} mode={isDarkMode ? 'dark' : 'light'}>
           <FlowProvider>
-            <UserProvider profile={userProfile}>
+            <UserProvider profile={userProfile} onUpdateProfile={handleProfileUpdate} updateProfile={updateProfile}>
               <OrganizationProvider
                 getOrganizations={async () => {
                   const result = await getOrganizationsAction((await getSessionId()) as string);
diff --git a/packages/nextjs/src/server/AsgardeoProvider.tsx b/packages/nextjs/src/server/AsgardeoProvider.tsx
index faf2980b2..3b6a7892b 100644
--- a/packages/nextjs/src/server/AsgardeoProvider.tsx
+++ b/packages/nextjs/src/server/AsgardeoProvider.tsx
@@ -31,6 +31,7 @@ import signUpAction from './actions/signUpAction';
 import handleOAuthCallbackAction from './actions/handleOAuthCallbackAction';
 import {AsgardeoProviderProps} from '@asgardeo/react';
 import getCurrentOrganizationAction from './actions/getCurrentOrganizationAction';
+import updateUserProfileAction from './actions/updateUserProfileAction';
 
 /**
  * Props interface of {@link AsgardeoServerProvider}
@@ -119,6 +120,7 @@ const AsgardeoServerProvider: FC<PropsWithChildren<AsgardeoServerProviderProps>>
       user={user}
       currentOrganization={currentOrganization}
       userProfile={userProfile}
+      updateProfile={updateUserProfileAction}
       isSignedIn={_isSignedIn}
     >
       {children}
diff --git a/packages/nextjs/src/server/actions/updateUserProfileAction.ts b/packages/nextjs/src/server/actions/updateUserProfileAction.ts
index dabda4f35..69ec47d5b 100644
--- a/packages/nextjs/src/server/actions/updateUserProfileAction.ts
+++ b/packages/nextjs/src/server/actions/updateUserProfileAction.ts
@@ -18,25 +18,28 @@
 
 'use server';
 
-import {User, UserProfile} from '@asgardeo/node';
+import {UpdateMeProfileConfig, User, UserProfile} from '@asgardeo/node';
 import AsgardeoNextClient from '../../AsgardeoNextClient';
 
 /**
  * Server action to get the current user.
  * Returns the user profile if signed in.
  */
-const updateUserProfileAction = async (payload: any, sessionId: string) => {
+const updateUserProfileAction = async (
+  payload: UpdateMeProfileConfig,
+  sessionId?: string,
+): Promise<{success: boolean; data: {user: User}; error: string}> => {
   try {
     const client = AsgardeoNextClient.getInstance();
     const user: User = await client.updateUserProfile(payload, sessionId);
-    return {success: true, data: {user}, error: null};
+    return {success: true, data: {user}, error: ""};
   } catch (error) {
     return {
       success: false,
       data: {
         user: {},
       },
-      error: 'Failed to get user profile',
+      error: `Failed to get user profile: ${error instanceof Error ? error.message : String(error)}`,
     };
   }
 };
diff --git a/packages/react/src/AsgardeoReactClient.ts b/packages/react/src/AsgardeoReactClient.ts
index 19af191c7..6243db638 100644
--- a/packages/react/src/AsgardeoReactClient.ts
+++ b/packages/react/src/AsgardeoReactClient.ts
@@ -62,6 +62,10 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
     return this.asgardeo.init(config as any);
   }
 
+  override async updateUserProfile(payload: any, userId?: string): Promise<User> {
+    throw new Error('Not implemented');
+  }
+
   override async getUser(): Promise<User> {
     try {
       const configData = await this.asgardeo.getConfigData();
diff --git a/packages/react/src/contexts/User/UserContext.ts b/packages/react/src/contexts/User/UserContext.ts
index d74928bbf..375f810ce 100644
--- a/packages/react/src/contexts/User/UserContext.ts
+++ b/packages/react/src/contexts/User/UserContext.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import {User, Schema, FlattenedSchema} from '@asgardeo/browser';
+import {User, Schema, UpdateMeProfileConfig, OrganizationDetails} from '@asgardeo/browser';
 import {Context, createContext} from 'react';
 
 /**
@@ -27,6 +27,11 @@ export type UserContextProps = {
   profile: User | null;
   revalidateProfile: () => Promise<void>;
   schemas: Schema[] | null;
+  updateProfile: (
+    requestConfig: UpdateMeProfileConfig,
+    sessionId?: string,
+  ) => Promise<{success: boolean; data: {user: User}; error: string}>;
+  onUpdateProfile: (payload: User) => void;
 };
 
 /**
@@ -37,6 +42,8 @@ const UserContext: Context<UserContextProps | null> = createContext<null | UserC
   schemas: null,
   flattenedProfile: null,
   revalidateProfile: () => null,
+  updateProfile: () => null,
+  onUpdateProfile: () => null,
 });
 
 UserContext.displayName = 'UserContext';
diff --git a/packages/react/src/contexts/User/UserProvider.tsx b/packages/react/src/contexts/User/UserProvider.tsx
index c2c486fab..e2871ae12 100644
--- a/packages/react/src/contexts/User/UserProvider.tsx
+++ b/packages/react/src/contexts/User/UserProvider.tsx
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import {UserProfile} from '@asgardeo/browser';
+import {UpdateMeProfileConfig, User, UserProfile} from '@asgardeo/browser';
 import {FC, PropsWithChildren, ReactElement, useEffect, useState, useCallback, useMemo} from 'react';
 import UserContext from './UserContext';
 
@@ -26,6 +26,11 @@ import UserContext from './UserContext';
 export interface UserProviderProps {
   profile: UserProfile;
   revalidateProfile?: () => Promise<void>;
+  updateProfile?: (
+    requestConfig: UpdateMeProfileConfig,
+    sessionId?: string,
+  ) => Promise<{success: boolean; data: {user: User}; error: string}>;
+  onUpdateProfile?: (payload: User) => void;
 }
 
 /**
@@ -60,6 +65,8 @@ const UserProvider: FC<PropsWithChildren<UserProviderProps>> = ({
   children,
   profile,
   revalidateProfile,
+  onUpdateProfile,
+  updateProfile,
 }: PropsWithChildren<UserProviderProps>): ReactElement => {
   const contextValue = useMemo(
     () => ({
@@ -67,8 +74,10 @@ const UserProvider: FC<PropsWithChildren<UserProviderProps>> = ({
       profile: profile?.profile,
       flattenedProfile: profile?.flattenedProfile,
       revalidateProfile,
+      updateProfile,
+      onUpdateProfile,
     }),
-    [profile],
+    [profile, onUpdateProfile, revalidateProfile, updateProfile],
   );
 
   return <UserContext.Provider value={contextValue}>{children}</UserContext.Provider>;

From 876eb230782091c6f5d3c5c42a9cc93f9fb6d61d Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 2 Jul 2025 02:17:54 +0530
Subject: [PATCH 12/21] fix(react): enhance OrganizationProvider with fetching
 state management and improved error handling

---
 .../Organization/OrganizationProvider.tsx     | 39 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/contexts/Organization/OrganizationProvider.tsx b/packages/react/src/contexts/Organization/OrganizationProvider.tsx
index 3f3dd3207..5eccc1b05 100644
--- a/packages/react/src/contexts/Organization/OrganizationProvider.tsx
+++ b/packages/react/src/contexts/Organization/OrganizationProvider.tsx
@@ -119,6 +119,7 @@ const OrganizationProvider: FC<PropsWithChildren<OrganizationProviderProps>> = (
     limit?: number;
     recursive?: boolean;
   }>({});
+  const [isFetching, setIsFetching] = useState<boolean>(false);
 
   /**
    * Fetches organizations from the API
@@ -211,10 +212,12 @@ const OrganizationProvider: FC<PropsWithChildren<OrganizationProviderProps>> = (
     async (config = {}): Promise<void> => {
       const {filter = '', limit = 10, recursive = false, reset = false} = config;
 
-      if (!isSignedIn || !baseUrl) {
+      if (!isSignedIn || !baseUrl || isFetching) {
         return;
       }
 
+      setIsFetching(true);
+
       try {
         if (reset) {
           setIsLoading(true);
@@ -250,6 +253,22 @@ const OrganizationProvider: FC<PropsWithChildren<OrganizationProviderProps>> = (
           limit,
           recursive,
           ...(reset ? {} : {startIndex: (currentPage - 1) * limit}),
+          fetcher: async (url: string, config: RequestInit): Promise<Response> => {
+            try {
+              const response = await fetch(url, config);
+              if (response.status === 401 || response.status === 403) {
+                const error = new Error('Insufficient permissions');
+                (error as any).status = response.status;
+                throw error;
+              }
+              return response;
+            } catch (error: any) {
+              if (error.status === 401 || error.status === 403) {
+                error.noRetry = true;
+              }
+              throw error;
+            }
+          },
         });
 
         // Combine organization data with switch access information
@@ -273,14 +292,30 @@ const OrganizationProvider: FC<PropsWithChildren<OrganizationProviderProps>> = (
         setHasMore(response.hasMore || false);
         setTotalCount(response.totalCount || organizationsWithAccess.length);
       } catch (fetchError: any) {
-        const errorMessage: string = fetchError.message || 'Failed to fetch paginated organizations';
+        // If authorization/scope error, prevent retry loops.
+        const isAuthError = fetchError.status === 403 || fetchError.status === 401 || fetchError.noRetry === true;
+
+        const errorMessage: string = isAuthError
+          ? 'Insufficient permissions to fetch organizations'
+          : fetchError.message || 'Failed to fetch paginated organizations';
+
         setError(errorMessage);
+
+        if (isAuthError) {
+          setHasMore(false);
+          setIsLoadingMore(false);
+          setIsLoading(false);
+
+          return;
+        }
+
         if (onError) {
           onError(errorMessage);
         }
       } finally {
         setIsLoading(false);
         setIsLoadingMore(false);
+        setIsFetching(false);
       }
     },
     [baseUrl, isSignedIn, onError, switchableOrgIds, currentPage],

From 8f2efc4185678d9bcfab2c1676c16b45c72de2f1 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 2 Jul 2025 04:07:31 +0530
Subject: [PATCH 13/21] feat(react): add getDecodedIdToken method and refactor
 baseUrl handling in AsgardeoProvider

---
 packages/react/src/AsgardeoReactClient.ts     |  6 +++-
 .../contexts/Asgardeo/AsgardeoProvider.tsx    | 31 +++++++++++++------
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/packages/react/src/AsgardeoReactClient.ts b/packages/react/src/AsgardeoReactClient.ts
index 6243db638..155b8dd88 100644
--- a/packages/react/src/AsgardeoReactClient.ts
+++ b/packages/react/src/AsgardeoReactClient.ts
@@ -80,6 +80,10 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
     }
   }
 
+  async getDecodedIdToken(sessionId?: string): Promise<IdToken> {
+    return this.asgardeo.getDecodedIdToken(sessionId);
+  }
+
   async getUserProfile(): Promise<UserProfile> {
     try {
       const configData = await this.asgardeo.getConfigData();
@@ -215,7 +219,7 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
       });
     }
 
-    return this.asgardeo.signIn(arg1 as any) as unknown as Promise<User>;
+    return (await this.asgardeo.signIn(arg1 as any)) as unknown as Promise<User>;
   }
 
   override signOut(options?: SignOutOptions, afterSignOut?: (afterSignOutUrl: string) => void): Promise<string>;
diff --git a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
index 9670fec45..a8f023442 100644
--- a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
+++ b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -45,7 +45,7 @@ export type AsgardeoProviderProps = AsgardeoReactConfig;
 const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
   afterSignInUrl = window.location.origin,
   afterSignOutUrl = window.location.origin,
-  baseUrl,
+  baseUrl: _baseUrl,
   clientId,
   children,
   scopes,
@@ -64,6 +64,11 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
   const [isInitializedSync, setIsInitializedSync] = useState<boolean>(false);
 
   const [userProfile, setUserProfile] = useState<UserProfile | null>(null);
+  const [baseUrl, setBaseUrl] = useState<string>(_baseUrl);
+
+  useEffect(() => {
+    setBaseUrl(_baseUrl);
+  }, [_baseUrl]);
 
   useEffect(() => {
     (async (): Promise<void> => {
@@ -99,9 +104,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
     (async (): Promise<void> => {
       // User is already authenticated. Skip...
       if (await asgardeo.isSignedIn()) {
-        setUser(await asgardeo.getUser());
-        setUserProfile(await asgardeo.getUserProfile());
-        setCurrentOrganization(await asgardeo.getCurrentOrganization());
+        await updateSession();
 
         return;
       }
@@ -173,14 +176,24 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
     })();
   }, [asgardeo]);
 
+  const updateSession = async (): Promise<void> => {
+    setUser(await asgardeo.getUser());
+    setUserProfile(await asgardeo.getUserProfile());
+    setCurrentOrganization(await asgardeo.getCurrentOrganization());
+
+    // If there's a `user_org` claim in the ID token,
+    // Treat this login as a organization login.
+    if ((await asgardeo.getDecodedIdToken())?.['user_org']) {
+      setBaseUrl(`${(await asgardeo.getConfiguration()).baseUrl}/o`);
+    }
+  };
+
   const signIn = async (...args: any): Promise<User> => {
     try {
       const response: User = await asgardeo.signIn(...args);
 
       if (await asgardeo.isSignedIn()) {
-        setUser(await asgardeo.getUser());
-        setUserProfile(await asgardeo.getUserProfile());
-        setCurrentOrganization(await asgardeo.getCurrentOrganization());
+        await updateSession();
       }
 
       return response;
@@ -210,9 +223,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
       await asgardeo.switchOrganization(organization);
 
       if (await asgardeo.isSignedIn()) {
-        setUser(await asgardeo.getUser());
-        setUserProfile(await asgardeo.getUserProfile());
-        setCurrentOrganization(await asgardeo.getCurrentOrganization());
+        await updateSession();
       }
     } catch (error) {
       throw new AsgardeoRuntimeError(

From 82d6078aef0cd2223d44083528cced1169407f1f Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 2 Jul 2025 04:07:42 +0530
Subject: [PATCH 14/21] feat: update getDecodedIdToken method to accept an
 optional sessionId parameter across multiple components

---
 packages/browser/src/__legacy__/client.ts                   | 6 +++---
 .../browser/src/__legacy__/clients/main-thread-client.ts    | 2 +-
 .../browser/src/__legacy__/clients/web-worker-client.ts     | 2 +-
 .../browser/src/__legacy__/helpers/authentication-helper.ts | 4 ++--
 packages/browser/src/__legacy__/models/client.ts            | 4 ++--
 packages/browser/src/__legacy__/models/web-worker.ts        | 2 +-
 packages/browser/src/__legacy__/worker/worker-core.ts       | 4 ++--
 packages/nextjs/src/AsgardeoNextClient.ts                   | 4 ++--
 packages/react/src/__temp__/api.ts                          | 4 ++--
 packages/react/src/__temp__/models.ts                       | 2 +-
 10 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/browser/src/__legacy__/client.ts b/packages/browser/src/__legacy__/client.ts
index f25e14dd0..caae1d857 100755
--- a/packages/browser/src/__legacy__/client.ts
+++ b/packages/browser/src/__legacy__/client.ts
@@ -51,7 +51,7 @@ import {SPAUtils} from './utils';
  * Default configurations.
  */
 const DefaultConfig: Partial<AuthClientConfig<Config>> = {
-  autoLogoutOnTokenRefreshError: true,
+  autoLogoutOnTokenRefreshError: false,
   checkSessionInterval: 3,
   enableOIDCSessionManagement: false,
   periodicTokenRefresh: false,
@@ -737,10 +737,10 @@ export class AsgardeoSPAClient {
    *
    * @preserve
    */
-  public async getDecodedIdToken(): Promise<IdToken | undefined> {
+  public async getDecodedIdToken(sessionId?: string): Promise<IdToken | undefined> {
     await this._validateMethod();
 
-    return this._client?.getDecodedIdToken();
+    return this._client?.getDecodedIdToken(sessionId);
   }
 
   /**
diff --git a/packages/browser/src/__legacy__/clients/main-thread-client.ts b/packages/browser/src/__legacy__/clients/main-thread-client.ts
index 294256204..2d1a24ed0 100755
--- a/packages/browser/src/__legacy__/clients/main-thread-client.ts
+++ b/packages/browser/src/__legacy__/clients/main-thread-client.ts
@@ -370,7 +370,7 @@ export const MainThreadClient = async (
 
   const getUser = async (): Promise<User> => _authenticationHelper.getUser();
 
-  const getDecodedIdToken = async (): Promise<IdToken> => _authenticationHelper.getDecodedIdToken();
+  const getDecodedIdToken = async (sessionId?: string): Promise<IdToken> => _authenticationHelper.getDecodedIdToken(sessionId);
 
   const getCrypto = async (): Promise<IsomorphicCrypto> => _authenticationHelper.getCrypto();
 
diff --git a/packages/browser/src/__legacy__/clients/web-worker-client.ts b/packages/browser/src/__legacy__/clients/web-worker-client.ts
index 43ff679f7..9c43b5cbf 100755
--- a/packages/browser/src/__legacy__/clients/web-worker-client.ts
+++ b/packages/browser/src/__legacy__/clients/web-worker-client.ts
@@ -706,7 +706,7 @@ export const WebWorkerClient = async (
       });
   };
 
-  const getDecodedIdToken = (): Promise<IdToken> => {
+  const getDecodedIdToken = (sessionId?: string): Promise<IdToken> => {
     const message: Message<null> = {
       type: GET_DECODED_ID_TOKEN,
     };
diff --git a/packages/browser/src/__legacy__/helpers/authentication-helper.ts b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
index f04d692f7..3ed6137b2 100644
--- a/packages/browser/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
@@ -659,8 +659,8 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
     return this._authenticationClient.getUser();
   }
 
-  public async getDecodedIdToken(): Promise<IdToken> {
-    return this._authenticationClient.getDecodedIdToken();
+  public async getDecodedIdToken(sessionId?: string): Promise<IdToken> {
+    return this._authenticationClient.getDecodedIdToken(sessionId);
   }
 
   public async getDecodedIDPIDToken(): Promise<IdToken> {
diff --git a/packages/browser/src/__legacy__/models/client.ts b/packages/browser/src/__legacy__/models/client.ts
index 1a766886e..c2f65a3e2 100755
--- a/packages/browser/src/__legacy__/models/client.ts
+++ b/packages/browser/src/__legacy__/models/client.ts
@@ -59,7 +59,7 @@ export interface MainThreadClientInterface {
   refreshAccessToken(): Promise<User>;
   revokeAccessToken(): Promise<boolean>;
   getUser(): Promise<User>;
-  getDecodedIdToken(): Promise<IdToken>;
+  getDecodedIdToken(sessionId?: string): Promise<IdToken>;
   getCrypto(): Promise<IsomorphicCrypto>;
   getConfigData(): Promise<AuthClientConfig<MainThreadClientConfig>>;
   getIdToken(): Promise<string>;
@@ -96,7 +96,7 @@ export interface WebWorkerClientInterface {
   getOpenIDProviderEndpoints(): Promise<OIDCEndpoints>;
   getUser(): Promise<User>;
   getConfigData(): Promise<AuthClientConfig<WebWorkerClientConfig>>;
-  getDecodedIdToken(): Promise<IdToken>;
+  getDecodedIdToken(sessionId?: string): Promise<IdToken>;
   getDecodedIDPIDToken(): Promise<IdToken>;
   getCrypto(): Promise<IsomorphicCrypto>;
   getIdToken(): Promise<string>;
diff --git a/packages/browser/src/__legacy__/models/web-worker.ts b/packages/browser/src/__legacy__/models/web-worker.ts
index 97c5c1c6d..84f6ddda1 100755
--- a/packages/browser/src/__legacy__/models/web-worker.ts
+++ b/packages/browser/src/__legacy__/models/web-worker.ts
@@ -53,7 +53,7 @@ export interface WebWorkerCoreInterface {
   refreshAccessToken(): Promise<User>;
   revokeAccessToken(): Promise<boolean>;
   getUser(): Promise<User>;
-  getDecodedIdToken(): Promise<IdToken>;
+  getDecodedIdToken(sessionId?: string): Promise<IdToken>;
   getDecodedIDPIDToken(): Promise<IdToken>;
   getCrypto(): Promise<IsomorphicCrypto>;
   getIdToken(): Promise<string>;
diff --git a/packages/browser/src/__legacy__/worker/worker-core.ts b/packages/browser/src/__legacy__/worker/worker-core.ts
index 2444e4e6a..d5714d90e 100755
--- a/packages/browser/src/__legacy__/worker/worker-core.ts
+++ b/packages/browser/src/__legacy__/worker/worker-core.ts
@@ -166,8 +166,8 @@ export const WebWorkerCore = async (
     return _authenticationHelper.getUser();
   };
 
-  const getDecodedIdToken = async (): Promise<IdToken> => {
-    return _authenticationHelper.getDecodedIdToken();
+  const getDecodedIdToken = async (sessionId?: string): Promise<IdToken> => {
+    return _authenticationHelper.getDecodedIdToken(sessionId);
   };
 
   const getCrypto = async (): Promise<IsomorphicCrypto> => {
diff --git a/packages/nextjs/src/AsgardeoNextClient.ts b/packages/nextjs/src/AsgardeoNextClient.ts
index 46699726d..d7369d6bf 100644
--- a/packages/nextjs/src/AsgardeoNextClient.ts
+++ b/packages/nextjs/src/AsgardeoNextClient.ts
@@ -182,8 +182,8 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
     } catch (error) {
       return {
         schemas: [],
-        flattenedProfile: await this.asgardeo.getDecodedIdToken(),
-        profile: await this.asgardeo.getDecodedIdToken(),
+        flattenedProfile: await this.asgardeo.getDecodedIdToken(userId),
+        profile: await this.asgardeo.getDecodedIdToken(userId),
       };
     }
   }
diff --git a/packages/react/src/__temp__/api.ts b/packages/react/src/__temp__/api.ts
index 8db768dc5..83e267684 100644
--- a/packages/react/src/__temp__/api.ts
+++ b/packages/react/src/__temp__/api.ts
@@ -296,8 +296,8 @@ class AuthAPI {
    * @return {Promise<DecodedIDTokenPayloadInterface>} - A Promise that resolves with
    * the decoded payload of the id token.
    */
-  public async getDecodedIdToken(): Promise<IdToken> {
-    return this._client.getDecodedIdToken();
+  public async getDecodedIdToken(sessionId?: string): Promise<IdToken> {
+    return this._client.getDecodedIdToken(sessionId);
   }
 
   /**
diff --git a/packages/react/src/__temp__/models.ts b/packages/react/src/__temp__/models.ts
index fc500cf45..537f7dc02 100644
--- a/packages/react/src/__temp__/models.ts
+++ b/packages/react/src/__temp__/models.ts
@@ -96,7 +96,7 @@ export interface AuthContextInterface {
   getOpenIDProviderEndpoints(): Promise<OIDCEndpoints>;
   getHttpClient(): Promise<HttpClientInstance>;
   getDecodedIDPIDToken(): Promise<IdToken>;
-  getDecodedIdToken(): Promise<IdToken>;
+  getDecodedIdToken(sessionId?: string): Promise<IdToken>;
   getIdToken(): Promise<string>;
   getAccessToken(): Promise<string>;
   refreshAccessToken(): Promise<User>;

From 7d26677c049648ad131db44ad4f810c43134d13c Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 2 Jul 2025 04:40:07 +0530
Subject: [PATCH 15/21] feat(react): implement profile update handling in
 UserProfile and AsgardeoProvider components

---
 .../presentation/UserProfile/UserProfile.tsx      |  8 +++++---
 .../src/contexts/Asgardeo/AsgardeoProvider.tsx    | 15 +++++++++++----
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/components/presentation/UserProfile/UserProfile.tsx b/packages/react/src/components/presentation/UserProfile/UserProfile.tsx
index 25d138954..56e3d7219 100644
--- a/packages/react/src/components/presentation/UserProfile/UserProfile.tsx
+++ b/packages/react/src/components/presentation/UserProfile/UserProfile.tsx
@@ -21,6 +21,7 @@ import BaseUserProfile, {BaseUserProfileProps} from './BaseUserProfile';
 import updateMeProfile from '../../../api/updateMeProfile';
 import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
 import useUser from '../../../contexts/User/useUser';
+import {User} from '@asgardeo/browser';
 
 /**
  * Props for the UserProfile component.
@@ -53,11 +54,12 @@ export type UserProfileProps = Omit<BaseUserProfileProps, 'user' | 'profile' | '
  */
 const UserProfile: FC<UserProfileProps> = ({...rest}: UserProfileProps): ReactElement => {
   const {baseUrl} = useAsgardeo();
-  const {profile, flattenedProfile, schemas, revalidateProfile} = useUser();
+  const {profile, flattenedProfile, schemas, onUpdateProfile} = useUser();
 
   const handleProfileUpdate = async (payload: any): Promise<void> => {
-    await updateMeProfile({baseUrl, payload});
-    await revalidateProfile();
+    const response: User = await updateMeProfile({baseUrl, payload});
+
+    onUpdateProfile(response);
   };
 
   return (
diff --git a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
index a8f023442..12b1ea4e8 100644
--- a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
+++ b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -20,6 +20,7 @@ import {
   AsgardeoRuntimeError,
   EmbeddedFlowExecuteRequestPayload,
   EmbeddedFlowExecuteResponse,
+  generateFlattenedUserProfile,
   Organization,
   SignInOptions,
   SignOutOptions,
@@ -242,6 +243,15 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
     return preferences.theme.mode === 'dark';
   }, [preferences?.theme?.mode]);
 
+  const handleProfileUpdate = (payload: User): void => {
+    setUser(payload);
+    setUserProfile(prev => ({
+      ...prev,
+      profile: payload,
+      flattenedProfile: generateFlattenedUserProfile(payload, prev?.schemas),
+    }));
+  };
+
   return (
     <AsgardeoContext.Provider
       value={{
@@ -262,10 +272,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
       <I18nProvider preferences={preferences?.i18n}>
         <ThemeProvider theme={preferences?.theme?.overrides} mode={isDarkMode ? 'dark' : 'light'}>
           <FlowProvider>
-            <UserProvider
-              profile={userProfile}
-              revalidateProfile={async () => setUserProfile(await asgardeo.getUserProfile())}
-            >
+            <UserProvider profile={userProfile} onUpdateProfile={handleProfileUpdate}>
               <OrganizationProvider
                 getOrganizations={async () => asgardeo.getOrganizations()}
                 currentOrganization={currentOrganization}

From 05bc87972710ecbdf67453648eaf20df30f0f788 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 2 Jul 2025 04:59:50 +0530
Subject: [PATCH 16/21] feat: enhance AsgardeoClient interface and
 implementations with optional parameters for user and organization methods

---
 .../src/AsgardeoJavaScriptClient.ts           |  8 ++---
 packages/javascript/src/models/client.ts      |  8 ++---
 .../nextjs/src/server/AsgardeoProvider.tsx    |  4 ++-
 packages/react/src/AsgardeoReactClient.ts     | 30 +++++++++++++------
 .../contexts/Asgardeo/AsgardeoProvider.tsx    | 13 ++++----
 5 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/packages/javascript/src/AsgardeoJavaScriptClient.ts b/packages/javascript/src/AsgardeoJavaScriptClient.ts
index 756549128..0b300faa5 100644
--- a/packages/javascript/src/AsgardeoJavaScriptClient.ts
+++ b/packages/javascript/src/AsgardeoJavaScriptClient.ts
@@ -34,13 +34,13 @@ abstract class AsgardeoJavaScriptClient<T = Config> implements AsgardeoClient<T>
 
   abstract initialize(config: T): Promise<boolean>;
 
-  abstract getUser(): Promise<User>;
+  abstract getUser(options?: any): Promise<User>;
 
-  abstract getOrganizations(): Promise<Organization[]>;
+  abstract getOrganizations(options?: any): Promise<Organization[]>;
 
-  abstract getCurrentOrganization(): Promise<Organization | null>;
+  abstract getCurrentOrganization(sessionId?: string): Promise<Organization | null>;
 
-  abstract getUserProfile(): Promise<UserProfile>;
+  abstract getUserProfile(options?: any): Promise<UserProfile>;
 
   abstract isLoading(): boolean;
 
diff --git a/packages/javascript/src/models/client.ts b/packages/javascript/src/models/client.ts
index 1751b121c..d78a73012 100644
--- a/packages/javascript/src/models/client.ts
+++ b/packages/javascript/src/models/client.ts
@@ -41,14 +41,14 @@ export interface AsgardeoClient<T> {
    *
    * @returns Associated organizations.
    */
-  getOrganizations(): Promise<Organization[]>;
+  getOrganizations(options?: any): Promise<Organization[]>;
 
   /**
    * Gets the current organization of the user.
    *
    * @returns The current organization if available, otherwise null.
    */
-  getCurrentOrganization(): Promise<Organization | null>;
+  getCurrentOrganization(sessionId?: string): Promise<Organization | null>;
 
   /**
    * Switches the current organization to the specified one.
@@ -66,14 +66,14 @@ export interface AsgardeoClient<T> {
    *
    * @returns User object containing user details.
    */
-  getUser(): Promise<User>;
+  getUser(options?: any): Promise<User>;
 
   /**
    * Fetches the user profile along with its schemas and a flattened version of the profile.
    *
    * @returns A promise resolving to a UserProfile object containing the user's profile information.
    */
-  getUserProfile(): Promise<UserProfile>;
+  getUserProfile(options?: any): Promise<UserProfile>;
 
   /**
    * Initializes the authentication client with provided configuration.
diff --git a/packages/nextjs/src/server/AsgardeoProvider.tsx b/packages/nextjs/src/server/AsgardeoProvider.tsx
index 3b6a7892b..7be2044e2 100644
--- a/packages/nextjs/src/server/AsgardeoProvider.tsx
+++ b/packages/nextjs/src/server/AsgardeoProvider.tsx
@@ -16,9 +16,11 @@
  * under the License.
  */
 
+'use server';
+
 import {FC, PropsWithChildren, ReactElement} from 'react';
 import {AsgardeoRuntimeError, Organization, User, UserProfile} from '@asgardeo/node';
-import AsgardeoClientProvider, {AsgardeoClientProviderProps} from '../client/contexts/Asgardeo/AsgardeoProvider';
+import AsgardeoClientProvider from '../client/contexts/Asgardeo/AsgardeoProvider';
 import AsgardeoNextClient from '../AsgardeoNextClient';
 import signInAction from './actions/signInAction';
 import signOutAction from './actions/signOutAction';
diff --git a/packages/react/src/AsgardeoReactClient.ts b/packages/react/src/AsgardeoReactClient.ts
index 155b8dd88..d708fc46c 100644
--- a/packages/react/src/AsgardeoReactClient.ts
+++ b/packages/react/src/AsgardeoReactClient.ts
@@ -66,10 +66,14 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
     throw new Error('Not implemented');
   }
 
-  override async getUser(): Promise<User> {
+  override async getUser(options?: any): Promise<User> {
     try {
-      const configData = await this.asgardeo.getConfigData();
-      const baseUrl = configData?.baseUrl;
+      let baseUrl = options?.baseUrl;
+
+      if (!baseUrl) {
+        const configData = await this.asgardeo.getConfigData();
+        baseUrl = configData?.baseUrl;
+      }
 
       const profile = await getScim2Me({baseUrl});
       const schemas = await getSchemas({baseUrl});
@@ -84,10 +88,14 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
     return this.asgardeo.getDecodedIdToken(sessionId);
   }
 
-  async getUserProfile(): Promise<UserProfile> {
+  async getUserProfile(options?: any): Promise<UserProfile> {
     try {
-      const configData = await this.asgardeo.getConfigData();
-      const baseUrl = configData?.baseUrl;
+      let baseUrl = options?.baseUrl;
+
+      if (!baseUrl) {
+        const configData = await this.asgardeo.getConfigData();
+        baseUrl = configData?.baseUrl;
+      }
 
       const profile = await getScim2Me({baseUrl});
       const schemas = await getSchemas({baseUrl});
@@ -110,10 +118,14 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
     }
   }
 
-  override async getOrganizations(): Promise<Organization[]> {
+  override async getOrganizations(options?: any): Promise<Organization[]> {
     try {
-      const configData = await this.asgardeo.getConfigData();
-      const baseUrl = configData?.baseUrl;
+      let baseUrl = options?.baseUrl;
+
+      if (!baseUrl) {
+        const configData = await this.asgardeo.getConfigData();
+        baseUrl = configData?.baseUrl;
+      }
 
       const organizations = await getMeOrganizations({baseUrl});
 
diff --git a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
index 12b1ea4e8..636bb97f0 100644
--- a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
+++ b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -27,7 +27,7 @@ import {
   User,
   UserProfile,
 } from '@asgardeo/browser';
-import {FC, RefObject, PropsWithChildren, ReactElement, useEffect, useMemo, useRef, useState, use} from 'react';
+import {FC, RefObject, PropsWithChildren, ReactElement, useEffect, useMemo, useRef, useState} from 'react';
 import AsgardeoContext from './AsgardeoContext';
 import AsgardeoReactClient from '../../AsgardeoReactClient';
 import useBrowserUrl from '../../hooks/useBrowserUrl';
@@ -178,15 +178,18 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
   }, [asgardeo]);
 
   const updateSession = async (): Promise<void> => {
-    setUser(await asgardeo.getUser());
-    setUserProfile(await asgardeo.getUserProfile());
-    setCurrentOrganization(await asgardeo.getCurrentOrganization());
+    let _baseUrl: string = baseUrl;
 
     // If there's a `user_org` claim in the ID token,
     // Treat this login as a organization login.
     if ((await asgardeo.getDecodedIdToken())?.['user_org']) {
-      setBaseUrl(`${(await asgardeo.getConfiguration()).baseUrl}/o`);
+      _baseUrl = `${(await asgardeo.getConfiguration()).baseUrl}/o`;
+      setBaseUrl(_baseUrl);
     }
+
+    setUser(await asgardeo.getUser({baseUrl: _baseUrl}));
+    setUserProfile(await asgardeo.getUserProfile({baseUrl: _baseUrl}));
+    setCurrentOrganization(await asgardeo.getCurrentOrganization());
   };
 
   const signIn = async (...args: any): Promise<User> => {

From 97281865974956b39504375d89da9a48cde73d9a Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 2 Jul 2025 05:01:18 +0530
Subject: [PATCH 17/21] feat: add missing organization-related scopes in
 AsgardeoProvider

---
 samples/teamspace-react/src/main.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/samples/teamspace-react/src/main.tsx b/samples/teamspace-react/src/main.tsx
index 4a75531a5..843bf58f1 100644
--- a/samples/teamspace-react/src/main.tsx
+++ b/samples/teamspace-react/src/main.tsx
@@ -20,9 +20,12 @@ createRoot(document.getElementById('root')!).render(
         'user:email',
         'read:user',
         'internal_organization_create',
+        'internal_org_organization_create',
         'internal_organization_view',
+        'internal_org_organization_view',
         'internal_organization_update',
         'internal_organization_delete',
+        'internal_org_organization_delete',
       ]}
       preferences={{
         theme: {

From 8dfc78d9bcf1d9f6d99f41d880b5250d4e028165 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 2 Jul 2025 05:20:53 +0530
Subject: [PATCH 18/21] chore: add teamspace logo image to public assets

---
 .../teamspace-react/public/teamspace-logo.png   | Bin 0 -> 12335 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 samples/teamspace-react/public/teamspace-logo.png

diff --git a/samples/teamspace-react/public/teamspace-logo.png b/samples/teamspace-react/public/teamspace-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..f2e0009cd5d443ccb356b461dc525c52b54d0a94
GIT binary patch
literal 12335
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
F{|^8G#_#|D

literal 0
HcmV?d00001


From 1066fefa855aa646b3026f6e682657e3980ca99b Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 2 Jul 2025 08:42:15 +0530
Subject: [PATCH 19/21] feat: add patch updates for Asgardeo packages and fix
 profile issues

---
 .changeset/stupid-carrots-stay.md | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 .changeset/stupid-carrots-stay.md

diff --git a/.changeset/stupid-carrots-stay.md b/.changeset/stupid-carrots-stay.md
new file mode 100644
index 000000000..7540840d2
--- /dev/null
+++ b/.changeset/stupid-carrots-stay.md
@@ -0,0 +1,10 @@
+---
+'@asgardeo/browser': patch
+'@asgardeo/express': patch
+'@asgardeo/javascript': patch
+'@asgardeo/nextjs': patch
+'@asgardeo/node': patch
+'@asgardeo/react': patch
+---
+
+Fix issues with profile

From e4ecf2e79e5aa8475634ea932b9acf786aa36434 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 2 Jul 2025 09:52:26 +0530
Subject: [PATCH 20/21] feat: add organizationHandle and applicationId support
 in Asgardeo components and utilities

---
 packages/javascript/src/index.ts              |   1 +
 packages/javascript/src/models/config.ts      |  20 +++
 ...eriveOrganizationHandleFromBaseUrl.test.ts | 158 ++++++++++++++++++
 .../deriveOrganizationHandleFromBaseUrl.ts    | 109 ++++++++++++
 packages/nextjs/src/AsgardeoNextClient.ts     |  11 +-
 .../contexts/Asgardeo/AsgardeoContext.ts      |   2 +
 .../contexts/Asgardeo/AsgardeoProvider.tsx    |   8 +-
 .../nextjs/src/server/AsgardeoProvider.tsx    |   2 +
 .../src/utils/decorateConfigWithNextEnv.ts    |   4 +-
 packages/react/src/AsgardeoReactClient.ts     |   9 +-
 .../src/contexts/Asgardeo/AsgardeoContext.ts  |   4 +
 .../contexts/Asgardeo/AsgardeoProvider.tsx    |   6 +
 12 files changed, 329 insertions(+), 5 deletions(-)
 create mode 100644 packages/javascript/src/utils/__tests__/deriveOrganizationHandleFromBaseUrl.test.ts
 create mode 100644 packages/javascript/src/utils/deriveOrganizationHandleFromBaseUrl.ts

diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index 1856ecd54..9228d8deb 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -116,6 +116,7 @@ export {default as createTheme} from './theme/createTheme';
 export {ThemeColors, ThemeConfig, Theme, ThemeMode, ThemeDetection} from './theme/types';
 
 export {default as deepMerge} from './utils/deepMerge';
+export {default as deriveOrganizationHandleFromBaseUrl} from './utils/deriveOrganizationHandleFromBaseUrl';
 export {default as extractUserClaimsFromIdToken} from './utils/extractUserClaimsFromIdToken';
 export {default as extractPkceStorageKeyFromState} from './utils/extractPkceStorageKeyFromState';
 export {default as flattenUserSchema} from './utils/flattenUserSchema';
diff --git a/packages/javascript/src/models/config.ts b/packages/javascript/src/models/config.ts
index 056363fd5..87e9b7356 100644
--- a/packages/javascript/src/models/config.ts
+++ b/packages/javascript/src/models/config.ts
@@ -44,6 +44,22 @@ export interface BaseConfig<T = unknown> extends WithPreferences {
    */
   afterSignOutUrl?: string | undefined;
 
+  /**
+   * Optional organization handle for the Organization in Asgardeo.
+   * This is used to identify the organization in the Asgardeo identity server in cases like Branding, etc.
+   * If not provided, the framework layer will try to use the `baseUrl` to determine the organization handle.
+   * @remarks This is mandatory if a custom domain is configured for the Asgardeo organization.
+   */
+  organizationHandle?: string | undefined;
+
+  /**
+   * Optional UUID of the Asgardeo application.
+   * This is used to identify the application in the Asgardeo identity server for Application Branding,
+   * obtaining the access URL in the sign-up flow, etc.
+   * If not provided, the framework layer will use the default application ID based on the application.
+   */
+  applicationId?: string | undefined;
+
   /**
    * The base URL of the Asgardeo identity server.
    * Example: "https://api.asgardeo.io/t/{org_name}"
@@ -103,6 +119,10 @@ export interface WithPreferences {
 export type Config<T = unknown> = BaseConfig<T>;
 
 export interface ThemePreferences {
+  /**
+   * Inherit from Branding from WSO2 Identity Server or Asgardeo.
+   */
+  inheritFromBranding?: boolean;
   /**
    * The theme mode to use. Defaults to 'system'.
    */
diff --git a/packages/javascript/src/utils/__tests__/deriveOrganizationHandleFromBaseUrl.test.ts b/packages/javascript/src/utils/__tests__/deriveOrganizationHandleFromBaseUrl.test.ts
new file mode 100644
index 000000000..8b3dda788
--- /dev/null
+++ b/packages/javascript/src/utils/__tests__/deriveOrganizationHandleFromBaseUrl.test.ts
@@ -0,0 +1,158 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import deriveOrganizationHandleFromBaseUrl from '../deriveOrganizationHandleFromBaseUrl';
+import AsgardeoRuntimeError from '../../errors/AsgardeoRuntimeError';
+
+describe('deriveOrganizationHandleFromBaseUrl', () => {
+  describe('Valid Asgardeo URLs', () => {
+    it('should extract organization handle from dev.asgardeo.io URL', () => {
+      const result = deriveOrganizationHandleFromBaseUrl('https://dev.asgardeo.io/t/dxlab');
+      expect(result).toBe('dxlab');
+    });
+
+    it('should extract organization handle from stage.asgardeo.io URL', () => {
+      const result = deriveOrganizationHandleFromBaseUrl('https://stage.asgardeo.io/t/dxlab');
+      expect(result).toBe('dxlab');
+    });
+
+    it('should extract organization handle from prod.asgardeo.io URL', () => {
+      const result = deriveOrganizationHandleFromBaseUrl('https://prod.asgardeo.io/t/dxlab');
+      expect(result).toBe('dxlab');
+    });
+
+    it('should extract organization handle from custom subdomain asgardeo.io URL', () => {
+      const result = deriveOrganizationHandleFromBaseUrl('https://xxx.asgardeo.io/t/dxlab');
+      expect(result).toBe('dxlab');
+    });
+
+    it('should extract organization handle with trailing slash', () => {
+      const result = deriveOrganizationHandleFromBaseUrl('https://dev.asgardeo.io/t/dxlab/');
+      expect(result).toBe('dxlab');
+    });
+
+    it('should extract organization handle with additional path segments', () => {
+      const result = deriveOrganizationHandleFromBaseUrl('https://dev.asgardeo.io/t/dxlab/api/v1');
+      expect(result).toBe('dxlab');
+    });
+
+    it('should handle different organization handles', () => {
+      expect(deriveOrganizationHandleFromBaseUrl('https://dev.asgardeo.io/t/myorg')).toBe('myorg');
+      expect(deriveOrganizationHandleFromBaseUrl('https://dev.asgardeo.io/t/test-org')).toBe('test-org');
+      expect(deriveOrganizationHandleFromBaseUrl('https://dev.asgardeo.io/t/org123')).toBe('org123');
+    });
+  });
+
+  describe('Invalid URLs - Custom Domains', () => {
+    it('should throw error for custom domain without asgardeo.io', () => {
+      expect(() => {
+        deriveOrganizationHandleFromBaseUrl('https://custom.example.com/auth');
+      }).toThrow(AsgardeoRuntimeError);
+
+      expect(() => {
+        deriveOrganizationHandleFromBaseUrl('https://custom.example.com/auth');
+      }).toThrow('Organization handle is required since a custom domain is configured.');
+    });
+
+    it('should throw error for URLs without /t/ pattern', () => {
+      expect(() => {
+        deriveOrganizationHandleFromBaseUrl('https://auth.asgardeo.io/oauth2/token');
+      }).toThrow(AsgardeoRuntimeError);
+
+      expect(() => {
+        deriveOrganizationHandleFromBaseUrl('https://auth.asgardeo.io/oauth2/token');
+      }).toThrow('Organization handle is required since a custom domain is configured.');
+    });
+
+    it('should throw error for URLs with malformed /t/ pattern', () => {
+      expect(() => {
+        deriveOrganizationHandleFromBaseUrl('https://dev.asgardeo.io/t/');
+      }).toThrow(AsgardeoRuntimeError);
+
+      expect(() => {
+        deriveOrganizationHandleFromBaseUrl('https://dev.asgardeo.io/t');
+      }).toThrow(AsgardeoRuntimeError);
+    });
+
+    it('should throw error for URLs with empty organization handle', () => {
+      expect(() => {
+        deriveOrganizationHandleFromBaseUrl('https://dev.asgardeo.io/t//');
+      }).toThrow(AsgardeoRuntimeError);
+    });
+  });
+
+  describe('Invalid Input', () => {
+    it('should throw error for undefined baseUrl', () => {
+      expect(() => {
+        deriveOrganizationHandleFromBaseUrl(undefined);
+      }).toThrow(AsgardeoRuntimeError);
+
+      expect(() => {
+        deriveOrganizationHandleFromBaseUrl(undefined);
+      }).toThrow('Base URL is required to derive organization handle.');
+    });
+
+    it('should throw error for empty baseUrl', () => {
+      expect(() => {
+        deriveOrganizationHandleFromBaseUrl('');
+      }).toThrow(AsgardeoRuntimeError);
+
+      expect(() => {
+        deriveOrganizationHandleFromBaseUrl('');
+      }).toThrow('Base URL is required to derive organization handle.');
+    });
+
+    it('should throw error for invalid URL format', () => {
+      expect(() => {
+        deriveOrganizationHandleFromBaseUrl('not-a-valid-url');
+      }).toThrow(AsgardeoRuntimeError);
+
+      expect(() => {
+        deriveOrganizationHandleFromBaseUrl('not-a-valid-url');
+      }).toThrow('Invalid base URL format');
+    });
+  });
+
+  describe('Error Details', () => {
+    it('should throw AsgardeoRuntimeError with correct error codes', () => {
+      try {
+        deriveOrganizationHandleFromBaseUrl(undefined);
+      } catch (error) {
+        expect(error).toBeInstanceOf(AsgardeoRuntimeError);
+        expect(error.code).toBe('javascript-deriveOrganizationHandleFromBaseUrl-ValidationError-001');
+        expect(error.origin).toBe('javascript');
+      }
+
+      try {
+        deriveOrganizationHandleFromBaseUrl('invalid-url');
+      } catch (error) {
+        expect(error).toBeInstanceOf(AsgardeoRuntimeError);
+        expect(error.code).toBe('javascript-deriveOrganizationHandleFromBaseUrl-ValidationError-002');
+        expect(error.origin).toBe('javascript');
+      }
+
+      try {
+        deriveOrganizationHandleFromBaseUrl('https://custom.domain.com/auth');
+      } catch (error) {
+        expect(error).toBeInstanceOf(AsgardeoRuntimeError);
+        expect(error.code).toBe('javascript-deriveOrganizationHandleFromBaseUrl-CustomDomainError-001');
+        expect(error.origin).toBe('javascript');
+      }
+    });
+  });
+});
diff --git a/packages/javascript/src/utils/deriveOrganizationHandleFromBaseUrl.ts b/packages/javascript/src/utils/deriveOrganizationHandleFromBaseUrl.ts
new file mode 100644
index 000000000..d83356e74
--- /dev/null
+++ b/packages/javascript/src/utils/deriveOrganizationHandleFromBaseUrl.ts
@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import AsgardeoRuntimeError from '../errors/AsgardeoRuntimeError';
+
+/**
+ * Extracts the organization handle from an Asgardeo base URL.
+ *
+ * This function parses Asgardeo URLs with the standard pattern:
+ * - https://dev.asgardeo.io/t/{orgHandle}
+ * - https://stage.asgardeo.io/t/{orgHandle}
+ * - https://prod.asgardeo.io/t/{orgHandle}
+ * - https://{subdomain}.asgardeo.io/t/{orgHandle}
+ *
+ * @param baseUrl - The base URL of the Asgardeo identity server
+ * @returns The extracted organization handle
+ * @throws {AsgardeoRuntimeError} When the URL doesn't match the expected Asgardeo pattern,
+ *   indicating a custom domain is configured and organizationHandle must be provided explicitly
+ *
+ * @example
+ * ```typescript
+ * // Standard Asgardeo URLs
+ * const handle1 = deriveOrganizationHandleFromBaseUrl('https://dev.asgardeo.io/t/dxlab');
+ * // Returns: 'dxlab'
+ *
+ * const handle2 = deriveOrganizationHandleFromBaseUrl('https://stage.asgardeo.io/t/myorg');
+ * // Returns: 'myorg'
+ *
+ * // Custom domain - throws error
+ * deriveOrganizationHandleFromBaseUrl('https://custom.example.com/auth');
+ * // Throws: AsgardeoRuntimeError
+ * ```
+ */
+const deriveOrganizationHandleFromBaseUrl = (baseUrl?: string): string => {
+  if (!baseUrl) {
+    throw new AsgardeoRuntimeError(
+      'Base URL is required to derive organization handle.',
+      'javascript-deriveOrganizationHandleFromBaseUrl-ValidationError-001',
+      'javascript',
+      'A valid base URL must be provided to extract the organization handle.',
+    );
+  }
+
+  let parsedUrl: URL;
+
+  try {
+    parsedUrl = new URL(baseUrl);
+  } catch (error) {
+    throw new AsgardeoRuntimeError(
+      `Invalid base URL format: ${baseUrl}`,
+      'javascript-deriveOrganizationHandleFromBaseUrl-ValidationError-002',
+      'javascript',
+      'The provided base URL does not conform to valid URL syntax.',
+    );
+  }
+
+  // Check if the hostname matches the Asgardeo pattern: *.asgardeo.io
+  const hostname = parsedUrl.hostname.toLowerCase();
+  if (!hostname.endsWith('.asgardeo.io')) {
+    throw new AsgardeoRuntimeError(
+      'Organization handle is required since a custom domain is configured.',
+      'javascript-deriveOrganizationHandleFromBaseUrl-CustomDomainError-001',
+      'javascript',
+      'The provided base URL uses a custom domain. Please provide the organizationHandle explicitly in the configuration.',
+    );
+  }
+
+  // Extract the organization handle from the path pattern: /t/{orgHandle}
+  const pathSegments = parsedUrl.pathname.split('/').filter(segment => segment.length > 0);
+
+  if (pathSegments.length < 2 || pathSegments[0] !== 't') {
+    throw new AsgardeoRuntimeError(
+      'Organization handle is required since a custom domain is configured.',
+      'javascript-deriveOrganizationHandleFromBaseUrl-CustomDomainError-002',
+      'javascript',
+      'The provided base URL does not follow the expected Asgardeo URL pattern (/t/{orgHandle}). Please provide the organizationHandle explicitly in the configuration.',
+    );
+  }
+
+  const organizationHandle = pathSegments[1];
+
+  if (!organizationHandle || organizationHandle.trim().length === 0) {
+    throw new AsgardeoRuntimeError(
+      'Organization handle is required since a custom domain is configured.',
+      'javascript-deriveOrganizationHandleFromBaseUrl-CustomDomainError-003',
+      'javascript',
+      'The organization handle could not be extracted from the base URL. Please provide the organizationHandle explicitly in the configuration.',
+    );
+  }
+
+  return organizationHandle;
+};
+
+export default deriveOrganizationHandleFromBaseUrl;
diff --git a/packages/nextjs/src/AsgardeoNextClient.ts b/packages/nextjs/src/AsgardeoNextClient.ts
index d7369d6bf..919bf383f 100644
--- a/packages/nextjs/src/AsgardeoNextClient.ts
+++ b/packages/nextjs/src/AsgardeoNextClient.ts
@@ -46,6 +46,7 @@ import {
   CreateOrganizationPayload,
   getOrganization,
   OrganizationDetails,
+  deriveOrganizationHandleFromBaseUrl
 } from '@asgardeo/node';
 import {NextRequest, NextResponse} from 'next/server';
 import {AsgardeoNextConfig} from './models/config';
@@ -97,18 +98,24 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
 
   override async initialize(config: T): Promise<boolean> {
     if (this.isInitialized) {
-      console.warn('[AsgardeoNextClient] Client is already initialized');
       return Promise.resolve(true);
     }
 
-    const {baseUrl, clientId, clientSecret, signInUrl, afterSignInUrl, afterSignOutUrl, signUpUrl, ...rest} =
+    const {baseUrl, organizationHandle, clientId, clientSecret, signInUrl, afterSignInUrl, afterSignOutUrl, signUpUrl, ...rest} =
       decorateConfigWithNextEnv(config);
 
     this.isInitialized = true;
 
+    let resolvedOrganizationHandle: string | undefined = organizationHandle;
+
+    if (!resolvedOrganizationHandle) {
+      resolvedOrganizationHandle = deriveOrganizationHandleFromBaseUrl(config?.baseUrl);
+    }
+
     const origin: string = await getClientOrigin();
 
     return this.asgardeo.initialize({
+      organizationHandle: resolvedOrganizationHandle,
       baseUrl,
       clientId,
       clientSecret,
diff --git a/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoContext.ts b/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoContext.ts
index c1fc018c4..a0658be08 100644
--- a/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoContext.ts
+++ b/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoContext.ts
@@ -31,6 +31,8 @@ export type AsgardeoContextProps = Partial<AsgardeoReactContextProps>;
  * Context object for managing the Authentication flow builder core context.
  */
 const AsgardeoContext: Context<AsgardeoContextProps | null> = createContext<null | AsgardeoContextProps>({
+  organizationHandle: undefined,
+  applicationId: undefined,
   signInUrl: undefined,
   signUpUrl: undefined,
   afterSignInUrl: undefined,
diff --git a/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx
index db75a032a..e03cb254b 100644
--- a/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx
+++ b/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -52,6 +52,8 @@ export type AsgardeoClientProviderProps = Partial<Omit<AsgardeoProviderProps, 'b
     signOut: AsgardeoContextProps['signOut'];
     signIn: AsgardeoContextProps['signIn'];
     signUp: AsgardeoContextProps['signUp'];
+    applicationId: AsgardeoContextProps['applicationId'];
+    organizationHandle: AsgardeoContextProps['organizationHandle'];
     handleOAuthCallback: (
       code: string,
       state: string,
@@ -82,6 +84,8 @@ const AsgardeoClientProvider: FC<PropsWithChildren<AsgardeoClientProviderProps>>
   userProfile: _userProfile,
   currentOrganization,
   updateProfile,
+  applicationId,
+  organizationHandle,
 }: PropsWithChildren<AsgardeoClientProviderProps>) => {
   const reRenderCheckRef: RefObject<boolean> = useRef(false);
   const router = useRouter();
@@ -279,8 +283,10 @@ const AsgardeoClientProvider: FC<PropsWithChildren<AsgardeoClientProviderProps>>
       signUp: handleSignUp,
       signInUrl,
       signUpUrl,
+      applicationId,
+      organizationHandle,
     }),
-    [baseUrl, user, isSignedIn, isLoading, signInUrl, signUpUrl],
+    [baseUrl, user, isSignedIn, isLoading, signInUrl, signUpUrl, applicationId, organizationHandle],
   );
 
   const handleProfileUpdate = (payload: User): void => {
diff --git a/packages/nextjs/src/server/AsgardeoProvider.tsx b/packages/nextjs/src/server/AsgardeoProvider.tsx
index 7be2044e2..cd3e09256 100644
--- a/packages/nextjs/src/server/AsgardeoProvider.tsx
+++ b/packages/nextjs/src/server/AsgardeoProvider.tsx
@@ -110,6 +110,8 @@ const AsgardeoServerProvider: FC<PropsWithChildren<AsgardeoServerProviderProps>>
 
   return (
     <AsgardeoClientProvider
+      organizationHandle={config.organizationHandle}
+      applicationId={config.applicationId}
       baseUrl={config.baseUrl}
       signIn={signInAction}
       signOut={signOutAction}
diff --git a/packages/nextjs/src/utils/decorateConfigWithNextEnv.ts b/packages/nextjs/src/utils/decorateConfigWithNextEnv.ts
index 7c1625192..2c25fa431 100644
--- a/packages/nextjs/src/utils/decorateConfigWithNextEnv.ts
+++ b/packages/nextjs/src/utils/decorateConfigWithNextEnv.ts
@@ -19,10 +19,12 @@
 import {AsgardeoNextConfig} from '../models/config';
 
 const decorateConfigWithNextEnv = (config: AsgardeoNextConfig): AsgardeoNextConfig => {
-  const {baseUrl, clientId, clientSecret, signInUrl, signUpUrl, afterSignInUrl, afterSignOutUrl, ...rest} = config;
+  const {organizationHandle, applicationId, baseUrl, clientId, clientSecret, signInUrl, signUpUrl, afterSignInUrl, afterSignOutUrl, ...rest} = config;
 
   return {
     ...rest,
+    organizationHandle: organizationHandle || (process.env['NEXT_PUBLIC_ASGARDEO_ORGANIZATION_HANDLE'] as string),
+    applicationId: applicationId || (process.env['NEXT_PUBLIC_ASGARDEO_APPLICATION_ID'] as string),
     baseUrl: baseUrl || (process.env['NEXT_PUBLIC_ASGARDEO_BASE_URL'] as string),
     clientId: clientId || (process.env['NEXT_PUBLIC_ASGARDEO_CLIENT_ID'] as string),
     clientSecret: clientSecret || (process.env['ASGARDEO_CLIENT_SECRET'] as string),
diff --git a/packages/react/src/AsgardeoReactClient.ts b/packages/react/src/AsgardeoReactClient.ts
index d708fc46c..fd147cac8 100644
--- a/packages/react/src/AsgardeoReactClient.ts
+++ b/packages/react/src/AsgardeoReactClient.ts
@@ -35,6 +35,7 @@ import {
   Organization,
   IdToken,
   EmbeddedFlowExecuteRequestConfig,
+  deriveOrganizationHandleFromBaseUrl,
 } from '@asgardeo/browser';
 import AuthAPI from './__temp__/api';
 import getMeOrganizations from './api/getMeOrganizations';
@@ -59,7 +60,13 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
   }
 
   override initialize(config: AsgardeoReactConfig): Promise<boolean> {
-    return this.asgardeo.init(config as any);
+    let resolvedOrganizationHandle: string | undefined = config?.organizationHandle;
+
+    if (!config?.organizationHandle) {
+      resolvedOrganizationHandle = deriveOrganizationHandleFromBaseUrl(config?.baseUrl);
+    }
+
+    return this.asgardeo.init({...config, organizationHandle: resolvedOrganizationHandle} as any);
   }
 
   override async updateUserProfile(payload: any, userId?: string): Promise<User> {
diff --git a/packages/react/src/contexts/Asgardeo/AsgardeoContext.ts b/packages/react/src/contexts/Asgardeo/AsgardeoContext.ts
index 2c4fb194a..e4eb9165b 100644
--- a/packages/react/src/contexts/Asgardeo/AsgardeoContext.ts
+++ b/packages/react/src/contexts/Asgardeo/AsgardeoContext.ts
@@ -23,6 +23,8 @@ import {Organization} from '@asgardeo/browser';
  * Props interface of {@link AsgardeoContext}
  */
 export type AsgardeoContextProps = {
+  organizationHandle: string | undefined;
+  applicationId: string | undefined;
   signInUrl: string | undefined;
   signUpUrl: string | undefined;
   afterSignInUrl: string | undefined;
@@ -62,6 +64,8 @@ export type AsgardeoContextProps = {
  * Context object for managing the Authentication flow builder core context.
  */
 const AsgardeoContext: Context<AsgardeoContextProps | null> = createContext<null | AsgardeoContextProps>({
+  organizationHandle: undefined,
+  applicationId: undefined,
   signInUrl: undefined,
   signUpUrl: undefined,
   afterSignInUrl: undefined,
diff --git a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
index 636bb97f0..e62c0803b 100644
--- a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
+++ b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -53,6 +53,8 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
   preferences,
   signInUrl,
   signUpUrl,
+  organizationHandle,
+  applicationId,
   ...rest
 }: PropsWithChildren<AsgardeoProviderProps>): ReactElement => {
   const reRenderCheckRef: RefObject<boolean> = useRef(false);
@@ -74,6 +76,8 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
   useEffect(() => {
     (async (): Promise<void> => {
       await asgardeo.initialize({
+        applicationId,
+        organizationHandle,
         afterSignInUrl,
         afterSignOutUrl,
         baseUrl,
@@ -258,6 +262,8 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
   return (
     <AsgardeoContext.Provider
       value={{
+        applicationId,
+        organizationHandle,
         signInUrl,
         signUpUrl,
         afterSignInUrl,

From 6b7e03bc43ccbf372165c2f2402f4a11f223f8cb Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 2 Jul 2025 10:10:59 +0530
Subject: [PATCH 21/21] chore: improve error handling and configuration
 management in Asgardeo components

---
 .../javascript/src/api/createOrganization.ts  |  1 -
 packages/nextjs/src/AsgardeoNextClient.ts     |  2 +-
 .../nextjs/src/server/AsgardeoProvider.tsx    | 14 +++++-----
 packages/react/src/AsgardeoReactClient.ts     |  2 +-
 .../contexts/Asgardeo/AsgardeoProvider.tsx    | 28 ++++++++++---------
 samples/teamspace-nextjs/app/profile/page.tsx |  2 --
 6 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/packages/javascript/src/api/createOrganization.ts b/packages/javascript/src/api/createOrganization.ts
index ef30b5da2..0088186fb 100644
--- a/packages/javascript/src/api/createOrganization.ts
+++ b/packages/javascript/src/api/createOrganization.ts
@@ -195,7 +195,6 @@ const createOrganization = async ({
 
     return (await response.json()) as Organization;
   } catch (error) {
-    console.log('[JS][createOrganization] Error creating organization:', error);
     if (error instanceof AsgardeoAPIError) {
       throw error;
     }
diff --git a/packages/nextjs/src/AsgardeoNextClient.ts b/packages/nextjs/src/AsgardeoNextClient.ts
index 919bf383f..d39d22064 100644
--- a/packages/nextjs/src/AsgardeoNextClient.ts
+++ b/packages/nextjs/src/AsgardeoNextClient.ts
@@ -109,7 +109,7 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
     let resolvedOrganizationHandle: string | undefined = organizationHandle;
 
     if (!resolvedOrganizationHandle) {
-      resolvedOrganizationHandle = deriveOrganizationHandleFromBaseUrl(config?.baseUrl);
+      resolvedOrganizationHandle = deriveOrganizationHandleFromBaseUrl(baseUrl);
     }
 
     const origin: string = await getClientOrigin();
diff --git a/packages/nextjs/src/server/AsgardeoProvider.tsx b/packages/nextjs/src/server/AsgardeoProvider.tsx
index cd3e09256..dea32dc13 100644
--- a/packages/nextjs/src/server/AsgardeoProvider.tsx
+++ b/packages/nextjs/src/server/AsgardeoProvider.tsx
@@ -110,17 +110,17 @@ const AsgardeoServerProvider: FC<PropsWithChildren<AsgardeoServerProviderProps>>
 
   return (
     <AsgardeoClientProvider
-      organizationHandle={config.organizationHandle}
-      applicationId={config.applicationId}
-      baseUrl={config.baseUrl}
+      organizationHandle={config?.organizationHandle}
+      applicationId={config?.applicationId}
+      baseUrl={config?.baseUrl}
       signIn={signInAction}
       signOut={signOutAction}
       signUp={signUpAction}
       handleOAuthCallback={handleOAuthCallbackAction}
-      signInUrl={config.signInUrl}
-      signUpUrl={config.signUpUrl}
-      preferences={config.preferences}
-      clientId={config.clientId}
+      signInUrl={config?.signInUrl}
+      signUpUrl={config?.signUpUrl}
+      preferences={config?.preferences}
+      clientId={config?.clientId}
       user={user}
       currentOrganization={currentOrganization}
       userProfile={userProfile}
diff --git a/packages/react/src/AsgardeoReactClient.ts b/packages/react/src/AsgardeoReactClient.ts
index fd147cac8..86f1b2e9b 100644
--- a/packages/react/src/AsgardeoReactClient.ts
+++ b/packages/react/src/AsgardeoReactClient.ts
@@ -62,7 +62,7 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
   override initialize(config: AsgardeoReactConfig): Promise<boolean> {
     let resolvedOrganizationHandle: string | undefined = config?.organizationHandle;
 
-    if (!config?.organizationHandle) {
+    if (!resolvedOrganizationHandle) {
       resolvedOrganizationHandle = deriveOrganizationHandleFromBaseUrl(config?.baseUrl);
     }
 
diff --git a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
index e62c0803b..73995d1bf 100644
--- a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
+++ b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -68,6 +68,18 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
 
   const [userProfile, setUserProfile] = useState<UserProfile | null>(null);
   const [baseUrl, setBaseUrl] = useState<string>(_baseUrl);
+  const [config, setConfig] = useState<AsgardeoReactConfig>({
+    applicationId,
+    organizationHandle,
+    afterSignInUrl,
+    afterSignOutUrl,
+    baseUrl,
+    clientId,
+    scopes,
+    signUpUrl,
+    signInUrl,
+    ...rest,
+  });
 
   useEffect(() => {
     setBaseUrl(_baseUrl);
@@ -75,18 +87,8 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
 
   useEffect(() => {
     (async (): Promise<void> => {
-      await asgardeo.initialize({
-        applicationId,
-        organizationHandle,
-        afterSignInUrl,
-        afterSignOutUrl,
-        baseUrl,
-        clientId,
-        scopes,
-        signUpUrl,
-        signInUrl,
-        ...rest,
-      });
+      await asgardeo.initialize(config);
+      setConfig(await asgardeo.getConfiguration());
     })();
   }, []);
 
@@ -263,7 +265,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
     <AsgardeoContext.Provider
       value={{
         applicationId,
-        organizationHandle,
+        organizationHandle: config?.organizationHandle,
         signInUrl,
         signUpUrl,
         afterSignInUrl,
diff --git a/samples/teamspace-nextjs/app/profile/page.tsx b/samples/teamspace-nextjs/app/profile/page.tsx
index 014923315..fd018d658 100644
--- a/samples/teamspace-nextjs/app/profile/page.tsx
+++ b/samples/teamspace-nextjs/app/profile/page.tsx
@@ -49,8 +49,6 @@ export default function ProfilePage() {
   }
 
   const handleSave = () => {
-    // In a real app, you'd save to your backend
-    console.log('Saving profile:', formData);
     setIsEditing(false);
   };