@asgardeo/react 0.2.3 → 0.3.0

package/dist/components/actions/SignInButton/BaseSignInButton.d.ts

@@ -0,0 +1,65 @@
+/**
+ * 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 { ButtonHTMLAttributes, ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
+/**
+ * Common props shared by all {@link BaseSignInButton} components.
+ */
+export interface CommonBaseSignInButtonProps {
+    /**
+     * Function to initiate the sign-in process
+     */
+    signIn?: () => Promise<void>;
+    /**
+     * Loading state during sign-in process
+     */
+    isLoading?: boolean;
+}
+/**
+ * Props passed to the render function of {@link BaseSignInButton}
+ */
+export type BaseSignInButtonRenderProps = CommonBaseSignInButtonProps;
+/**
+ * Props interface of {@link BaseSignInButton}
+ */
+export interface BaseSignInButtonProps extends CommonBaseSignInButtonProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /**
+     * Render prop function that receives sign-in props, or traditional ReactNode children
+     */
+    children?: ((props: BaseSignInButtonRenderProps) => ReactNode) | ReactNode;
+}
+/**
+ * Base SignInButton component that supports both render props and traditional props patterns.
+ *
+ * @example Using render props
+ * ```tsx
+ * <BaseSignInButton>
+ *   {({ signIn, isLoading }) => (
+ *     <button onClick={signIn} disabled={isLoading}>
+ *       {isLoading ? 'Signing in...' : 'Sign In'}
+ *     </button>
+ *   )}
+ * </BaseSignInButton>
+ * ```
+ *
+ * @example Using traditional props
+ * ```tsx
+ * <BaseSignInButton className="custom-button">Sign In</BaseSignInButton>
+ * ```
+ */
+declare const BaseSignInButton: ForwardRefExoticComponent<BaseSignInButtonProps & RefAttributes<HTMLButtonElement>>;
+export default BaseSignInButton;

package/dist/components/actions/SignInButton/SignInButton.d.ts

@@ -0,0 +1,46 @@
+/**
+ * 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 { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { BaseSignInButtonProps } from './BaseSignInButton';
+/**
+ * Props interface of {@link SignInButton}
+ */
+export type SignInButtonProps = BaseSignInButtonProps;
+/**
+ * SignInButton component that supports both render props and traditional props patterns.
+ *
+ * @remarks This component is only supported in browser based React applications (CSR).
+ *
+ * @example Using render props
+ * ```tsx
+ * <SignInButton>
+ *   {({ handleSignIn, isLoading }) => (
+ *     <button onClick={handleSignIn} disabled={isLoading}>
+ *       {isLoading ? 'Signing in...' : 'Sign In'}
+ *     </button>
+ *   )}
+ * </SignInButton>
+ * ```
+ *
+ * @example Using traditional props
+ * ```tsx
+ * <SignInButton className="custom-button">Sign In</SignInButton>
+ * ```
+ */
+declare const SignInButton: ForwardRefExoticComponent<SignInButtonProps & RefAttributes<HTMLButtonElement>>;
+export default SignInButton;

package/dist/components/actions/SignOutButton/BaseSignOutButton.d.ts

@@ -0,0 +1,65 @@
+/**
+ * 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 { ForwardRefExoticComponent, ButtonHTMLAttributes, ReactNode, RefAttributes } from 'react';
+/**
+ * Common props shared by all {@link BaseSignOutButton} components.
+ */
+export interface CommonBaseSignOutButtonProps {
+    /**
+     * Function to initiate the sign-out process
+     */
+    signOut?: () => Promise<void>;
+    /**
+     * Loading state during sign-out process
+     */
+    isLoading?: boolean;
+}
+/**
+ * Props passed to the render function of {@link BaseSignOutButton}
+ */
+export type BaseSignOutButtonRenderProps = CommonBaseSignOutButtonProps;
+/**
+ * Props interface of {@link BaseSignOutButton}
+ */
+export interface BaseSignOutButtonProps extends CommonBaseSignOutButtonProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /**
+     * Render prop function that receives sign-out props, or traditional ReactNode children
+     */
+    children?: ((props: BaseSignOutButtonRenderProps) => ReactNode) | ReactNode;
+}
+/**
+ * Base SignOutButton component that supports both render props and traditional props patterns.
+ *
+ * @example Using render props
+ * ```tsx
+ * <BaseSignOutButton>
+ *   {({ signOut, isLoading }) => (
+ *     <button onClick={signOut} disabled={isLoading}>
+ *       {isLoading ? 'Signing out...' : 'Sign Out'}
+ *     </button>
+ *   )}
+ * </BaseSignOutButton>
+ * ```
+ *
+ * @example Using traditional props
+ * ```tsx
+ * <BaseSignOutButton className="custom-button">Sign Out</BaseSignOutButton>
+ * ```
+ */
+declare const BaseSignOutButton: ForwardRefExoticComponent<BaseSignOutButtonProps & RefAttributes<HTMLButtonElement>>;
+export default BaseSignOutButton;

