BETTER-AUTH. UI
Components

<NewDeviceEmail />

Email template component that notifies users when a new device signs in to their account.

Usage

import { NewDeviceEmail } from "@better-auth-ui/react"

export function NewDeviceNotificationEmail() {
  return (
    <NewDeviceEmail
      userEmail="user@example.com"
      deviceInfo={{
        browser: "Chrome 120.0",
        os: "macOS 14.2",
        location: "San Francisco, CA",
        ipAddress: "192.168.1.1",
        timestamp: "January 15, 2024 at 3:30 PM"
      }}
      appName="My App"
      supportEmail="support@example.com"
      secureAccountLink="https://example.com/secure-account"
      logoURL="https://example.com/logo.png"
      darkMode={true}
    />
  )
}

Installation

npx shadcn@latest add https://better-auth-ui.com/r/new-device-email.json

Props

Prop

Type

Features

  • Device information display (browser, OS, location, IP)
  • Timestamp of the sign-in
  • Security action button if unauthorized
  • Support contact information
  • Customizable branding and styling
  • Support for light/dark mode themes
  • Localization support

Last updated on

On this page