Refactor authentication components: consolidate SignIn and SignUp option factories into a single AuthOptionFactory, add EmailInput type, and update imports accordingly.

brionmario · brionmario · commit e45408da8f09 · 2025-12-16T15:04:40.000+05:30
diff --git a/packages/javascript/src/models/v2/embedded-flow-v2.ts b/packages/javascript/src/models/v2/embedded-flow-v2.ts
@@ -44,6 +44,11 @@ export enum EmbeddedFlowComponentType {
   /** Password input field with masking for sensitive data */
   PasswordInput = 'PASSWORD_INPUT',
 
+  /**
+   * Email input field with validation for email addresses.
+   */
+  EmailInput = 'EMAIL_INPUT',
+
   /** Text display component for labels, headings, and messages */
   Text = 'TEXT',
 
@@ -133,7 +138,7 @@ export interface EmbeddedFlowComponent {
    * Unique identifier for the component
    */
   id: string;
-  
+
   /**
    * Reference identifier for the component (e.g., field name, action ref)
    */
diff --git a/packages/react/src/components/presentation/auth/AuthOptionFactory.tsx b/packages/react/src/components/presentation/auth/AuthOptionFactory.tsx
@@ -24,26 +24,31 @@ import {
   EmbeddedFlowComponentTypeV2 as EmbeddedFlowComponentType,
   EmbeddedFlowTextVariantV2 as EmbeddedFlowTextVariant,
 } from '@asgardeo/browser';
-import {createField} from '../../../../factories/FieldFactory';
-import Button from '../../../../primitives/Button/Button';
-import GoogleButton from '../../../../adapters/GoogleButton';
-import GitHubButton from '../../../../adapters/GitHubButton';
-import FacebookButton from '../../../../adapters/FacebookButton';
-import Typography from '../../../../primitives/Typography/Typography';
-import Divider from '../../../../primitives/Divider/Divider';
-import SmsOtpButton from '../../../../adapters/SmsOtpButton';
-import {TypographyVariant} from '../../../../primitives/Typography/Typography.styles';
+import {createField} from '../../factories/FieldFactory';
+import Button from '../../primitives/Button/Button';
+import GoogleButton from '../../adapters/GoogleButton';
+import GitHubButton from '../../adapters/GitHubButton';
+import FacebookButton from '../../adapters/FacebookButton';
+import Typography from '../../primitives/Typography/Typography';
+import Divider from '../../primitives/Divider/Divider';
+import SmsOtpButton from '../../adapters/SmsOtpButton';
+import MicrosoftButton from '../../adapters/MicrosoftButton';
+import LinkedInButton from '../../adapters/LinkedInButton';
+import SignInWithEthereumButton from '../../adapters/SignInWithEthereumButton';
+import {TypographyVariant} from '../../primitives/Typography/Typography.styles';
+
+export type AuthType = 'signin' | 'signup';
 
 /**
  * Get the appropriate FieldType for an input component.
  */
-const getFieldType = (variant: string): FieldType => {
+const getFieldType = (variant: EmbeddedFlowComponentType): FieldType => {
   switch (variant) {
-    case 'EMAIL':
+    case EmbeddedFlowComponentType.EmailInput:
       return FieldType.Email;
-    case 'PASSWORD':
+    case EmbeddedFlowComponentType.PasswordInput:
       return FieldType.Password;
-    case 'TEXT':
+    case EmbeddedFlowComponentType.TextInput:
     default:
       return FieldType.Text;
   }
@@ -73,16 +78,38 @@ const getTypographyVariant = (variant: string) => {
 };
 
 /**
- * Create a sign-in component from flow component configuration.
+ * Check if a button text or action matches a social provider.
  */
-const createSignInComponentFromFlow = (
+const matchesSocialProvider = (
+  actionId: string,
+  eventType: string,
+  buttonText: string,
+  provider: string,
+  authType: AuthType,
+): boolean => {
+  const providerId = `${provider}_auth`;
+  const providerMatches = actionId === providerId || eventType === providerId;
+
+  // For signup, also check button text
+  if (authType === 'signup') {
+    return providerMatches || buttonText.toLowerCase().includes(provider);
+  }
+
+  return providerMatches;
+};
+
+/**
+ * Create an auth component from flow component configuration.
+ */
+const createAuthComponentFromFlow = (
   component: EmbeddedFlowComponent,
   formValues: Record<string, string>,
   touchedFields: Record<string, boolean>,
   formErrors: Record<string, string>,
   isLoading: boolean,
   isFormValid: boolean,
   onInputChange: (name: string, value: string) => void,
+  authType: AuthType,
   options: {
     buttonClassName?: string;
     inputClassName?: string;
@@ -95,37 +122,19 @@ const createSignInComponentFromFlow = (
 ): ReactElement | null => {
   const key: string | number = options.key || component.id;
 
-  console.log('Creating sign-in component for:', component);
-  switch (component.type) {
-    case EmbeddedFlowComponentType.TextInput: {
-      const identifier: string = component.ref;
-      const value: string = formValues[identifier] || '';
-      const isTouched: boolean = touchedFields[identifier] || false;
-      const error: string = isTouched ? formErrors[identifier] : undefined;
-      const fieldType: string = getFieldType('TEXT');
-
-      const field = createField({
-        type: fieldType as FieldType,
-        name: identifier,
-        label: component.label || '',
-        placeholder: component.placeholder || '',
-        required: component.required || false,
-        value,
-        error,
-        onChange: (newValue: string) => onInputChange(identifier, newValue),
-        onBlur: () => options.onInputBlur?.(identifier),
-        className: options.inputClassName,
-      });
-
-      return React.cloneElement(field, {key});
-    }
+  if (authType === 'signin') {
+    console.log('Creating sign-in component for:', component);
+  }
 
-    case EmbeddedFlowComponentType.PasswordInput: {
+  switch (component.type) {
+    case EmbeddedFlowComponentType.TextInput:
+    case EmbeddedFlowComponentType.PasswordInput:
+    case EmbeddedFlowComponentType.EmailInput: {
       const identifier: string = component.ref;
       const value: string = formValues[identifier] || '';
       const isTouched: boolean = touchedFields[identifier] || false;
       const error: string = isTouched ? formErrors[identifier] : undefined;
-      const fieldType: string = getFieldType('PASSWORD');
+      const fieldType: string = getFieldType(component.type);
 
       const field = createField({
         type: fieldType as FieldType,
@@ -159,16 +168,26 @@ const createSignInComponentFromFlow = (
       // Render branded social login buttons for known action IDs
       const actionId: string = component.id;
       const eventType: string = (component.eventType as string) || '';
+      const buttonText: string = component.label || '';
 
-      if (actionId === 'google_auth' || eventType === 'google_auth') {
+      if (matchesSocialProvider(actionId, eventType, buttonText, 'google', authType)) {
         return <GoogleButton key={key} onClick={handleClick} className={options.buttonClassName} />;
       }
-      if (actionId === 'github_auth' || eventType === 'github_auth') {
+      if (matchesSocialProvider(actionId, eventType, buttonText, 'github', authType)) {
         return <GitHubButton key={key} onClick={handleClick} className={options.buttonClassName} />;
       }
-      if (actionId === 'facebook_auth' || eventType === 'facebook_auth') {
+      if (matchesSocialProvider(actionId, eventType, buttonText, 'facebook', authType)) {
         return <FacebookButton key={key} onClick={handleClick} className={options.buttonClassName} />;
       }
+      if (matchesSocialProvider(actionId, eventType, buttonText, 'microsoft', authType)) {
+        return <MicrosoftButton key={key} onClick={handleClick} className={options.buttonClassName} />;
+      }
+      if (matchesSocialProvider(actionId, eventType, buttonText, 'linkedin', authType)) {
+        return <LinkedInButton key={key} onClick={handleClick} className={options.buttonClassName} />;
+      }
+      if (matchesSocialProvider(actionId, eventType, buttonText, 'ethereum', authType)) {
+        return <SignInWithEthereumButton key={key} onClick={handleClick} className={options.buttonClassName} />;
+      }
       if (actionId === 'prompt_mobile' || eventType === 'prompt_mobile') {
         return <SmsOtpButton key={key} onClick={handleClick} className={options.buttonClassName} />;
       }
@@ -184,7 +203,7 @@ const createSignInComponentFromFlow = (
           variant={component.variant?.toLowerCase() === 'primary' ? 'solid' : 'outline'}
           color={component.variant?.toLowerCase() === 'primary' ? 'primary' : 'secondary'}
         >
-          {component.label || 'Submit'}
+          {buttonText || 'Submit'}
         </Button>
       );
     }
@@ -202,14 +221,15 @@ const createSignInComponentFromFlow = (
       if (component.components && component.components.length > 0) {
         const blockComponents = component.components
           .map((childComponent, index) =>
-            createSignInComponentFromFlow(
+            createAuthComponentFromFlow(
               childComponent,
               formValues,
               touchedFields,
               formErrors,
               isLoading,
               isFormValid,
               onInputChange,
+              authType,
               {
                 ...options,
                 key: childComponent.id || `${component.id}_${index}`,
@@ -223,22 +243,18 @@ const createSignInComponentFromFlow = (
       return null;
     }
 
-    // case EmbeddedFlowComponentType.Divider: {
-    //   return <Divider key={key} />;
-    // }
-
     default:
       throw new AsgardeoRuntimeError(
         `Unsupported component type: ${component.type}`,
-        'SignIn-UnsupportedComponentType-001',
+        `${authType === 'signin' ? 'SignIn' : 'SignUp'}-UnsupportedComponentType-001`,
         'react',
-        'Something went wrong while rendering the sign-in component. Please try again later.',
+        `Something went wrong while rendering the ${authType} component. Please try again later.`,
       );
   }
 };
 
 /**
- * Processes an array of components and renders them as React elements.
+ * Processes an array of components and renders them as React elements for sign-in.
  */
 export const renderSignInComponents = (
   components: EmbeddedFlowComponent[],
@@ -259,14 +275,54 @@ export const renderSignInComponents = (
 ): ReactElement[] =>
   components
     .map((component, index) =>
-      createSignInComponentFromFlow(
+      createAuthComponentFromFlow(
+        component,
+        formValues,
+        touchedFields,
+        formErrors,
+        isLoading,
+        isFormValid,
+        onInputChange,
+        'signin',
+        {
+          ...options,
+          key: component.id || index,
+        },
+      ),
+    )
+    .filter(Boolean);
+
+/**
+ * Processes an array of components and renders them as React elements for sign-up.
+ */
+export const renderSignUpComponents = (
+  components: EmbeddedFlowComponent[],
+  formValues: Record<string, string>,
+  touchedFields: Record<string, boolean>,
+  formErrors: Record<string, string>,
+  isLoading: boolean,
+  isFormValid: boolean,
+  onInputChange: (name: string, value: string) => void,
+  options?: {
+    buttonClassName?: string;
+    inputClassName?: string;
+    onInputBlur?: (name: string) => void;
+    onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>) => void;
+    size?: 'small' | 'medium' | 'large';
+    variant?: any;
+  },
+): ReactElement[] =>
+  components
+    .map((component, index) =>
+      createAuthComponentFromFlow(
         component,
         formValues,
         touchedFields,
         formErrors,
         isLoading,
         isFormValid,
         onInputChange,
+        'signup',
         {
           ...options,
           key: component.id || index,
diff --git a/packages/react/src/components/presentation/auth/SignIn/v2/BaseSignIn.tsx b/packages/react/src/components/presentation/auth/SignIn/v2/BaseSignIn.tsx
@@ -34,7 +34,7 @@ import useStyles from '../BaseSignIn.styles';
 import useFlow from '../../../../../contexts/Flow/useFlow';
 import FlowProvider from '../../../../../contexts/Flow/FlowProvider';
 import {FormField, useForm} from '../../../../../hooks/useForm';
-import {renderSignInComponents} from './SignInOptionFactory';
+import {renderSignInComponents} from '../../AuthOptionFactory';
 import {extractErrorMessage} from '../../../../../utils/v2/flowTransformer';
 import getAuthComponentHeadings from '../../../../../utils/v2/getAuthComponentHeadings';
 
diff --git a/packages/react/src/components/presentation/auth/SignUp/v2/BaseSignUp.tsx b/packages/react/src/components/presentation/auth/SignUp/v2/BaseSignUp.tsx
@@ -26,7 +26,7 @@ import {
 } from '@asgardeo/browser';
 import {cx} from '@emotion/css';
 import {FC, ReactElement, ReactNode, useEffect, useState, useCallback, useRef} from 'react';
-import {renderSignUpComponents} from './SignUpOptionFactory';
+import {renderSignUpComponents} from '../../AuthOptionFactory';
 import {normalizeFlowResponse, extractErrorMessage} from '../../../../../utils/v2/flowTransformer';
 import FlowProvider from '../../../../../contexts/Flow/FlowProvider';
 import useFlow from '../../../../../contexts/Flow/useFlow';
diff --git a/packages/react/src/components/presentation/auth/SignUp/v2/SignUpOptionFactory.tsx b/packages/react/src/components/presentation/auth/SignUp/v2/SignUpOptionFactory.tsx
