@asgardeo/react/dist/components/presentation/auth/SignIn/v2/BaseSignIn.d.ts

React implementation of Asgardeo JavaScript SDK.

/**
 * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
 *
 * WSO2 LLC. licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
import { FC, ReactNode } from 'react';
import { EmbeddedSignInFlowRequestV2 as EmbeddedSignInFlowRequest, EmbeddedFlowComponentV2 as EmbeddedFlowComponent } from '@asgardeo/browser';
import { CardProps } from '../../../../primitives/Card/Card';
/**
 * Render props for custom UI rendering
 */
export interface BaseSignInRenderProps {
    /**
     * Form values
     */
    values: Record<string, string>;
    /**
     * Field validation errors
     */
    fieldErrors: Record<string, string>;
    /**
     * API error (if any)
     */
    error?: Error | null;
    /**
     * Touched fields
     */
    touched: Record<string, boolean>;
    /**
     * Whether the form is valid
     */
    isValid: boolean;
    /**
     * Loading state
     */
    isLoading: boolean;
    /**
     * Flow components
     */
    components: EmbeddedFlowComponent[];
    /**
     * Function to handle input changes
     */
    handleInputChange: (name: string, value: string) => void;
    /**
     * Function to handle form submission
     */
    handleSubmit: (component: EmbeddedFlowComponent, data?: Record<string, any>) => Promise<void>;
    /**
     * Function to validate the form
     */
    validateForm: () => {
        isValid: boolean;
        fieldErrors: Record<string, string>;
    };
    /**
     * Flow title
     */
    title: string;
    /**
     * Flow subtitle
     */
    subtitle: string;
    /**
     * Flow messages
     */
    messages: Array<{
        message: string;
        type: string;
    }>;
}
/**
 * Props for the BaseSignIn component.
 */
export interface BaseSignInProps {
    /**
     * Custom CSS class name for the submit button.
     */
    buttonClassName?: string;
    /**
     * Custom CSS class name for the form container.
     */
    className?: string;
    /**
     * Array of flow components to render.
     */
    components?: EmbeddedFlowComponent[];
    /**
     * Custom CSS class name for error messages.
     */
    errorClassName?: string;
    /**
     * Error object to display
     */
    error?: Error | null;
    /**
     * Flag to determine if the component is ready to be rendered.
     */
    isLoading?: boolean;
    /**
     * Custom CSS class name for form inputs.
     */
    inputClassName?: string;
    /**
     * Custom CSS class name for info messages.
     */
    messageClassName?: string;
    /**
     * Callback function called when authentication fails.
     * @param error - The error that occurred during authentication.
     */
    onError?: (error: Error) => void;
    /**
     * Function to handle form submission.
     * @param payload - The form data to submit.
     * @param component - The component that triggered the submission.
     */
    onSubmit?: (payload: EmbeddedSignInFlowRequest, component: EmbeddedFlowComponent) => Promise<void>;
    /**
     * Callback function called when authentication is successful.
     * @param authData - The authentication data returned upon successful completion.
     */
    onSuccess?: (authData: Record<string, any>) => void;
    /**
     * Size variant for the component.
     */
    size?: 'small' | 'medium' | 'large';
    /**
     * Theme variant for the component.
     */
    variant?: CardProps['variant'];
    /**
     * Render props function for custom UI
     */
    children?: (props: BaseSignInRenderProps) => ReactNode;
    /**
     * Whether to show the title.
     */
    showTitle?: boolean;
    /**
     * Whether to show the subtitle.
     */
    showSubtitle?: boolean;
    /**
     * Whether to show the logo.
     */
    showLogo?: boolean;
}
/**
 * Base SignIn component that provides generic authentication flow.
 * This component handles component-driven UI rendering and can transform input
 * structure to component-driven format automatically.
 *
 * @example
 * // Default UI
 * ```tsx
 * import { BaseSignIn } from '@asgardeo/react';
 *
 * const MySignIn = () => {
 *   return (
 *     <BaseSignIn
 *       components={components}
 *       onSubmit={async (payload) => {
 *         return await handleAuth(payload);
 *       }}
 *       onSuccess={(authData) => {
 *         console.log('Success:', authData);
 *       }}
 *       className="max-w-md mx-auto"
 *     />
 *   );
 * };
 * ```
 *
 * @example
 * // Custom UI with render props
 * ```tsx
 * <BaseSignIn components={components} onSubmit={handleSubmit}>
 *   {({values, errors, handleInputChange, handleSubmit, isLoading, components}) => (
 *     <div className="custom-form">
 *       <input
 *         name="username"
 *         value={values.username || ''}
 *         onChange={(e) => handleInputChange('username', e.target.value)}
 *       />
 *       {errors.username && <span>{errors.username}</span>}
 *       <button
 *         onClick={() => handleSubmit(components[0], values)}
 *         disabled={isLoading}
 *       >
 *         Sign In
 *       </button>
 *     </div>
 *   )}
 * </BaseSignIn>
 * ```
 */
declare const BaseSignIn: FC<BaseSignInProps>;
export default BaseSignIn;