User Auth Slots

The User Auth drop-in exposes slots 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: 3.0.0-beta1

Container	Slots
SignIn	SuccessNotification
SignUp	SuccessNotification, PrivacyPolicyConsent
SuccessNotification	SuccessNotificationActions
UpdatePassword	SuccessNotification

SignIn slots

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

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

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?: {
    SuccessNotification?: SlotProps<DefaultSlotContext>;
    PrivacyPolicyConsent: SlotProps;
  };
}

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);

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?: {
    SuccessNotification?: SlotProps<DefaultSlotContext>;
  };
}

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);