Ship a complete auth flow
Sign-in is five screens, not one, and the missing four are where products feel unfinished. These are the states a real account system has to handle.
Take all 6 at once
npx hoverlab add auth-login-card auth-signup-split auth-forgot-password auth-reset-password auth-otp-verify auth-two-factorOr through the shadcn CLI, with nothing installed first:
npx shadcn@latest add https://hoverlab5.netlify.app/r/path-auth-flow.jsonThis path is a published registry item — one name that pulls in all 6 blocks. Or work down the list and copy each one from its page; the order is what matters, not how the files get there.
- 1
The screen everyone builds. Email and social side by side, with the password field wired for autofill.
- 2
Sign-up earns more room than sign-in: it is the one asking for something, so it gets a panel to argue in.
- 3
The first screen people forget. Without it, a lost password is a lost account.
- 4
The other half of the same flow — the screen the emailed link lands on.
- 5
One-time codes, with the paste-a-six-digit-code behaviour that is fiddly to get right and obvious when it is wrong.
- 6
Optional, but the reason a security-conscious customer trusts you. Add it once the rest works.
When you are done
Wire the forms to your provider. The blocks own their pending and error states; you supply the submit handler.