User Auth Slots

The User Auth drop-in exposes 5 slots in 7 containers for customizing specific UI sections. Use slots to replace or extend container components. For default properties available to all slots, see Extending drop-in components.

Version: 2.1.5

Container	Slots
Form	None
useForm	None
Fields	None
SignIn	SuccessNotification
inputsDefaultValueSet	SuccessNotification, PrivacyPolicyConsent
SuccessNotification	SuccessNotificationActions
UpdatePassword	SuccessNotification

Form slots

interface FormProps

slots?: {
  [key: string]: SlotProps;
};

---

useForm slots

interface useFormProps

slots?: {
  [key: string]: SlotProps;
};

---

Fields slots

interface FieldsProps

slots?: {
  [key: string]: SlotProps;
};

---

SignIn slots

interface SignInProps

slots?: {
  SuccessNotification?: SlotProps<DefaultSlotContext>;
};

SuccessNotification example

This example from the Commerce Confirm Account block shows how to customize the SuccessNotification slot:

import { render as provider } from '@dropins/storefront-auth/render.js';
import SignIn from '@dropins/storefront-auth/containers/SignIn.js';
import { rootLink } from '../../scripts/commerce.js';
// Note: `labels` and `recommendationsData` should be defined in your block context

provider.render(SignIn, {
  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');
            UI.render(Button, {
              children: 'My Account',
              onClick: () => {
                window.location.href = rootLink(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)';
            UI.render(Button, {
              children: 'Logout',
              variant: 'tertiary',
              onClick: async () => {
                await authApi.revokeCustomerToken();
                window.location.href = rootLink('/');
              },
            })(secondaryButton);
            innerCtx.appendChild(secondaryButton);
          },
        },
      })(elem);
      ctx.appendChild(elem);
    }
  }
})(document.querySelector('.sign-in'));

---

inputsDefaultValueSet slots

interface inputsDefaultValueSetProps

slots?: {
  SuccessNotification?: SlotProps<DefaultSlotContext>;
  PrivacyPolicyConsent: SlotProps;
};

PrivacyPolicyConsent example

This example from the Commerce Scripts block shows how to customize the PrivacyPolicyConsent slot:

import { render as provider } from '@dropins/storefront-auth/render.js';
import inputsDefaultValueSet from '@dropins/storefront-auth/containers/inputsDefaultValueSet.js';
import { PRIVACY_POLICY_PATH } from '../../scripts/commerce.js';

provider.render(inputsDefaultValueSet, {
  slots: {
    PrivacyPolicyConsent: async (ctx) => {
      const wrapper = document.createElement('span');
      Object.assign(wrapper.style, {
        color: 'var(--color-neutral-700)',
        font: 'var(--type-details-caption-2-font)',
        display: 'block',
        marginBottom: 'var(--spacing-medium)',
      });
      const link = document.createElement('a');
      link.href = PRIVACY_POLICY_PATH;
      link.target = '_blank';
      link.textContent = 'Privacy Policy';
      wrapper.append(
      'By creating an account, you acknowledge that you have read and agree to our ',
      link,
      ', which outlines how we collect, use, and protect your personal data.',
      );
      ctx.appendChild(wrapper);
    }
  }
})(document.querySelector('.inputs-default-value-set'));

---

SuccessNotification slots

interface SuccessNotificationProps

slots?: {
  SuccessNotificationActions?: SlotProps;
};

SuccessNotificationActions example

This example from the Commerce Confirm Account block shows how to customize the SuccessNotificationActions slot:

import { render as provider } from '@dropins/storefront-auth/render.js';
import SuccessNotification from '@dropins/storefront-auth/containers/SuccessNotification.js';
import { rootLink } from '../../scripts/commerce.js';

provider.render(SuccessNotification, {
  slots: {
    SuccessNotificationActions: (innerCtx) => {
      const primaryBtn = document.createElement('div');
      UI.render(Button, {
        children: 'My Account',
        onClick: () => {
          window.location.href = rootLink(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)';
      UI.render(Button, {
        children: 'Logout',
        variant: 'tertiary',
        onClick: async () => {
          await authApi.revokeCustomerToken();
          window.location.href = rootLink('/');
        },
      })(secondaryButton);
      innerCtx.appendChild(secondaryButton);
    }
  }
})(document.querySelector('.success-notification'));

---

UpdatePassword slots

interface UpdatePasswordProps

slots?: {
  SuccessNotification?: SlotProps<DefaultSlotContext>;
};

SuccessNotification example

This example from the Commerce Create Password block shows how to customize the SuccessNotification slot:

import { render as provider } from '@dropins/storefront-auth/render.js';
import UpdatePassword from '@dropins/storefront-auth/containers/UpdatePassword.js';
import { rootLink } from '../../scripts/commerce.js';
// Note: `labels` and `recommendationsData` should be defined in your block context

provider.render(UpdatePassword, {
  slots: {
    SuccessNotification: (ctx) => {
      const userName = ctx?.isSuccessful?.userName || '';
      const elem = document.createElement('div');
      authRenderer.render(SuccessNotification, {
        labels: {
          headingText: `Welcome ${userName}!`,
          messageText: 'Your password has been successfully updated.',
        },
        slots: {
          SuccessNotificationActions: (innerCtx) => {
            const primaryBtn = document.createElement('div');
            UI.render(Button, {
              children: 'My Account',
              onClick: () => {
                window.location.href = rootLink(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)';
            UI.render(Button, {
              children: 'Logout',
              variant: 'tertiary',
              onClick: async () => {
                await authApi.revokeCustomerToken();
                window.location.href = rootLink('/');
              },
            })(secondaryButton);
            innerCtx.appendChild(secondaryButton);
          },
        },
      })(elem);
      ctx.appendChild(elem);
    }
  }
})(document.querySelector('.update-password'));

---