shadcn.io is not affiliated with official shadcn/ui
Recovery Email Confirmation Login Block for React
A recovery step for a casual game that shows the address on file masked and asks for the full address before it sends a code, then takes the six-digit code, with a helpdesk note for anyone without access.
Installation
Overview
Make people prove they know the address before a code goes to it, with this recovery email login block for React with Base UI. It's the recovery step of a Mossquest sign-in, a casual game: the page's side rails run the full height and one band crosses it, with a centred column that starts near the top because a note opens downward. A framed line shows the address on file with most of it hidden. Under it, an Input asks for the full address; a match sends the code, and a mismatch says "That does not match the address we have." with focus on the field. The button is never disabled. The code goes in a six-digit Input OTP, and a done result ends the flow. "I don't have access to that email" opens a short helpdesk note in a Collapsible. It's built from Input, Input OTP, Collapsible, Field, Button, Shine Button and Guides, with a CSS entrance only. For account recovery and any step that confirms a destination first.
FAQ
What stays in the page, and what are the demo values?
Everything. The address on file is marta.enlund@glenpost.example, printed once under the field as the demo address, and the code is 740215, printed once under the code field. Nothing is sent and nothing is changed: the done result says a real product would ask for a new password next, and the helpdesk address in the note is a reserved example one. In a product your server checks the address and sends the code.
Why type the address when it is already shown?
The mask shows only the first and last letter of the name and the start and end of the domain, so typing the whole address proves you already know it, which a stranger who found the page can't do. It doesn't prove you can read that mailbox; the code does that. A real product should also answer the same way whether or not an account exists, so the page can't be used to find out who has one.
How does the address match?
Capitals and spaces at either end are ignored, so " MARTA.Enlund@glenpost.example " matches, and everything else must be the same. An empty field says "Type the full address to continue." and a different address gets the mismatch sentence. Both put focus back in the field, keep the button in place and leave the page the same height.
How is the mask made?
By a small helper from the typed address: the name's first and last letters with three stars between, and the domain's first letter, four stars and its ending. It is the same length for every address on purpose, so it doesn't give away how long the name is.
What does the helpdesk note do?
It is a disclosure for people who can't reach the address: it says where to write, from any other address, with a player name and the day they joined, and how long a reply takes. Nothing is sent from the page. The link is part of the form, so it gives way, with the form, to the done result.
What happens after the code?
A correct code shows "Your account is back" and takes focus, with the masked address and what comes next; Start over returns to the first step with the field empty and focused. A wrong code is named ("That code didn't match. Try the demo code.") and Use a different address returns to the first step with the field empty. The three steps share one space, so the page doesn't change height.
Related
- Pro
Verify Identity Code Delivery Login
Codes and approvalsA verification step that asks where the code should go (text message, email or authenticator app), swaps to the code field once it is sent, and counts a limit of three codes an hour down with every send.
- Pro
OTP Verification Login
Codes and approvalsA code step for a parcel locker app: a six-digit field that checks itself on the sixth digit or on a paste, counts wrong codes down from three, and a resend button that waits 30 seconds after it is pressed.
- Pro
Security Questions Login
Recovery and resetA sign-in step with three security questions where any two correct answers sign in: hints on demand, answers compared without capitals, accents or extra spaces, three attempts, and a locked state with a way out.
- Pro
Forgot Password Login
Recovery and resetA forgot-password page for a school learning platform that never says whether an account exists, offers the right mail domain when one is a letter off, and resends the link on a 30-second wait.
- Pro
Backup Code Login
Codes and approvalsA sign-in step that takes one of eight single-use backup codes: the field adds the dash as you type, a saved sheet strikes spent codes through, and signing in offers new codes behind an alert dialog.
- Pro
Account Locked Login
Recovery and resetA locked-account page for a point-of-sale system that draws the lockout ladder, marks the rung the account is on with a fixed unlock time, and offers an unlock link by email or a password reset.