New Sign-In Security Alert

Auth18: New Sign-In Security Alert

Full-height security notification screen: an icon and message announce a new sign-in, a list of device/location/time details each with their own icon badge, and two independent actions ("this was me" confirm, "secure my account"), with a footer caption below.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/auth18?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/auth18?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/auth18.tsx and the button shadcn/ui primitive it's built on.

Quick start

The installed file exports auth18Demo alongside the block: the exact props behind the preview above. Spread it to get a working security-alert screen in one line.

import { Auth18, auth18Demo } from "@/components/beste/block/auth18";

export default function SecurityAlertPage() {
  return <Auth18 {...auth18Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Clock, Monitor, ShieldAlert } from "lucide-react";
import { Auth18 } from "@/components/beste/block/auth18";

export default function SecurityAlertPage() {
  return (
    <Auth18
      icon={<ShieldAlert className="size-6" />}
      heading="New sign-in detected"
      description="We noticed a new sign-in to your account. If this was you, no action is needed."
      details={[
        { icon: <Monitor className="size-5" />, label: "Device", value: "Chrome on macOS" },
        { icon: <Clock className="size-5" />, label: "Time", value: "Today at 14:32" },
      ]}
      confirmButton={{ label: "Yes, this was me", href: "/account" }}
      secureButton={{ label: "Secure my account", href: "/account/security" }}
      labels={{ footer: "For your safety, this link expires in 24 hours." }}
    />
  );
}

Props

type SignInDetail = {
  icon: React.ReactNode;
  label: string;
  value: string;
};

Behavior notes

• Fully static and presentational: there is no <form>, no inputs, and no local state; both actions are plain links.
• Each details row shows a leading icon in a circular bg-muted badge next to a label/value pair (e.g. "Device" / "Chrome on macOS"); the value text is truncated with truncate if it overflows its row.
• confirmButton (filled) and secureButton (variant="outline") render independently: either, both, or neither can appear, and there is no logic tying one to the other.
• labels.footer renders as a plain caption below the card only when set; the "expires in 24 hours" copy in the demo is static text with no actual countdown or expiry logic behind it.
• The details list itself is optional and only renders when non-empty, so the block can also serve as a bare confirm/secure prompt without any device information.