A new sign-in review with a dotted map that traces an arc from the usual location to the new one, device facts and a number-matching challenge: tap the number shown on the other device to approve it. Blocking the attempt plays a checklist of the lockdown steps taken.
84.17.46.203Your MacBook Air is showing a two-digit number. Tap the same one here to let it in.
npx shadcn@latest add https://hyperblur.dev/r/auth-flow-new-device.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/auth-flow-new-device.tsx.
import { AuthFlowNewDevice } from "@/components/hyperblur/auth-flow-new-device"
<AuthFlowNewDevice device="iPad Pro" numbers={[14, 61, 83]} correct={61} onApprove={(remember) => api.approve(remember)} onDeny={() => api.block()} />| Prop | Type | Default | Description |
|---|---|---|---|
| device | string | "MacBook Air" | Device that is trying to sign in. |
| browser | string | "Chrome 131 on macOS" | Browser and system line. |
| ip | string | "84.17.46.203" | IP address of the attempt. |
| when | string | "Today, 9:41 AM" | Time of the attempt, already formatted. |
| attempt | { label: string; x: number; y: number } | { label: "Berlin, DE", x: 0.66, y: 0.42 } | Location of the attempt. x and y go from 0 to 1 across the map. |
| usual | { label: string; x: number; y: number } | { label: "Lisbon, PT", x: 0.22, y: 0.7 } | Usual sign-in location. |
| distance | string | "2,312 km from your usual sign-in" | Label in the corner of the map. |
| numbers | number[] | [38, 72, 15] | Numbers offered in the challenge. |
| correct | number | 72 | The number displayed on the other device. |
| onApprove | (remember: boolean) => void | Called after the right number is picked, with the trust toggle value. | |
| onDeny | () => void | Called when the user blocks the attempt. | |
| headingAs | "h1" | "h2" | "h3" | "h2" | Heading level of the title. |
| accent | string | "#fbbf24" | Map arc, ping, toggle and approved color. |