Sign in

A sign-in block is the card that stands between a person and their account: the fields that carry a credential, one action that submits them, and the ways out, recover a password, confirm a code, open an account instead.

Get Pro to installPro9 blocksReact, Vue and Figma

MCP

Every block in the set#

Sign in with phone

Signing in where the account is a phone number, with a way out for every way it can go wrong

Sign in with phone, code

Signing in with no password: the number turns into the code, and other methods wait one tap away

Sign in with phone, switch

Offering the methods as equals on one card, where each has its own short form

Sign up with phone

Opening an account on a phone number, where the number is confirmed before the account exists

Sign up with phone, steps

A sign-up that asks one thing at a time and says how far along it is

Sign up with phone, receipt

A sign-up that stays short: each answer folds into a row the person can still edit

Verify identity

The code step after a sign-in, with a way forward when the text never comes

Verify identity, arrives

Showing what a one-time-code autofill does on a phone, so the code step feels finished before the person types

Verify identity, routes

A code step where every other way of getting the code is already on the card

When to use#

The account is a phone number, so a dial code and the digits have to be entered and validated as one value.
A code has to be confirmed after the password step, with a resend that cannot be hammered.
Sign-up and sign-in share a brand, a layout and the same set of third-party providers.
Password rules exist and the person should see which ones they have already met while typing.

The whole set, with its codePro

Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.

Open in Blocks See plans