@asgardeo/react
Version:
React implementation of Asgardeo JavaScript SDK.
127 lines (126 loc) • 4.22 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 { EmbeddedFlowExecuteRequestPayload, EmbeddedFlowExecuteResponse } from '@asgardeo/browser';
import { FC } from 'react';
import { CardProps } from '../../primitives/Card/Card';
/**
* Props for the BaseSignUp component.
*/
export interface BaseSignUpProps {
/**
* URL to redirect after successful sign-up.
*/
afterSignUpUrl?: 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;
isInitialized?: boolean;
/**
* Custom CSS class name for info messages.
*/
messageClassName?: string;
/**
* Callback function called when the sign-up flow completes and requires redirection.
* This allows platform-specific handling of redirects (e.g., Next.js router.push).
* @param response - The response from the sign-up flow containing the redirect URL, etc.
*/
onComplete?: (response: EmbeddedFlowExecuteResponse) => void;
/**
* Callback function called when sign-up fails.
* @param error - The error that occurred during sign-up.
*/
onError?: (error: Error) => void;
/**
* Callback function called when sign-up flow status changes.
* @param response - The current sign-up response.
*/
onFlowChange?: (response: EmbeddedFlowExecuteResponse) => void;
/**
* Function to initialize sign-up flow.
* @returns Promise resolving to the initial sign-up response.
*/
onInitialize?: (payload?: EmbeddedFlowExecuteRequestPayload) => Promise<EmbeddedFlowExecuteResponse>;
/**
* Function to handle sign-up steps.
* @param payload - The sign-up payload.
* @returns Promise resolving to the sign-up response.
*/
onSubmit?: (payload: EmbeddedFlowExecuteRequestPayload) => Promise<EmbeddedFlowExecuteResponse>;
/**
* Size variant for the component.
*/
size?: 'small' | 'medium' | 'large';
/**
* Theme variant for the component.
*/
variant?: CardProps['variant'];
/**
* Whether to redirect after sign-up.
*/
shouldRedirectAfterSignUp?: boolean;
}
/**
* Base SignUp component that provides embedded sign-up flow.
* This component handles both the presentation layer and sign-up flow logic.
* It accepts API functions as props to maintain framework independence.
*
* @example
* ```tsx
* import { BaseSignUp } from '@asgardeo/react';
*
* const MySignUp = () => {
* return (
* <BaseSignUp
* onInitialize={async (payload) => {
* // Your API call to initialize sign-up
* return await initializeSignUp(payload);
* }}
* onSubmit={async (payload) => {
* // Your API call to handle sign-up
* return await handleSignUp(payload);
* }}
* onSuccess={(response) => {
* console.log('Success:', response);
* }} * onError={(error) => {
* console.error('Error:', error);
* }}
* onComplete={(redirectUrl) => {
* // Platform-specific redirect handling (e.g., Next.js router.push)
* router.push(redirectUrl); // or window.location.href = redirectUrl
* }}
* className="max-w-md mx-auto"
* />
* );
* };
* ```
*/
declare const BaseSignUp: FC<BaseSignUpProps>;
export default BaseSignUp;