shadcn.io is not affiliated with official shadcn/ui
Backup Code Login Block for React
A 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.
Installation
Overview
Let people in when their phone is out of reach, with this backup code login block for React with Base UI. It's the backup step of a Stowhouse sign-in, cloud storage: the page's side rails run the full height and one band crosses it, with a centred column that starts near the top because the sheet opens downward. One Input takes one code and adds the dash after the fourth character as it is typed, so it always reads XXXX-XXXX. A line under it counts the codes that still work, and at three or fewer it adds a warning icon and says to make new ones soon. A Collapsible holds the demo's saved sheet: eight codes in a hairline grid, the spent ones struck through. A code that works signs in and is struck through on the sheet; the result then offers "Make new codes", which asks in an Alert Dialog ("This replaces every remaining code") and swaps in a second set. It's built from Input, Collapsible, Alert Dialog, Field, Button, Shine Button and Guides, with a CSS entrance only. For any sign-in that backs a second factor with a sheet of codes.
FAQ
Where do the codes come from, and what stays in the page?
They are made up and typed into the file: a first sheet of eight with four already spent, and two fresh sets that "Make new codes" brings in turn. Open the saved sheet to read the codes; any one that isn't struck through works, once. Nothing is stored or sent, so reloading brings the first sheet back. In a product, make the codes on the server from a random source, show them once, keep only hashes, and mark each one spent on the server when it is used.
How does the field format a code?
Whatever is typed or pasted is changed to capitals, anything that isn't a letter or a digit is dropped, and the dash goes in after the fourth character, so "h4tn6pwc" becomes H4TN-6PWC. The codes in the sheet leave out the characters that look alike (no 0, O, 1, I or L), so a sheet that was written down or printed is easy to read back.
Why doesn't a refusal say whether the code was used?
A press with an unknown code and one with a spent code get the same words, "That code didn't work. It may be wrong or already used.", so the page never confirms that a code exists. The sheet in the Collapsible is the only place that shows what is spent, and it is the demo's.
What does the count line do?
It follows the codes: "4 of 8 codes left. Each works once." at rest, and at three or fewer the same line gets a warning icon and the words "Make new ones soon." At none it says to use another way in. The warning is an icon and words together, never only a color.
How does Make new codes work?
It sits in the signed-in result, since a real product only lets you replace codes once you are in. Pressing it opens an alert dialog that says the remaining codes stop working at once, with focus on "Keep my codes"; Escape or that button closes it with focus back on the trigger. "Replace my codes" swaps in the next set, resets every code to unused and says so in the status message. Keep the confirmation: replacing is the one action here that can't be undone.
What does the saved sheet do?
It is a disclosure that opens by itself when a code signs in, so the strike-through is visible, and can be opened by hand before. Each code shows "Ready" or "Used" in words as well as the strike, and a spent code is read out as no longer working. On phones the sheet is two codes across; on wider screens it is four.
Related
- Pro
Two-Factor Authenticator Login
Codes and approvalsA split sign-in step for an investing app: a six-digit code field beside a demo authenticator whose code and draining ring change every 30 seconds, where the current code and the one before it both sign in.
- Pro
Recovery Email Confirmation Login
Recovery and resetA 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.
- Pro
Backup Codes Account
Sign-in methodsAn account's backup codes: ten one-time codes in a hairline grid with the spent ones struck through, a meter of how many are left, a real text file to download and copy, and a new set behind a password.
- 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
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
Device Approval Login
Codes and approvalsA sign-in screen with a drawn phone: it asks whether the request is you, shows three number buttons, approves the matching one, denies a wrong one and points Deny to a password change.