package/dist/components/actions/SignOutButton/SignOutButton.d.ts

@@ -0,0 +1,44 @@
+/**
+ * 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 { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { BaseSignOutButtonProps } from './BaseSignOutButton';
+/**
+ * Props interface of {@link SignOutButton}
+ */
+export type SignOutButtonProps = BaseSignOutButtonProps;
+/**
+ * SignOutButton component that supports both render props and traditional props patterns.
+ *
+ * @example Using render props pattern
+ * ```tsx
+ * <SignOutButton>
+ *   {({ signOut, isLoading }) => (
+ *     <button onClick={signOut} disabled={isLoading}>
+ *       {isLoading ? 'Signing out...' : 'Sign Out'}
+ *     </button>
+ *   )}
+ * </SignOutButton>
+ * ```
+ *
+ * @example Using traditional props pattern
+ * ```tsx
+ * <SignOutButton className="custom-button">Sign Out</SignOutButton>
+ * ```
+ */
+declare const SignOutButton: ForwardRefExoticComponent<SignOutButtonProps & RefAttributes<HTMLButtonElement>>;
+export default SignOutButton;

package/dist/components/actions/SignUpButton/BaseSignUpButton.d.ts

@@ -0,0 +1,65 @@
+/**
+ * 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 { ForwardRefExoticComponent, ButtonHTMLAttributes, ReactNode, RefAttributes } from 'react';
+/**
+ * Common props shared by all {@link BaseSignUpButton} components.
+ */
+export interface CommonBaseSignUpButtonProps {
+    /**
+     * Function to initiate the sign-up process
+     */
+    signUp?: () => Promise<void>;
+    /**
+     * Loading state during sign-up process
+     */
+    isLoading?: boolean;
+}
+/**
+ * Props passed to the render function of {@link BaseSignUpButton}
+ */
+export type BaseSignUpButtonRenderProps = CommonBaseSignUpButtonProps;
+/**
+ * Props interface of {@link BaseSignUpButton}
+ */
+export interface BaseSignUpButtonProps extends CommonBaseSignUpButtonProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /**
+     * Render prop function that receives sign-up props, or traditional ReactNode children
+     */
+    children?: ((props: BaseSignUpButtonRenderProps) => ReactNode) | ReactNode;
+}
+/**
+ * Base SignUpButton component that supports both render props and traditional props patterns.
+ *
+ * @example Using render props
+ * ```tsx
+ * <BaseSignUpButton>
+ *   {({ signUp, isLoading }) => (
+ *     <button onClick={signUp} disabled={isLoading}>
+ *       {isLoading ? 'Creating account...' : 'Create Account'}
+ *     </button>
+ *   )}
+ * </BaseSignUpButton>
+ * ```
+ *
+ * @example Using traditional props
+ * ```tsx
+ * <BaseSignUpButton className="custom-button">Create Account</BaseSignUpButton>
+ * ```
+ */
+declare const BaseSignUpButton: ForwardRefExoticComponent<BaseSignUpButtonProps & RefAttributes<HTMLButtonElement>>;
+export default BaseSignUpButton;

package/dist/components/actions/SignUpButton/SignUpButton.d.ts

