@asgardeo/react
Version:
React implementation of Asgardeo JavaScript SDK.
119 lines (118 loc) • 4 kB
TypeScript
/**
* 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 { EmbeddedSignInFlowInitiateResponse, EmbeddedSignInFlowHandleResponse, EmbeddedSignInFlowHandleRequestPayload, EmbeddedFlowExecuteRequestConfig } from '@asgardeo/browser';
import { FC } from 'react';
import { CardProps } from '../../primitives/Card/Card';
/**
* Props for the BaseSignIn component.
*/
export interface BaseSignInProps {
afterSignInUrl?: string;
/**
* Custom CSS class name for the submit button.
*/
buttonClassName?: string;
/**
* Custom CSS class name for the form container.
*/
className?: string;
/**
* Custom CSS class name for error messages.
*/
errorClassName?: string;
/**
* 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;
/**
* Callback function called when authentication flow status changes.
* @param response - The current authentication response.
*/
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.
*/
onInitialize?: () => Promise<EmbeddedSignInFlowInitiateResponse>;
/**
* Function to handle authentication steps.
* @param payload - The authentication payload.
* @returns Promise resolving to the authentication response.
*/
onSubmit?: (payload: EmbeddedSignInFlowHandleRequestPayload, request: EmbeddedFlowExecuteRequestConfig) => Promise<EmbeddedSignInFlowHandleResponse>;
/**
* 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'];
}
/**
* Base SignIn component that provides native authentication flow.
* This component handles both the presentation layer and authentication flow logic.
* It accepts API functions as props to maintain framework independence.
*
* @example
* ```tsx
* import { BaseSignIn } from '@asgardeo/react';
*
* const MySignIn = () => {
* return (
* <BaseSignIn
* onInitialize={async () => {
* // Your API call to initialize authentication
* return await initializeAuth();
* }}
* onSubmit={async (payload) => {
* // Your API call to handle authentication
* return await handleAuth(payload);
* }}
* onSuccess={(authData) => {
* console.log('Success:', authData);
* }}
* onError={(error) => {
* console.error('Error:', error);
* }}
* className="max-w-md mx-auto"
* />
* );
* };
* ```
*/
declare const BaseSignIn: FC<BaseSignInProps>;
export default BaseSignIn;