feat: Implement embedded sign-up flow; add SignUp component and related actions; enhance SignUpButton and context management

Author: brionmario

packages/nextjs/src/AsgardeoNextClient.ts

@@ -39,6 +39,7 @@ import {
   getSchemas,
   generateFlattenedUserProfile,
   updateMeProfile,
+  executeEmbeddedSignUpFlow,
 } from '@asgardeo/node';
 import {NextRequest, NextResponse} from 'next/server';
 import {AsgardeoNextConfig} from './models/config';
@@ -99,18 +100,6 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
 
     this.isInitialized = true;
 
-    console.log('[AsgardeoNextClient] Initializing with decorateConfigWithNextEnv:', {
-      baseUrl,
-      clientId,
-      clientSecret,
-      signInUrl,
-      signUpUrl,
-      afterSignInUrl,
-      afterSignOutUrl,
-      enablePKCE: false,
-      ...rest,
-    });
-
     const origin: string = await getClientOrigin();
 
     return this.asgardeo.initialize({
@@ -314,11 +303,31 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
   override async signUp(options?: SignUpOptions): Promise<void>;
   override async signUp(payload: EmbeddedFlowExecuteRequestPayload): Promise<EmbeddedFlowExecuteResponse>;
   override async signUp(...args: any[]): Promise<void | EmbeddedFlowExecuteResponse> {
+    if (args.length === 0) {
+      throw new AsgardeoRuntimeError(
+        'No arguments provided for signUp method.',
+        'AsgardeoNextClient-ValidationError-001',
+        'nextjs',
+        'The signUp method requires at least one argument, either a SignUpOptions object or an EmbeddedFlowExecuteRequestPayload.',
+      );
+    }
+
+    const firstArg = args[0];
+
+    if (typeof firstArg === 'object' && 'flowType' in firstArg) {
+      const configData = await this.asgardeo.getConfigData();
+      const baseUrl = configData?.baseUrl;
+
+      return executeEmbeddedSignUpFlow({
+        baseUrl,
+        payload: firstArg as EmbeddedFlowExecuteRequestPayload,
+      });
+    }
     throw new AsgardeoRuntimeError(
       'Not implemented',
-      'react-AsgardeoReactClient-ValidationError-002',
-      'react',
-      'The signUp method with SignUpOptions is not implemented in the React client.',
+      'AsgardeoNextClient-ValidationError-002',
+      'nextjs',
+      'The signUp method with SignUpOptions is not implemented in the Next.js client.',
     );
   }
 

packages/nextjs/src/client/components/actions/SignInButton/SignInButton.tsx

@@ -82,7 +82,7 @@ const SignInButton = forwardRef<HTMLButtonElement, SignInButtonProps>(
         throw new AsgardeoRuntimeError(
           `Sign in failed: ${error instanceof Error ? error.message : String(error)}`,
           'SignInButton-handleSignIn-RuntimeError-001',
-          'next',
+          'nextjs',
           'Something went wrong while trying to sign in. Please try again later.',
         );
       } finally {

packages/nextjs/src/client/components/actions/SignUpButton/SignUpButton.tsx

@@ -18,41 +18,108 @@
 
 'use client';
 
-import {FC, forwardRef, PropsWithChildren, ReactElement, Ref} from 'react';
-import InternalAuthAPIRoutesConfig from '../../../../configs/InternalAuthAPIRoutesConfig';
-import {BaseSignUpButton, BaseSignUpButtonProps} from '@asgardeo/react';
+import {AsgardeoRuntimeError} from '@asgardeo/node';
+import {forwardRef, ForwardRefExoticComponent, MouseEvent, ReactElement, Ref, RefAttributes, useState} from 'react';
+import {BaseSignUpButton, BaseSignUpButtonProps, useTranslation} from '@asgardeo/react';
+import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
+import {useRouter} from 'next/navigation';
 
 /**
- * Interface for SignInButton component props.
+ * Props interface of {@link SignUpButton}
  */
 export type SignUpButtonProps = BaseSignUpButtonProps;
 
 /**
- * SignInButton component. This button initiates the sign-in process when clicked.
+ * 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
+ * @remarks This component is only supported in browser based React applications (CSR).
+ *
+ * @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
- * import { SignInButton } from '@asgardeo/auth-react';
+ * <SignUpButton className="custom-button">Create Account</SignUpButton>
+ * ```
  *
- * const App = () => {
- *   const buttonRef = useRef<HTMLButtonElement>(null);
- *   return (
- *     <SignInButton ref={buttonRef} className="custom-class" style={{ backgroundColor: 'blue' }}>
- *       Sign In
- *     </SignInButton>
- *   );
- * }
+ * @example Using component-level preferences
+ * ```tsx
+ * <SignUpButton
+ *   preferences={{
+ *     i18n: {
+ *       bundles: {
+ *         'en-US': {
+ *           translations: {
+ *             'buttons.signUp': 'Custom Sign Up Text'
+ *           }
+ *         }
+ *       }
+ *     }
+ *   }}
+ * >
+ *   Custom Sign Up
+ * </SignUpButton>
  * ```
  */
-const SignUpButton: FC<PropsWithChildren<SignUpButtonProps>> = forwardRef<
+const SignUpButton: ForwardRefExoticComponent<SignUpButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<
   HTMLButtonElement,
-  PropsWithChildren<SignUpButtonProps>
->(
-  ({className, style, ...rest}: PropsWithChildren<SignUpButtonProps>, ref: Ref<HTMLButtonElement>): ReactElement => (
-    <form action={InternalAuthAPIRoutesConfig.signUp}>
-      <BaseSignUpButton className={className} style={style} ref={ref} type="submit" {...rest} />
-    </form>
-  ),
-);
+  SignUpButtonProps
+>(({children, onClick, preferences, ...rest}: SignUpButtonProps, ref: Ref<HTMLButtonElement>): ReactElement => {
+  const {signUp, signUpUrl} = useAsgardeo();
+  const router = useRouter();
+  const {t} = useTranslation(preferences?.i18n);
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSignUp = async (e?: MouseEvent<HTMLButtonElement>): Promise<void> => {
+    try {
+      setIsLoading(true);
+
+      // If a custom `signUpUrl` is provided, use it for navigation.
+      if (signUpUrl) {
+        router.push(signUpUrl);
+      } else {
+        await signUp();
+      }
+
+      if (onClick) {
+        onClick(e as MouseEvent<HTMLButtonElement>);
+      }
+    } catch (error) {
+      throw new AsgardeoRuntimeError(
+        `Sign up failed: ${error instanceof Error ? error.message : String(error)}`,
+        'SignUpButton-handleSignUp-RuntimeError-001',
+        'nextjs',
+        'Something went wrong while trying to sign up. Please try again later.',
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <BaseSignUpButton
+      ref={ref}
+      onClick={handleSignUp}
+      isLoading={isLoading}
+      signUp={handleSignUp}
+      preferences={preferences}
+      {...rest}
+    >
+      {children ?? t('elements.buttons.signUp')}
+    </BaseSignUpButton>
+  );
+});
+
+SignUpButton.displayName = 'SignUpButton';
 
 export default SignUpButton;

packages/nextjs/src/client/components/presentation/SignUp/SignUp.tsx

@@ -0,0 +1,102 @@
+/**
+ * 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.
+ */
+
+'use client';
+
+import {
+  EmbeddedFlowExecuteRequestPayload,
+  EmbeddedFlowExecuteResponse,
+  EmbeddedFlowResponseType,
+  EmbeddedFlowType,
+} from '@asgardeo/node';
+import {FC} from 'react';
+import {BaseSignUp, BaseSignUpProps} from '@asgardeo/react';
+import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
+
+/**
+ * Props for the SignUp component.
+ */
+export type SignUpProps = BaseSignUpProps;
+
+/**
+ * A styled SignUp component that provides embedded sign-up flow with pre-built styling.
+ * This component handles the API calls for sign-up and delegates UI logic to BaseSignUp.
+ *
+ * @example
+ * ```tsx
+ * import { SignUp } from '@asgardeo/react';
+ *
+ * const App = () => {
+ *   return (
+ *     <SignUp
+ *       onSuccess={(response) => {
+ *         console.log('Sign-up successful:', response);
+ *         // Handle successful sign-up (e.g., redirect, show confirmation)
+ *       }}
+ *       onError={(error) => {
+ *         console.error('Sign-up failed:', error);
+ *       }}
+ *       onComplete={(redirectUrl) => {
+ *         // Platform-specific redirect handling (e.g., Next.js router.push)
+ *         router.push(redirectUrl); // or window.location.href = redirectUrl
+ *       }}
+ *       size="medium"
+ *       variant="outlined"
+ *       afterSignUpUrl="/welcome"
+ *     />
+ *   );
+ * };
+ * ```
+ */
+const SignUp: FC<SignUpProps> = ({className, size = 'medium', variant = 'outlined', afterSignUpUrl, onError}) => {
+  const {signUp, isInitialized} = useAsgardeo();
+
+  /**
+   * Initialize the sign-up flow.
+   */
+  const handleInitialize = async (
+    payload?: EmbeddedFlowExecuteRequestPayload,
+  ): Promise<EmbeddedFlowExecuteResponse> => {
+    return await signUp(
+      payload || {
+        flowType: EmbeddedFlowType.Registration,
+      },
+    );
+  };
+
+  /**
+   * Handle sign-up steps.
+   */
+  const handleOnSubmit = async (payload: EmbeddedFlowExecuteRequestPayload): Promise<EmbeddedFlowExecuteResponse> =>
+    await signUp(payload);
+
+  return (
+    <BaseSignUp
+      afterSignUpUrl={afterSignUpUrl}
+      onInitialize={handleInitialize}
+      onSubmit={handleOnSubmit}
+      onError={onError}
+      className={className}
+      size={size}
+      variant={variant}
+      isInitialized={true}
+    />
+  );
+};
+
+export default SignUp;

packages/nextjs/src/client/contexts/Asgardeo/AsgardeoContext.ts

@@ -32,6 +32,7 @@ export type AsgardeoContextProps = Partial<AsgardeoReactContextProps>;
  */
 const AsgardeoContext: Context<AsgardeoContextProps | null> = createContext<null | AsgardeoContextProps>({
   signInUrl: undefined,
+  signUpUrl: undefined,
   afterSignInUrl: undefined,
   baseUrl: undefined,
   isInitialized: false,

packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx

@@ -20,6 +20,7 @@
 
 import {
   EmbeddedFlowExecuteRequestConfig,
+  EmbeddedFlowExecuteRequestPayload,
   EmbeddedSignInFlowHandleRequestPayload,
   User,
   UserProfile,
@@ -36,6 +37,7 @@ export type AsgardeoClientProviderProps = Partial<Omit<AsgardeoProviderProps, 'b
   Pick<AsgardeoProviderProps, 'baseUrl' | 'clientId'> & {
     signOut: AsgardeoContextProps['signOut'];
     signIn: AsgardeoContextProps['signIn'];
+    signUp: AsgardeoContextProps['signUp'];
     isSignedIn: boolean;
     userProfile: UserProfile;
     user: User | null;
@@ -46,9 +48,11 @@ const AsgardeoClientProvider: FC<PropsWithChildren<AsgardeoClientProviderProps>>
   children,
   signIn,
   signOut,
+  signUp,
   preferences,
   isSignedIn,
   signInUrl,
+  signUpUrl,
   user,
   userProfile,
 }: PropsWithChildren<AsgardeoClientProviderProps>) => {
@@ -101,6 +105,38 @@ const AsgardeoClientProvider: FC<PropsWithChildren<AsgardeoClientProviderProps>>
     }
   };
 
+  const handleSignUp = async (
+    payload: EmbeddedFlowExecuteRequestPayload,
+    request: EmbeddedFlowExecuteRequestConfig,
+  ) => {
+    console.log('[AsgardeoClientProvider] Executing sign-up action with payload', payload);
+    try {
+      const result = await signUp(payload, request);
+
+      // Redirect based flow URL is sent as `signUpUrl` in the response.
+      if (result?.data?.signUpUrl) {
+        router.push(result.data.signUpUrl);
+
+        return;
+      }
+
+      // After the Embedded flow is successful, the URL to navigate next is sent as `afterSignUpUrl` in the response.
+      if (result?.data?.afterSignUpUrl) {
+        router.push(result.data.afterSignUpUrl);
+
+        return;
+      }
+
+      if (result?.error) {
+        throw new Error(result.error);
+      }
+
+      return result?.data ?? result;
+    } catch (error) {
+      throw error;
+    }
+  };
+
   const handleSignOut = async () => {
     try {
       const result = await signOut();
@@ -128,9 +164,11 @@ const AsgardeoClientProvider: FC<PropsWithChildren<AsgardeoClientProviderProps>>
       isLoading,
       signIn: handleSignIn,
       signOut: handleSignOut,
+      signUp: handleSignUp,
       signInUrl,
+      signUpUrl,
     }),
-    [baseUrl, user, isSignedIn, isLoading, signInUrl],
+    [baseUrl, user, isSignedIn, isLoading, signInUrl, signUpUrl],
   );
 
   return (