Skip to main content
function SignInModal(props: SignInModalProps): Element;
A sign-in modal component that wraps the SignIn component. In the SignIn modal, the description is hidden on the “credentials” step, and the title is hidden on the “verification” step.

Parameters

ParameterTypeDescription
propsSignInModalPropsThe props for the SignInModal component.

Returns

Element The SignInModal component.

See

Examples

// Render the SignInModal component with a custom success handler
function App() {
  // optional custom success handler
  const handleSignInSuccess = useCallback(() => {
    console.log("Sign in successful");
  }, []);
  return (
    <CDPReactProvider config={config} theme={themeOverrides}>
      <SignInModal onSuccess={handleSignInSuccess} />
    </CDPReactProvider>
  );
}
// Render the SignInModal component with a custom trigger button
function App() {
  return (
    <CDPReactProvider config={config} theme={themeOverrides}>
      <SignInModal>
        <button type="button" className="sign-in-button">
          Sign in
        </button>
      </SignInModal>
    </CDPReactProvider>
  );
}
// Render the SignInModal component with a secondary variant trigger button and a custom label
function App() {
  return (
    <CDPReactProvider config={config} theme={themeOverrides}>
      <SignInModal>
        <SignInModalTrigger variant="secondary" label="Log in" />
        <!-- modal content will be rendered automatically if not provided -->
      </SignInModal>
    </CDPReactProvider>
  );
}
// Render the SignInModal component with a custom class on the modal overlay and window
function App() {
  return (
    <CDPReactProvider config={config} theme={themeOverrides}>
      <SignInModal>
        <!-- SignInModalTrigger must be rendered if SignInModalContent is provided and you want to display the trigger button -->
        <SignInModalTrigger />
        <SignInModalContent className="custom-class" overlayClassName="custom-overlay-class" />
      </SignInModal>
    </CDPReactProvider>
  );
}
I