User Auth Slots

The User Auth drop-in exposes slots for customizing specific UI sections. Use slots to replace or extend container components. Slot render functions receive a context object (for example, DefaultSlotContext, ResetPasswordSlotContext) with properties such as isLoading, isSuccessful, and where relevant passwordError. For default properties available to all slots, see Extending drop-in components.

Version: 3.1.0

Slot usage best practices

Do not use context methods inside other context methods (for example, appendChild() inside onChange()). See Slots best practices for details and examples.

Container	Slots
SignIn	Title, Form, Buttons, SuccessNotification
SignUp	Title, Form, Buttons, SuccessNotification, PrivacyPolicyConsent
ResetPassword	Title, Form, Buttons
SuccessNotification	SuccessNotificationActions
UpdatePassword	Title, Form, Buttons, SuccessNotification

SignIn slots

The slots for the SignIn container allow you to customize its appearance and behavior.

interface SignInProps {
  slots?: {
    Title?: SlotProps<DefaultSlotContext>;
    Form?: SlotProps<DefaultSlotContext>;
    Buttons?: SlotProps<DefaultSlotContext>;
    SuccessNotification?: SlotProps<DefaultSlotContext>;
  };
}

Title slot

The Title slot allows you to customize the form title/header.

Form slot

The Form slot allows you to customize the main form area (email + password fields and layout).

Buttons slot

The Buttons slot allows you to customize the button row (for example, forgot password, sign up link, submit).

Example

import { render as provider } from '@dropins/storefront-auth/render.js';
import { SignIn } from '@dropins/storefront-auth/containers/SignIn.js';

await provider.render(SignIn, {
  slots: {
    Title: (ctx) => {
      const element = document.createElement('p');
      element.innerText = 'Welcome. Please login to shop with your account.';
      ctx.appendChild(element);
    },
    Form: (ctx) => {
      const wrapper = document.createElement('div');
      wrapper.innerHTML = '<p class="custom-intro">Enter your credentials below.</p>';
      ctx.prependSibling(wrapper);
    },
    Buttons: (ctx) => {
      const element = document.createElement('div');
      element.className = 'signin-buttons';
      ctx.appendChild(element);
    }
  }
})(block);

SuccessNotification slot

The SuccessNotification slot allows you to customize the success notification section of the SignIn container.

Example

import { render as provider } from '@dropins/storefront-auth/render.js';
import { SignIn } from '@dropins/storefront-auth/containers/SignIn.js';

await provider.render(SignIn, {
  slots: {
    SuccessNotification: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom SuccessNotification';
      ctx.appendChild(element);
    }
  }
})(block);

SignUp slots

The slots for the SignUp container allow you to customize its appearance and behavior.

interface SignUpProps {
  slots?: {
    Title?: SlotProps<DefaultSlotContext>;
    Form?: SlotProps<DefaultSlotContext>;
    Buttons?: SlotProps<DefaultSlotContext>;
    SuccessNotification?: SlotProps<DefaultSlotContext>;
    PrivacyPolicyConsent: SlotProps;
  };
}

Title slot

The Title slot allows you to customize the form title/header.

Form slot

The Form slot allows you to customize the main form area (password, confirm password, consent, and more).

Buttons slot

The Buttons slot allows you to customize the button row (for example, sign in link, submit).

Example

import { render as provider } from '@dropins/storefront-auth/render.js';
import { SignUp } from '@dropins/storefront-auth/containers/SignUp.js';

await provider.render(SignUp, {
  slots: {
    Title: (ctx) => {
      const element = document.createElement('h2');
      element.innerText = 'Create an account';
      ctx.appendChild(element);
    },
    Form: (ctx) => {
      const element = document.createElement('div');
      element.className = 'custom-signup-form';
      ctx.appendChild(element);
    },
    Buttons: (ctx) => {
      const element = document.createElement('div');
      element.className = 'signup-buttons';
      ctx.appendChild(element);
    }
  }
})(block);

SuccessNotification slot

The SuccessNotification slot allows you to customize the success notification section of the SignUp container.

Example

import { render as provider } from '@dropins/storefront-auth/render.js';
import { SignUp } from '@dropins/storefront-auth/containers/SignUp.js';