@@ -0,0 +1,45 @@
+/**
+ * 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 { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { BaseSignUpButtonProps } from './BaseSignUpButton';
+/**
+ * Props interface of {@link SignUpButton}
+ */
+export type SignUpButtonProps = BaseSignUpButtonProps;
+/**
+ * SignUpButton component that supports both render props and traditional props patterns.
+ * It redirects the user to the Asgardeo sign-up page configured for the application.
+ *
+ * @example Using render props pattern
+ * ```tsx
+ * <SignUpButton>
+ *   {({ signUp, isLoading }) => (
+ *     <button onClick={signUp} disabled={isLoading}>
+ *       {isLoading ? 'Creating Account...' : 'Create Account'}
+ *     </button>
+ *   )}
+ * </SignUpButton>
+ * ```
+ *
+ * @example Using traditional props pattern
+ * ```tsx
+ * <SignUpButton className="custom-button">Create Account</SignUpButton>
+ * ```
+ */
+declare const SignUpButton: ForwardRefExoticComponent<SignUpButtonProps & RefAttributes<HTMLButtonElement>>;
+export default SignUpButton;

package/dist/components/control/SignedIn.d.ts

@@ -0,0 +1,45 @@
+/**
+ * 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, PropsWithChildren, ReactNode } from 'react';
+/**
+ * Props for the SignedIn component.
+ */
+export interface SignedInProps {
+    /**
+     * Content to show when the user is not signed in.
+     */
+    fallback?: ReactNode;
+}
+/**
+ * A component that only renders its children when the user is signed in.
+ *
+ * @example
+ * ```tsx
+ * import { SignedIn } from '@asgardeo/auth-react';
+ *
+ * const App = () => {
+ *   return (
+ *     <SignedIn fallback={<p>Please sign in to continue</p>}>
+ *       <p>Welcome! You are signed in.</p>
+ *     </SignedIn>
+ *   );
+ * }
+ * ```
+ */
+declare const SignedIn: FC<PropsWithChildren<SignedInProps>>;
+export default SignedIn;

package/dist/components/control/SignedOut.d.ts

@@ -0,0 +1,45 @@
+/**
+ * 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, PropsWithChildren, ReactNode } from 'react';
+/**
+ * Props for the SignedOut component.
+ */
+export interface SignedOutProps {
+    /**
+     * Content to show when the user is signed in.
+     */
+    fallback?: ReactNode;
+}
+/**
+ * A component that only renders its children when the user is signed out.
+ *
+ * @example
+ * ```tsx
+ * import { SignedOut } from '@asgardeo/auth-react';
+ *
+ * const App = () => {
+ *   return (
+ *     <SignedOut fallback={<p>You are already signed in</p>}>
+ *       <p>Please sign in to continue</p>
+ *     </SignedOut>
+ *   );
+ * }
+ * ```
+ */
+declare const SignedOut: FC<PropsWithChildren<SignedOutProps>>;
+export default SignedOut;

package/dist/components/presentation/User.d.ts

@@ -0,0 +1,57 @@
+/**
+ * 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 { User as AsgardeoUser } from '@asgardeo/browser';
+import { FC, ReactNode } from 'react';
+/**
+ * Props for the User component.
+ */
+export interface UserProps {
+    /**
+     * Render prop that takes the user object and returns a ReactNode.
+     * @param user - The authenticated user object from Asgardeo.
+     * @returns A ReactNode to render.
+     */
+    children: (user: AsgardeoUser | null) => ReactNode;
+    /**
+     * Optional element to render when no user is signed in.
+     */
+    fallback?: ReactNode;
+}
+/**
+ * A component that uses render props to expose the authenticated user object.
+ *
+ * @example
+ * ```tsx
+ * import { User } from '@asgardeo/auth-react';
+ *
+ * const App = () => {
+ *   return (
+ *     <User fallback={<p>Please sign in</p>}>
+ *       {(user) => (
+ *         <div>
+ *           <h1>Welcome, {user.displayName}!</h1>
+ *           <p>Email: {user.email}</p>
+ *         </div>
+ *       )}
+ *     </User>
+ *   );
+ * }
+ * ```
+ */
+declare const User: FC<UserProps>;
+export default User;

