feat: update error handling in SignIn, SignOut, and SignUp buttons; enhance AsgardeoLoading and SignedIn components with CSR remarks; clean up FieldFactory and BaseCreateOrganization components

Author: brionmario

packages/react/src/components/actions/SignInButton/SignInButton.tsx

@@ -95,7 +95,7 @@ const SignInButton: ForwardRefExoticComponent<SignInButtonProps & RefAttributes<
     } catch (error) {
       throw new AsgardeoRuntimeError(
         `Sign in failed: ${error instanceof Error ? error.message : String(error)}`,
-        'handleSignIn-RuntimeError-001',
+        'SignInButton-handleSignIn-RuntimeError-001',
         'react',
         'Something went wrong while trying to sign in. Please try again later.',
       );

packages/react/src/components/actions/SignOutButton/SignOutButton.tsx

@@ -79,6 +79,7 @@ const SignOutButton: ForwardRefExoticComponent<SignOutButtonProps & RefAttribute
   const handleSignOut = async (e?: MouseEvent<HTMLButtonElement>): Promise<void> => {
     try {
       setIsLoading(true);
+
       await signOut();
 
       if (onClick) {
@@ -87,7 +88,7 @@ const SignOutButton: ForwardRefExoticComponent<SignOutButtonProps & RefAttribute
     } catch (error) {
       throw new AsgardeoRuntimeError(
         `Sign out failed: ${error instanceof Error ? error.message : String(error)}`,
-        'handleSignOut-RuntimeError-001',
+        'SignOutButton-handleSignOut-RuntimeError-001',
         'react',
         'Something went wrong while trying to sign out. Please try again later.',
       );

packages/react/src/components/actions/SignUpButton/SignUpButton.tsx

@@ -80,6 +80,7 @@ const SignUpButton: ForwardRefExoticComponent<SignUpButtonProps & RefAttributes<
   const handleSignUp = async (e?: MouseEvent<HTMLButtonElement>): Promise<void> => {
     try {
       setIsLoading(true);
+
       await signUp();
 
       if (onClick) {
@@ -88,7 +89,7 @@ const SignUpButton: ForwardRefExoticComponent<SignUpButtonProps & RefAttributes<
     } catch (error) {
       throw new AsgardeoRuntimeError(
         `Sign up failed: ${error instanceof Error ? error.message : String(error)}`,
-        'handleSignUp-RuntimeError-001',
+        'SignUpButton-handleSignUp-RuntimeError-001',
         'react',
         'Something went wrong while trying to sign up. Please try again later.',
       );

packages/react/src/components/control/AsgardeoLoading.tsx

@@ -32,6 +32,8 @@ export interface AsgardeoLoadingProps {
 /**
  * A component that only renders its children when the Asgardeo is loading.
  *
+ * @remarks This component is only supported in browser based React applications (CSR).
+ *
  * @example
  * ```tsx
  * import { AsgardeoLoading } from '@asgardeo/auth-react';
@@ -58,6 +60,6 @@ const AsgardeoLoading: FC<PropsWithChildren<AsgardeoLoadingProps>> = ({
   return <>{children}</>;
 };
 
-AsgardeoLoading.displayName = 'Loading';
+AsgardeoLoading.displayName = 'AsgardeoLoading';
 
 export default AsgardeoLoading;

packages/react/src/components/control/SignedIn.tsx

@@ -32,6 +32,8 @@ export interface SignedInProps {
 /**
  * A component that only renders its children when the user is signed in.
  *
+ * @remarks This component is only supported in browser based React applications (CSR).
+ *
  * @example
  * ```tsx
  * import { SignedIn } from '@asgardeo/auth-react';

packages/react/src/components/control/SignedOut.tsx

@@ -32,6 +32,8 @@ export interface SignedOutProps {
 /**
  * A component that only renders its children when the user is signed out.
  *
+ * @remarks This component is only supported in browser based React applications (CSR).
+ *
  * @example
  * ```tsx
  * import { SignedOut } from '@asgardeo/auth-react';

packages/react/src/components/factories/FieldFactory.tsx

@@ -30,9 +30,12 @@ import {FieldType} from '@asgardeo/browser';
  * Interface for field configuration.
  */
 export interface FieldConfig {
+  /**
+   * The name of the field.
+   */
   name: string;
   /**
-   * The field type based on EmbeddedSignInFlowAuthenticatorParamType.
+   * The field type.
    */
   type: FieldType;
   /**
@@ -77,24 +80,6 @@ export interface FieldConfig {
   placeholder?: string;
 }
 
-/**
- * Utility function to parse multi-valued string into array
- */
-export const parseMultiValuedString = (value: string): string[] => {
-  if (!value || value.trim() === '') return [];
-  return value
-    .split(',')
-    .map(item => item.trim())
-    .filter(item => item.length > 0);
-};
-
-/**
- * Utility function to format array into multi-valued string
- */
-export const formatMultiValuedString = (values: string[]): string => {
-  return values.join(', ');
-};
-
 /**
  * Utility function to validate field values based on type
  */
@@ -104,12 +89,10 @@ export const validateFieldValue = (
   required: boolean = false,
   touched: boolean = false,
 ): string | null => {
-  // Only show required field errors if the field has been touched
   if (required && touched && (!value || value.trim() === '')) {
     return 'This field is required';
   }
 
-  // If not required and empty, no validation needed
   if (!value || value.trim() === '') {
     return null;
   }
@@ -161,7 +144,6 @@ export const createField = (config: FieldConfig): ReactElement => {
     placeholder,
   } = config;
 
-  // Auto-validate the field value
   const validationError = error || validateFieldValue(value, type, required, touched);
 
   const commonProps = {
@@ -237,7 +219,7 @@ export const createField = (config: FieldConfig): ReactElement => {
 /**
  * React component wrapper for the field factory.
  */
-export const FieldFactory: FC<FieldConfig> = props => {
+export const FieldFactory: FC<FieldConfig> = (props: FieldConfig): ReactElement => {
   return createField(props);
 };
 

packages/react/src/components/presentation/CreateOrganization/BaseCreateOrganization.tsx

@@ -19,11 +19,9 @@
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
 import {ChangeEvent, CSSProperties, FC, ReactElement, ReactNode, useMemo, useState} from 'react';
-
 import {CreateOrganizationPayload} from '../../../api/scim2/createOrganization';
 import useTheme from '../../../contexts/Theme/useTheme';
 import useTranslation from '../../../hooks/useTranslation';
-import {Avatar} from '../../primitives/Avatar/Avatar';
 import Button from '../../primitives/Button/Button';
 import {Dialog, DialogContent, DialogHeading} from '../../primitives/Popover/Popover';
 import FormControl from '../../primitives/FormControl/FormControl';
@@ -181,8 +179,6 @@ export const BaseCreateOrganization: FC<BaseCreateOrganizationProps> = ({
   const styles = useStyles();
   const {theme} = useTheme();
   const {t} = useTranslation();
-  const [avatarUrl, setAvatarUrl] = useState<string>('');
-  const [avatarFile, setAvatarFile] = useState<File | null>(null);
   const [formData, setFormData] = useState<OrganizationFormData>({
     description: '',
     handle: '',
@@ -227,44 +223,6 @@ export const BaseCreateOrganization: FC<BaseCreateOrganizationProps> = ({
     }
   };
 
-  const handleAvatarUpload = (event: ChangeEvent<HTMLInputElement>): void => {
-    const file = event.target.files?.[0];
-    if (file) {
-      // Validate file type
-      if (!file.type.startsWith('image/')) {
-        setFormErrors(prev => ({
-          ...prev,
-          avatar: 'Please select a valid image file',
-        }));
-        return;
-      }
-
-      // Validate file size (max 2MB)
-      if (file.size > 2 * 1024 * 1024) {
-        setFormErrors(prev => ({
-          ...prev,
-          avatar: 'Image size must be less than 2MB',
-        }));
-        return;
-      }
-
-      setAvatarFile(file);
-
-      // Create preview URL
-      const reader = new FileReader();
-      reader.onload = e => {
-        setAvatarUrl(e.target?.result as string);
-      };
-      reader.readAsDataURL(file);
-
-      // Clear any previous avatar errors
-      setFormErrors(prev => ({
-        ...prev,
-        avatar: undefined,
-      }));
-    }
-  };
-
   const handleNameChange = (value: string): void => {
     handleInputChange('name', value);
 
@@ -310,14 +268,6 @@ export const BaseCreateOrganization: FC<BaseCreateOrganizationProps> = ({
     }
   };
 
-  const defaultRenderHeader = (): ReactElement => (
-    <div className={withVendorCSSClassPrefix('create-organization__header')} style={styles.header}>
-      <Typography variant="h6" component="h2">
-        {t('organization.create.title')}
-      </Typography>
-    </div>
-  );
-
   const containerStyle = {
     ...styles.root,
     ...(cardLayout ? styles.card : {}),

packages/react/src/index.ts

@@ -239,8 +239,6 @@ export {default as LogOut} from './components/primitives/Icons/LogOut';
 export {
   createField,
   FieldFactory,
-  parseMultiValuedString,
-  formatMultiValuedString,
   validateFieldValue,
 } from './components/factories/FieldFactory';
 export * from './components/factories/FieldFactory';