shadcn.io is not affiliated with official shadcn/ui
Trust Score Login Block for React
A sign-in score simulator: four demo switches fill a circular meter in steps of 25 and decide the check, none above 75, a code from 50, an approval below, with a sketch of that check.
Installation
Overview
Show how little a trusted sign-in needs to ask, with this trust score login block for React with Base UI. It's the sign-in of Gearfern, a used-gear marketplace: a whole screen with the page's rails and one band across it, a centred header over two columns on wide screens and the result first on phones. The result column holds the one ring in the set, a Circular Progress filling to the score with the number in its middle, the check Gearfern would ask for as a word with a glyph (no extra check, a code by email, or approval on your phone), a still sketch of that check and the one Shine Button, whose label follows the check. The other column holds four demo Switches (a known device, a usual place, the office network, usual hours), each worth 25 points and said in words, and the ladder that turns a score into a check. Flipping a switch re-reads the score, the check and the sketch at once. It's built from Circular Progress, Switch, Button, Shine Button and Guides, with a CSS entrance only. For sign-ins that ask for more only when trust is low.
FAQ
What stays in the page, and how do I wire it for real?
Everything. The four signals are demo switches and the score is a pure function of them: 25 points for each one that holds. Nothing reads your device, place or network, and pressing the button waits half a second and says what a real product would do without doing it. In a product, compute the signals on your server at sign-in and decide the check there; a browser must never report its own trust.
How does a score become a check?
Through the ladder listed under the switches: 75 and up asks for nothing, 50 to 74 for a code by email, and below 50 for approval on your phone. The thresholds and the weight are constants at the top of the file, so you can change them in one place; the current row of the ladder is set in bold.
Is the ring accessible, and does it move?
The ring is decorative: the score and the check are plain text beside it, and the page's status line says the new verdict once the switches have rested for 600 milliseconds. The ring eases to its new value, and under reduced motion it jumps instead.
How is the check told apart without colour?
By a glyph (a tick, a key, a phone), the check's name in words and the sketch under it: nothing, six empty slots for a code, or a phone tile. The ring is a single foreground tone.
What does the button do?
Its label follows the check: Sign in, Send me a code or Ask my phone. Pressing it shows a short busy state and then says what would happen next ("A code would be emailed. Nothing was sent."). Changing a switch clears that line, and Reset puts the four switches back as they opened.
Related
- Pro
Risk Assessment Login
Risk checksA sign-in page that shows why it is asking: six weighted signals add up to a score, a three-zone band marks it, and the question follows the zone: nothing, a six-digit code, or a block.
- 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.
- Pro
Remember Device Login
Sessions and devicesA full-height sign-in page for an email client where trusting the browser is a choice with a consequence: a switch opens a 7, 30 or 90 day choice and a live line works out the date from a typed today.
- 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
Pre-Login Security Audit
Risk checksA pre-sign-in checklist panel: six typed checks in an accordion with a glyph and a word each, a fix and an I have done this box on the ones that fail, Re-check and a Continue that waits for no failures.
- Pro
Captcha Verification Login
Risk checksA sign-in page with a human check that never shows a picture: one checkbox that runs a short Checking beat and verifies, escalating to a typed question when the demo switch says the connection looks suspicious.