package/dist/components/presentation/UserDropdown/BaseUserDropdown.d.ts

@@ -0,0 +1,76 @@
+/**
+ * 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, ReactElement, ReactNode } from 'react';
+export interface MenuItem {
+    label: string;
+    icon?: ReactNode;
+    onClick?: () => void;
+    href?: string;
+}
+export interface BaseUserDropdownProps {
+    /**
+     * Optional element to render when no user is signed in.
+     */
+    fallback?: ReactElement;
+    /**
+     * Optional className for the dropdown container.
+     */
+    className?: string;
+    /**
+     * The user object containing profile information
+     */
+    user: any;
+    /**
+     * The HTML element ID where the portal should be mounted
+     */
+    portalId?: string;
+    /**
+     * Menu items to display in the dropdown
+     */
+    menuItems?: MenuItem[];
+    /**
+     * Show user's display name next to avatar in the trigger button
+     */
+    showTriggerLable?: boolean;
+    /**
+     * Show dropdown header with user information
+     */
+    showDropdownHeader?: boolean;
+    /**
+     * Optional size for the avatar
+     */
+    avatarSize?: number;
+    /**
+     * Mapping of component attribute names to identity provider field names.
+     * Allows customizing which user profile fields should be used for each attribute.
+     */
+    attributeMapping?: {
+        picture?: string | string[];
+        firstName?: string | string[];
+        lastName?: string | string[];
+        username?: string | string[];
+        [key: string]: string | string[] | undefined;
+    };
+}
+/**
+ * BaseUserDropdown component displays a user avatar with a dropdown menu.
+ * When clicked, it shows a popover with customizable menu items.
+ * This component serves as the base for framework-specific implementations.
+ */
+export declare const BaseUserDropdown: FC<BaseUserDropdownProps>;
+export default BaseUserDropdown;

package/dist/components/presentation/UserDropdown/UserDropdown.d.ts

@@ -0,0 +1,49 @@
+/**
+ * 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 } from 'react';
+import { BaseUserDropdownProps } from './BaseUserDropdown';
+/**
+ * Props for the UserDropdown component.
+ * Extends BaseUserDropdownProps but makes the user prop optional since it will be obtained from useAsgardeo
+ */
+export type UserDropdownProps = Omit<BaseUserDropdownProps, 'user'>;
+/**
+ * UserDropdown component displays a user avatar with a dropdown menu.
+ * When clicked, it shows a popover with customizable menu items.
+ * This component is the React-specific implementation that uses the BaseUserDropdown
+ * and automatically retrieves the user data from Asgardeo context.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - will use user from Asgardeo context
+ * <UserDropdown menuItems={[
+ *   { label: 'Profile', onClick: () => {} },
+ *   { label: 'Settings', href: '/settings' },
+ *   { label: 'Sign Out', onClick: () => {} }
+ * ]} />
+ *
+ * // With custom configuration
+ * <UserDropdown
+ *   showUsername={false}
+ *   avatarSize={40}
+ *   fallback={<div>Please sign in</div>}
+ * />
+ * ```
+ */
+declare const UserDropdown: FC<UserDropdownProps>;
+export default UserDropdown;

package/dist/components/presentation/UserProfile/BaseUserProfile.d.ts

@@ -0,0 +1,42 @@
+/**
+ * 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, ReactElement } from 'react';
+export interface BaseUserProfileProps {
+    fallback?: ReactElement;
+    className?: string;
+    cardLayout?: boolean;
+    user: any;
+    mode?: 'inline' | 'popup';
+    portalId?: string;
+    title?: string;
+    attributeMapping?: {
+        picture?: string | string[];
+        firstName?: string | string[];
+        lastName?: string | string[];
+        username?: string | string[];
+        [key: string]: string | string[] | undefined;
+    };
+    editable?: boolean;
+    onChange?: (field: string, value: any) => void;
+    onSubmit?: (data: any) => void;
+    saveButtonText?: string;
+    cancelButtonText?: string;
+    onUpdate?: (payload: any) => Promise<void>;
+}
+declare const BaseUserProfile: FC<BaseUserProfileProps>;
+export default BaseUserProfile;