chore: Support already initiated flow in '@asgardeo/react' <SignIn/>

Author: senthalan

.changeset/wild-deer-swim.md

@@ -0,0 +1,5 @@
+---
+'@asgardeo/react': patch
+---
+
+chore: Support already initiated flow in '@asgardeo/react' <SignIn/>

packages/react/src/components/presentation/SignIn/component-driven/SignIn.tsx

@@ -16,8 +16,8 @@
  * under the License.
  */
 
-import {FC, useState, useEffect, useRef, ReactNode} from 'react';
-import BaseSignIn, {BaseSignInProps} from './BaseSignIn';
+import { FC, useState, useEffect, useRef, ReactNode } from 'react';
+import BaseSignIn, { BaseSignInProps } from './BaseSignIn';
 import useAsgardeo from '../../../../contexts/Asgardeo/useAsgardeo';
 import {
   AsgardeoRuntimeError,
@@ -27,7 +27,7 @@ import {
   EmbeddedSignInFlowRequestV2,
   EmbeddedSignInFlowStatusV2,
 } from '@asgardeo/browser';
-import {normalizeFlowResponse} from './transformer';
+import { normalizeFlowResponse } from './transformer';
 import useTranslation from '../../../../hooks/useTranslation';
 
 /**
@@ -164,9 +164,9 @@ export type SignInProps = {
  * };
  * ```
  */
-const SignIn: FC<SignInProps> = ({className, size = 'medium', onSuccess, onError, variant, children}) => {
-  const {applicationId, afterSignInUrl, signIn, isInitialized, isLoading, baseUrl} = useAsgardeo();
-  const {t} = useTranslation();
+const SignIn: FC<SignInProps> = ({ className, size = 'medium', onSuccess, onError, variant, children }) => {
+  const { applicationId, afterSignInUrl, signIn, isInitialized, isLoading, baseUrl } = useAsgardeo();
+  const { t } = useTranslation();
 
   // State management for the flow
   const [components, setComponents] = useState<EmbeddedFlowComponent[]>([]);
@@ -186,13 +186,22 @@ const SignIn: FC<SignInProps> = ({className, size = 'medium', onSuccess, onError
 
   /**
    * Initialize the authentication flow.
+   * Priority: flowId > applicationId (from context) > applicationId (from URL)
    */
   const initializeFlow = async (): Promise<void> => {
-    const applicationIdFromUrl: string = new URL(window.location.href).searchParams.get('applicationId');
+    const urlParams = new URL(window.location.href).searchParams;
+    const flowIdFromUrl = urlParams.get('flowId');
+    const applicationIdFromUrl = urlParams.get('applicationId');
 
-    if (!applicationIdFromUrl && !applicationId) {
+    // Priority order: flowId from URL > applicationId from context > applicationId from URL
+    const effectiveFlowId = flowIdFromUrl;
+    const effectiveApplicationId = applicationId || applicationIdFromUrl;
+
+    console.log('Effective Flow ID:', effectiveFlowId);
+    // Validate that we have either flowId or applicationId
+    if (!effectiveFlowId && !effectiveApplicationId) {
       const error = new AsgardeoRuntimeError(
-        `Application ID is required for authentication`,
+        'Either flowId or applicationId is required for authentication',
         'SignIn-initializeFlow-RuntimeError-001',
         'react',
         'Something went wrong while trying to sign in. Please try again later.',
@@ -203,12 +212,22 @@ const SignIn: FC<SignInProps> = ({className, size = 'medium', onSuccess, onError
 
     try {
       setFlowError(null);
-      const response: EmbeddedSignInFlowResponseV2 = await signIn({
-        applicationId: applicationId || applicationIdFromUrl,
-        flowType: EmbeddedFlowType.Authentication,
-      }) as EmbeddedSignInFlowResponseV2;
 
-      const {flowId, components} = normalizeFlowResponse(response, t);
+      let response: EmbeddedSignInFlowResponseV2;
+
+      // Use flowId if available (priority), otherwise use applicationId
+      if (effectiveFlowId) {
+        response = await signIn({
+          flowId: effectiveFlowId,
+        }) as EmbeddedSignInFlowResponseV2;
+      } else {
+        response = await signIn({
+          applicationId: effectiveApplicationId,
+          flowType: EmbeddedFlowType.Authentication,
+        }) as EmbeddedSignInFlowResponseV2;
+      }
+
+      const { flowId, components } = normalizeFlowResponse(response, t);
 
       if (flowId && components) {
         setCurrentFlowId(flowId);
@@ -246,7 +265,7 @@ const SignIn: FC<SignInProps> = ({className, size = 'medium', onSuccess, onError
         ...payload,
       }) as EmbeddedSignInFlowResponseV2;
 
-      const {flowId, components} = normalizeFlowResponse(response, t);
+      const { flowId, components } = normalizeFlowResponse(response, t);
 
       if (response.flowStatus === EmbeddedSignInFlowStatusV2.Complete) {
         onSuccess &&