SignUp container

The SignUp container provides a form where the user enters the details required to create a new account. The execution of this form can vary, depending on how Commerce is configured:

• If email confirmations have been enabled, the user account is not activated until the user clicks on the confirmation link that Commerce sends to the user’s email address.

• If the customer account contains custom attributes, these must be configured to be available to the form. See Customer attribute properties for more information.

Simple container

A SignUp container can collect minimal information, such as name, email, and password, to create a new account. Alternatively, it can collect additional information, such as addresses, if the addressesData property is passed.

By default, upon a successful registration, the SignUp container renders the SuccessNotification container.

The user is logged on when the isAutoSignInEnabled property is passed.

If the routeRedirectOnSignIn property is passed, the user is redirected to the specified URL after a successful login. Neither the SuccessNotification container nor slots will be rendered.

In this scenario, email confirmation must be disabled.

SignIn standard login container

Registration with email confirmation enabled

If a user creates an account when email confirmation is enabled, a different form is rendered in place of the sign-up form to inform the user about the next steps. Automatic sign-in is not possible if email confirmation is enabled.

SignIn standard login container

SignUp configurations

The SignUp container provides the following configuration options:

Options	Type	Req?	Description
requireRetypePassword	boolean	No	Determines whether a Confirm Password text box is displayed.
addressesData	AddressFormProps[]	No	Allows passing address data into the SignUp drop-in. On successful sign-up, corresponding addresses will be automatically created in the newly created account.
inputsDefaultValueSet	inputsDefaultValueSetProps[]	No	Allows passing default values for inputs (prefilled sign-up form).
fieldsConfigForApiVersion1	any	No	Allows passing a set of field configurations for environments that do not support the createCustomerV2 mutation (fallback, should not be used in environments with the latest Adobe Commerce version).
apiVersion2	boolean	No	Defaults to true. Allows switching to the createCustomer mutation if createCustomerV2 is not supported in the current version of Commerce (This option should not be used in environments with the latest Commerce version).
isAutoSignInEnabled	boolean	No	Determines if the user should be automatically signed in after registration. This has no effect if email confirmation is enabled (automatic sign-in is not possible in this case).
formSize	default | small	No	Controls form paddings and spacing. Use "small" to embed the form in small layout containers like a dropdown in the header.
hideCloseBtnOnEmailConfirmation	boolean	No	Controls the visibility of the “Close” button on the email confirmation view.
routeRedirectOnEmailConfirmationClose	function	No	Determines where the user is redirected when the “Close” button on the email confirmation view is clicked.
slots	function	No	Defines the slot to pass. The SuccessNotification slot can pass the SuccessNotification container, or other custom component rendered upon successful sign-up, if routeRedirectOnSignIn is not provided. The PrivacyPolicyConsent slot allows passing a custom component to display a static privacy consent message in the sign-up form.
routeSignIn	function	No	Determines where the “Already a member? Sign in” link redirects the customer.
routeRedirectOnSignIn	function	No	Determines the page to which the user should be redirected after sign-in (if isAutoSignInEnabled is true). If provided, the user will not see SuccessNotification or any override provided using a slot.
onErrorCallback	function	No	Callback executed when an error occurs, receiving the error object as a parameter.
onSuccessCallback	function	No	Callback executed when the user successfully signs up, receiving userName and status as parameters.

Example

The following example redirects the user to the account page if they are already authenticated. If not, the user is redirected first to the login page, then to the account page.

export default async function decorate(block) {
  const isAuthenticated = !!getCookie('auth_dropin_user_token');

  if (isAuthenticated) {
    window.location.href = '/customer/account';
  } else {
    await authRenderer.render(SignUp, {
      hideCloseBtnOnEmailConfirmation: true,
      routeSignIn: () => '/customer/login',
      routeRedirectOnSignIn: () => '/customer/account',
    })(block);
  }
}