SignIn container

The SignIn container helps render different screens that enable the customer to log in to an account. The container supports multiple scenarios, including standard logins for existing accounts and for accounts that are process of being confirmed.

If customers are required to confirm an email address to create an account, the Stores > Configuration > Customers > Customer Configuration > Create New Account Options > Require Emails Confirmation setting in the Commerce Admin must be set to Yes.

Simple login

The standard login screen can be displayed when an account has already been created or confirmed, or when email configuration is disabled.

Upon a successful login, the SignIn container renders the SuccessNotification container. This container can be overridden using the Slots API.

Alternatively, if you pass the routeRedirectOnSignIn property, the user will be redirected to the specified URL after successful login. (Neither SuccessNotification nor Slot content will be rendered.)

SignIn standard login container

Log in to an unconfirmed account

This scenario is applicable when email confirmation has been enabled, and the user has created an account, but has not confirmed their email.

If the user attempts to log in with credentials for an unconfirmed account, they will see a custom notification allowing them to resend the confirmation email. When the user clicks on the Resend confirmation email link shown below, Commerce sends a new confirmation email to the user.

SignIn standard login container

Confirmation from email

The SignIn container processes email confirmations when users click on the confirmation link sent to their email. The link format is:

https://www.example.com/customer/account/confirm/?back_url=&email=<user_email>&id=<user_id>&key=<confirmation_key>

The following steps describe the flow:

• Email confirmation is enabled in the Commerce Admin.
• The user has created an account and received the email confirmation link.
• The user clicks on the link and gets redirected to the email confirmation page with the SignIn drop-in.

Note

To enable the email confirmation functionality, you must pass the enableEmailConfirmation property with a true value during integration.

SignIn standard login container

SignIn configurations

The SignIn container provides the following configuration options:

Option	Type	Req?	Description
slots	SuccessNotification	No	Renders the SuccessNotification container or a custom component on successful sign-in when routeRedirectOnSignIn is absent.
labels	Record<string, string>	No	Sets text labels that describe the container.
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.
renderSignUpLink	boolean	No	Controls the visibility of the “Sign up” link next to the “Forgot Password” link.
initialEmailValue	string	No	Sets an initial value for the email input (prefilled sign-in form).
enableEmailConfirmation	boolean	No	Enables the container to handle email confirmation.
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.
routeForgotPassword	function	No	Determines where the “Forgot password?” link redirects the customer.
routeSignUp	function	No	Determines where the “Sign up” link redirects the customer (link visibility is based on the renderSignUpLink property).
routeRedirectOnSignIn	function	No	Determines the page to which the user should be redirected after sign-in. If provided, the user won’t be redirected to the SuccessNotification container or any slot-defined override.
onSuccessCallback	function	No	Callback that runs when the user successfully logs in, receiving userName and status as parameters.
apiErrorMessageOverride	(error: \{ message: string \}) => string	No	Overrides API error messages. Receives the original error object and returns a replacement message string for brand-specific or user-friendly login error messages.
onErrorCallback	function	No	Callback that runs when an error occurs, receiving the error object as a parameter.
onSignUpLinkClick	function	No	Executed on clicking the “Sign up” link before redirect (link visibility is based on the renderSignUpLink property).

Example

The following example renders the SignIn container.

export default async function decorate(block) {
  if (checkIsAuthenticated()) {
    window.location.href = CUSTOMER_ACCOUNT_PATH;
  } else {
    await authRenderer.render(SignIn, {
      enableEmailConfirmation: true,
      routeForgotPassword: () => CUSTOMER_FORGOTPASSWORD_PATH,
      slots: {
        SuccessNotification: (ctx) => {
          const userName = ctx?.isSuccessful?.userName || '';

          const elem = document.createElement('div');

          authRenderer.render(SuccessNotification, {
            labels: {
              headingText: `Welcome ${userName}!`,
              messageText: 'You have successfully logged in.',
            },
            slots: {
              SuccessNotificationActions: (innerCtx) => {
                const primaryBtn = document.createElement('div');

                authRenderer.render(Button, {
                  children: 'My Account',

                  onClick: () => {
                    window.location.href = CUSTOMER_ACCOUNT_PATH;
                  },
                })(primaryBtn);

                innerCtx.appendChild(primaryBtn);

                const secondaryButton = document.createElement('div');
                secondaryButton.style.display = 'flex';
                secondaryButton.style.justifyContent = 'center';
                secondaryButton.style.marginTop = 'var(--spacing-xsmall)';

                authRenderer.render(Button, {
                  children: 'Logout',
                  variant: 'tertiary',
                  onClick: async () => {
                    await authApi.revokeCustomerToken();
                    window.location.href = '/';
                  },
                })(secondaryButton);

                innerCtx.appendChild(secondaryButton);
              },
            },
          })(elem);

          ctx.appendChild(elem);
        },
      },
    })(block);
  }
}