feat: add loading state to BaseSignIn component and integrate with SignIn props

Author: brionmario

packages/react/src/components/presentation/SignIn/BaseSignIn.tsx

@@ -252,6 +252,11 @@ export interface BaseSignInProps {
    */
   onFlowChange?: (response: EmbeddedSignInFlowInitiateResponse | EmbeddedSignInFlowHandleResponse) => void;
 
+  /**
+   * Flag to determine the component is ready to be rendered.
+   */
+  isLoading?: boolean;
+
   /**
    * Function to initialize authentication flow.
    * @returns Promise resolving to the initial authentication response.
@@ -328,6 +333,7 @@ const BaseSignIn: FC<BaseSignInProps> = props => (
 const BaseSignInContent: FC<BaseSignInProps> = ({
   afterSignInUrl,
   onInitialize,
+  isLoading: externalIsLoading,
   onSubmit,
   onSuccess,
   onError,
@@ -343,15 +349,16 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
   const {t} = useTranslation();
   const {subtitle: flowSubtitle, title: flowTitle, messages: flowMessages} = useFlow();
 
-  const [isLoading, setIsLoading] = useState(false);
+  const [isSignInInitializationRequestLoading, setIsSignInInitializationRequestLoading] = useState(false);
   const [isInitialized, setIsInitialized] = useState(false);
   const [currentFlow, setCurrentFlow] = useState<EmbeddedSignInFlowInitiateResponse | null>(null);
   const [currentAuthenticator, setCurrentAuthenticator] = useState<EmbeddedSignInFlowAuthenticator | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [messages, setMessages] = useState<Array<{message: string; type: string}>>([]);
 
-  // Ref to track if initialization has been attempted to prevent multiple calls
-  const initializationAttemptedRef = useRef(false);
+  const isLoading = externalIsLoading || isSignInInitializationRequestLoading;
+
+  const reRenderCheckRef = useRef(false);
 
   const formFields: FormField[] =
     currentAuthenticator?.metadata?.params?.map(param => ({
@@ -598,7 +605,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
       return;
     }
 
-    setIsLoading(true);
+    setIsSignInInitializationRequestLoading(true);
     setError(null);
     setMessages([]);
 
@@ -666,7 +673,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
       setError(errorMessage);
       onError?.(err as Error);
     } finally {
-      setIsLoading(false);
+      setIsSignInInitializationRequestLoading(false);
     }
   };
 
@@ -686,7 +693,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
       touchAllFields();
     }
 
-    setIsLoading(true);
+    setIsSignInInitializationRequestLoading(true);
     setError(null);
     setMessages([]);
 
@@ -955,7 +962,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
       setError(errorMessage);
       onError?.(err as Error);
     } finally {
-      setIsLoading(false);
+      setIsSignInInitializationRequestLoading(false);
     }
   };
 
@@ -1020,69 +1027,71 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
 
   const errorClasses = clsx([withVendorCSSClassPrefix('signin__error')], errorClassName);
 
-  const messageClasses = clsx([withVendorCSSClassPrefix('signin__messages')], messageClassName);
+  const messageClasses = clsx([withVendorCSSClassPrefix('signin__messages')], messageClassName); // Initialize the flow on component mount
 
-  // Initialize the flow on component mount
   useEffect(() => {
-    if (!isInitialized && !initializationAttemptedRef.current) {
-      initializationAttemptedRef.current = true;
+    if (isLoading) {
+      return;
+    }
 
-      // Inline initialization to avoid dependency issues
-      const performInitialization = async () => {
-        setIsLoading(true);
-        setError(null);
+    // React 18.x Strict.Mode has a new check for `Ensuring reusable state` to facilitate an upcoming react feature.
+    // https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state
+    // This will remount all the useEffects to ensure that there are no unexpected side effects.
+    // When react remounts the SignIn, it will send two authorize requests.
+    // https://github.com/reactwg/react-18/discussions/18#discussioncomment-795623
+    if (reRenderCheckRef.current) {
+      return;
+    }
 
-        try {
-          const response = await onInitialize();
+    reRenderCheckRef.current = true;
 
-          setCurrentFlow(response);
-          setIsInitialized(true);
-          onFlowChange?.(response);
+    (async () => {
+      setIsSignInInitializationRequestLoading(true);
+      setError(null);
 
-          if (response?.flowStatus === EmbeddedSignInFlowStatus.SuccessCompleted) {
-            onSuccess?.((response as any).authData || {});
-            return;
-          }
+      try {
+        const response = await onInitialize();
 
-          if (response?.nextStep?.authenticators?.length > 0) {
-            if (
-              response.nextStep.stepType === EmbeddedSignInFlowStepType.MultiOptionsPrompt &&
-              response.nextStep.authenticators.length > 1
-            ) {
-              setCurrentAuthenticator(null);
-            } else {
-              const authenticator = response.nextStep.authenticators[0];
-              setCurrentAuthenticator(authenticator);
-              setupFormFields(authenticator);
-            }
-          }
+        setCurrentFlow(response);
+        setIsInitialized(true);
+        onFlowChange?.(response);
 
-          if (response && 'nextStep' in response && response.nextStep && 'messages' in response.nextStep) {
-            const stepMessages = (response.nextStep as any).messages || [];
-            setMessages(
-              stepMessages.map((msg: any) => ({
-                type: msg.type || 'INFO',
-                message: msg.message || '',
-              })),
-            );
-          }
-        } catch (err) {
-          const errorMessage = err instanceof AsgardeoAPIError ? err.message : t('errors.sign.in.initialization');
-          setError(errorMessage);
-          onError?.(err as Error);
-        } finally {
-          setIsLoading(false);
+        if (response?.flowStatus === EmbeddedSignInFlowStatus.SuccessCompleted) {
+          onSuccess?.((response as any).authData || {});
+          return;
         }
-      };
 
-      performInitialization();
-    }
+        if (response?.nextStep?.authenticators?.length > 0) {
+          if (
+            response.nextStep.stepType === EmbeddedSignInFlowStepType.MultiOptionsPrompt &&
+            response.nextStep.authenticators.length > 1
+          ) {
+            setCurrentAuthenticator(null);
+          } else {
+            const authenticator = response.nextStep.authenticators[0];
+            setCurrentAuthenticator(authenticator);
+            setupFormFields(authenticator);
+          }
+        }
 
-    // Cleanup function to reset initialization state on unmount
-    return () => {
-      initializationAttemptedRef.current = false;
-    };
-  }, [isInitialized]);
+        if (response && 'nextStep' in response && response.nextStep && 'messages' in response.nextStep) {
+          const stepMessages = (response.nextStep as any).messages || [];
+          setMessages(
+            stepMessages.map((msg: any) => ({
+              type: msg.type || 'INFO',
+              message: msg.message || '',
+            })),
+          );
+        }
+      } catch (err) {
+        const errorMessage = err instanceof AsgardeoAPIError ? err.message : t('errors.sign.in.initialization');
+        setError(errorMessage);
+        onError?.(err as Error);
+      } finally {
+        setIsSignInInitializationRequestLoading(false);
+      }
+    })();
+  }, [isLoading]);
 
   if (!isInitialized && isLoading) {
     return (

packages/react/src/components/presentation/SignIn/SignIn.tsx

@@ -72,21 +72,24 @@ export interface SignInProps {
  * ```
  */
 const SignIn: FC<SignInProps> = ({className, size = 'medium', variant = 'outlined'}: SignInProps) => {
-  const {signIn, afterSignInUrl} = useAsgardeo();
+  const {signIn, afterSignInUrl, isInitialized, isLoading} = useAsgardeo();
 
   /**
    * Initialize the authentication flow.
    */
-  const handleInitialize = async (): Promise<EmbeddedSignInFlowInitiateResponse> =>
-    await signIn({response_mode: 'direct'});
+  const handleInitialize = async (): Promise<EmbeddedSignInFlowInitiateResponse> => {
+    return await signIn({response_mode: 'direct'});
+  };
 
   /**
    * Handle authentication steps.
    */
   const handleOnSubmit = async (
     payload: EmbeddedSignInFlowHandleRequestPayload,
     request: Request,
-  ): Promise<EmbeddedSignInFlowHandleResponse> => await signIn(payload, request);
+  ): Promise<EmbeddedSignInFlowHandleResponse> => {
+    return await signIn(payload, request);
+  };
 
   /**
    * Handle successful authentication and redirect with query params.
@@ -107,6 +110,7 @@ const SignIn: FC<SignInProps> = ({className, size = 'medium', variant = 'outline
 
   return (
     <BaseSignIn
+      isLoading={isLoading || !isInitialized}
       afterSignInUrl={afterSignInUrl}
       onInitialize={handleInitialize}
       onSubmit={handleOnSubmit}