Sign In
A three-step sign-in card: email and password with validation and show/hide, generic provider buttons and a magic-link option, then a one-time code with resend cooldown, sliding between steps.
Preview
Pebble
Welcome back
Sign in to plan this week with your team.
or use email
New to Pebble? Create a workspace
Demo: any 8+ character password, or wrong-password for an error. Code 424242 signs you in.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | "Sign in" | Heading of the first step. |
| brand | ReactNode | — | Mark above the title. |
| defaultEmail | string | "" | Email to start with. |
| providers | { id, label, icon? }[] | [] | Provider buttons above the form. |
| onSignIn | ({ email, password }) => Promise<void | { error }> | — | Resolve to go to the code step; return { error } to stay. |
| onMagicLink | (email) => Promise<void | { error }> | — | Sends a sign-in link and code. Omit to hide the option. |
| onVerify | (code, { email, via }) => Promise<boolean | void | { error }> | — | false or { error } keeps the code step. |
| onResend | (email) => Promise<void | { error }> | — | Sends a new code after the cooldown. |
| onComplete | (email) => void | — | Called once the code is accepted. |
| forgotHref | string | — | Shows a Forgot password? link. |
| codeLength | number | 6 | Characters in the one-time code. |
| resendAfter | number | 30 | Seconds before a new code can be requested. |
| footer | ReactNode | — | Under the card on the first step. |
| doneContent | ReactNode | — | Replaces the line on the final step. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.