Add support for multiple Asgardeo Provider instances via optional instanceID

packages/react/src/AsgardeoReactClient.ts

@@ -68,12 +68,26 @@ import getAllOrganizations from './api/getAllOrganizations';
 class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> extends AsgardeoBrowserClient<T> {
   private asgardeo: AuthAPI;
   private _isLoading: boolean = false;
+  private _instanceId: number;
 
-  constructor() {
+  /**
+   * Creates a new AsgardeoReactClient instance.
+   * @param instanceId - Optional instance ID for multi-auth context support. Defaults to 0 for backward compatibility.
+   */
+  constructor(instanceId: number = 0) {
     super();
+    this._instanceId = instanceId;
 
     // FIXME: This has to be the browser client from `@asgardeo/browser` package.
-    this.asgardeo = new AuthAPI();
+    this.asgardeo = new AuthAPI(undefined, instanceId);
+  }
+
+  /**
+   * Get the instance ID for this client.
+   * @returns The instance ID used for multi-auth context support.
+   */
+  public getInstanceId(): number {
+    return this._instanceId;
   }
 
   /**

packages/react/src/__temp__/api.ts

@@ -37,11 +37,13 @@ class AuthAPI {
 
   private _authState = AuthAPI.DEFAULT_STATE;
   private _client: AsgardeoSPAClient;
+  private _instanceId: number;
 
   private _isLoading: boolean;
 
-  constructor(spaClient?: AsgardeoSPAClient) {
-    this._client = spaClient ?? AsgardeoSPAClient.getInstance();
+  constructor(spaClient?: AsgardeoSPAClient, instanceId: number = 0) {
+    this._instanceId = instanceId;
+    this._client = spaClient ?? AsgardeoSPAClient.getInstance(instanceId);
 
     this.getState = this.getState.bind(this);
     this.init = this.init.bind(this);
@@ -50,6 +52,14 @@ class AuthAPI {
     this.updateState = this.updateState.bind(this);
   }
 
+  /**
+   * Get the instance ID for this AuthAPI instance.
+   * @returns The instance ID used for multi-auth context support.
+   */
+  public getInstanceId(): number {
+    return this._instanceId;
+  }
+
   public _setIsLoading(isLoading: boolean): void {
     this._isLoading = isLoading;
   }

packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx

@@ -64,10 +64,11 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
   applicationId,
   signInOptions,
   syncSession,
+  instanceId = 0,
   ...rest
 }: PropsWithChildren<AsgardeoProviderProps>): ReactElement => {
   const reRenderCheckRef: RefObject<boolean> = useRef(false);
-  const asgardeo: AsgardeoReactClient = useMemo(() => new AsgardeoReactClient(), []);
+  const asgardeo: AsgardeoReactClient = useMemo(() => new AsgardeoReactClient(instanceId), [instanceId]);
   const {hasAuthParams} = useBrowserUrl();
   const [user, setUser] = useState<any | null>(null);
   const [currentOrganization, setCurrentOrganization] = useState<Organization | null>(null);

packages/react/src/models/config.ts

@@ -18,4 +18,11 @@
 
 import {AsgardeoBrowserConfig} from '@asgardeo/browser';
 
-export type AsgardeoReactConfig = AsgardeoBrowserConfig;
+export interface AsgardeoReactConfig extends AsgardeoBrowserConfig {
+  /**
+   * Optional instance ID for multi-auth context support.
+   * Use this when you need multiple authentication contexts in the same application.
+   * Defaults to 0 for backward compatibility.
+   */
+  instanceId?: number;
+}