await provider.render(SignUp, {
  slots: {
    SuccessNotification: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom SuccessNotification';
      ctx.appendChild(element);
    }
  }
})(block);

PrivacyPolicyConsent slot

The PrivacyPolicyConsent slot allows you to customize the privacy policy consent section of the SignUp container.

Example

import { render as provider } from '@dropins/storefront-auth/render.js';
import { SignUp } from '@dropins/storefront-auth/containers/SignUp.js';

await provider.render(SignUp, {
  slots: {
    PrivacyPolicyConsent: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom PrivacyPolicyConsent';
      ctx.appendChild(element);
    }
  }
})(block);

ResetPassword slots

The slots for the ResetPassword container allow you to customize its appearance and behavior. The slot context (for example, ResetPasswordSlotContext) includes properties such as isLoading.

interface ResetPasswordProps {
  slots?: {
    Title?: SlotProps<ResetPasswordSlotContext>;
    Form?: SlotProps<ResetPasswordSlotContext>;
    Buttons?: SlotProps<ResetPasswordSlotContext>;
  };
}

Title slot

The Title slot allows you to customize the form title/header for the reset password flow.

Form slot

The Form slot allows you to customize the main form area (for example, email field for requesting the reset link).

Buttons slot

The Buttons slot allows you to customize the button row (for example, submit to request reset link).

Example

import { render as provider } from '@dropins/storefront-auth/render.js';
import { ResetPassword } from '@dropins/storefront-auth/containers/ResetPassword.js';

await provider.render(ResetPassword, {
  slots: {
    Title: (ctx) => {
      const element = document.createElement('h2');
      element.innerText = 'Reset your password';
      ctx.appendChild(element);
    },
    Form: (ctx) => {
      const element = document.createElement('div');
      element.className = 'custom-reset-password-form';
      ctx.appendChild(element);
    },
    Buttons: (ctx) => {
      const element = document.createElement('div');
      element.className = 'reset-password-buttons';
      ctx.appendChild(element);
    }
  }
})(block);

SuccessNotification slots

The slots for the SuccessNotification container allow you to customize its appearance and behavior.

interface SuccessNotificationProps {
  slots?: {
    SuccessNotificationActions?: SlotProps;
  };
}

SuccessNotificationActions slot

The SuccessNotificationActions slot allows you to customize the success notification actions section of the SuccessNotification container.

Example

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

await provider.render(SuccessNotification, {
  slots: {
    SuccessNotificationActions: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom SuccessNotificationActions';
      ctx.appendChild(element);
    }
  }
})(block);

UpdatePassword slots

The slots for the UpdatePassword container allow you to customize its appearance and behavior.

interface UpdatePasswordProps {
  slots?: {
    Title?: SlotProps<DefaultSlotContext>;
    Form?: SlotProps<DefaultSlotContext>;
    Buttons?: SlotProps<DefaultSlotContext>;
    SuccessNotification?: SlotProps<DefaultSlotContext>;
  };
}

Title slot

The Title slot allows you to customize the form title/header.

Form slot

The Form slot allows you to customize the update-password form (for example, new password field and layout).

Buttons slot

The Buttons slot allows you to customize the submit button area.

Example

import { render as provider } from '@dropins/storefront-auth/render.js';
import { UpdatePassword } from '@dropins/storefront-auth/containers/UpdatePassword.js';

await provider.render(UpdatePassword, {
  slots: {
    Title: (ctx) => {
      const element = document.createElement('h2');
      element.innerText = 'Set a new password';
      ctx.appendChild(element);
    },
    Form: (ctx) => {
      const element = document.createElement('div');
      element.className = 'custom-update-password-form';
      ctx.appendChild(element);
    },
    Buttons: (ctx) => {
      const element = document.createElement('div');
      element.className = 'update-password-buttons';
      ctx.appendChild(element);
    }
  }
})(block);

SuccessNotification slot

The SuccessNotification slot allows you to customize the success notification section of the UpdatePassword container.

Example

import { render as provider } from '@dropins/storefront-auth/render.js';
import { UpdatePassword } from '@dropins/storefront-auth/containers/UpdatePassword.js';

await provider.render(UpdatePassword, {
  slots: {
    SuccessNotification: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom SuccessNotification';
      ctx.appendChild(element);
    }
  }
})(block);