The props for the SignInModal component.
Props for the SignInModal component.
Optionalchildren?: ReactNodeIf provided, will render the children instead of the default trigger button.
Optionalopen?: booleanWhether the modal is open. Note: if you set this, you must also set setIsOpen.
OptionalsetIsOpen?: (value: boolean) => voidA function to set the modal's open state. Note: if you set this, you must also set open.
OptionalonSuccess?: () => voidA function to call when the sign-in flow is successful.
The SignInModal component.
// 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>
);
}
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.