Staaarter

New Sign-In Security Alert

Full-height security-notification screen. A warning icon and message explain that a new sign-in was detected, a small info card lists device, location, and time as icon/label/value rows, and two actions let the visitor confirm it was them or go secure the account.

By Staaarter Team
Auth
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/new-sign-in-security-alert.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/auth/auth18.tsx instead.

Usage

The file also exports auth18Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Auth18, auth18Demo } from "@/components/blocks/auth/auth18";

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

Props

PropTypeDefaultDescription
headingstring"New sign-in detected"Main heading.
descriptionstringundefinedSupporting message under the heading.
detailsDetailRow[]noneRows rendered in the info card, in the order passed in.
confirmLabelstring"This was me"Label on the confirm (outline) button.
secureLabelstring"Secure my account"Label on the destructive-styled button.
classNamestringnoneExtra classes for the outer section element.

Types

type DetailRow = { icon: LucideIcon; label: string; value: string };

Behavior notes

  • Entirely static/server-rendered; details renders in whatever order the array is passed in with no sorting.
  • "This was me" and "Secure my account" are plain buttons with no handlers wired up, both are backend-requiring actions left inert.
  • The destructive styling on "Secure my account" is purely visual emphasis, it does not perform any destructive action itself.