The props for the component.
Props for the SignIn component
Optionalchildren?: ReactNode | ((state: SignInState) => ReactNode)The children of the component. Leave empty to use the default sign-in flow UI.
If a function is provided, it will be called with the current state of the sign-in flow.
The function should return a ReactNode.
<SignIn>
{(state) => {
// Render a page title based on the current step
return (
<>
<SignInBackButton />
<SignInImage />
<h1>
{state.step === "credentials" && "Welcome"}
{state.step === "verification" && "Almost there"}
</h1>
<SignInTitle />
<SignInDescription />
<SignInForm />
{state.step === "credentials" && <SignInAuthMethodButtons activeMethod={state.authMethod} />}
<SignInFooter />
</>
);
}}
</SignIn>
OptionalonSuccess?: () => voidA function to call when the sign-in flow is successful.
The SignIn component.
function App() {
// Render the SignIn component with a custom onSuccess handler
const handleSuccess = () => {
console.log("Sign in successful");
}
return (
<CDPReactProvider config={config} theme={themeOverrides}>
<SignIn onSuccess={handleSuccess} />
</CDPReactProvider>
);
}
function App() {
// Render the title, description, and auth method buttons inside the transition containers
// This is the default UI if no children are provided.
return (
<CDPReactProvider config={config} theme={themeOverrides}>
<SignIn>
<SignInBackButton />
<SignInImage />
<SignInForm>
{({ authMethod, step, Form }) => {
// Pass the authMethod and step from the render function args to the title
// and description components so the UI is rendered correctly when both states
// are visible during the transition
return (
<>
<SignInTitle step={step} authMethod={authMethod} />
<SignInDescription step={step} authMethod={authMethod} />
{Form}
{state.step === "credentials" && <SignInAuthMethodButtons activeMethod={authMethod} />}
</>
);
}}
</SignInForm>
<SignInFooter />
</SignIn>
</CDPReactProvider>
);
}
function App() {
// Render a page title based on the current step
return (
<CDPReactProvider config={config} theme={themeOverrides}>
<SignIn>
{(state) => {
return (
<>
<SignInBackButton />
<SignInImage />
<h1>
{state.step === "credentials" && "Welcome"}
{state.step === "verification" && "Almost there"}
</h1>
<SignInTitle />
<SignInDescription />
<SignInForm />
{state.step === "credentials" && <SignInAuthMethodButtons activeMethod={state.authMethod} />}
<SignInFooter />
</>
);
}}
</SignIn>
</CDPReactProvider>
);
}
A sign-in component that handles the email and OTP flow.