Components/Device Trust

Device Trust

Card representing one device that has accessed the account. Shows the trust level, device fingerprint (OS, browser, location, IP), and lets the user trust an unknown device or sign out from one they don't recognize.

iPhone 15 Pro

TrustedThis device

iOS 17.4 · Safari Mobile

Location: São Paulo, BR
IP address: 200.142.18.42
First seen: Feb 19, 2026
Last active: 5m ago

Installation

npx ajaxui add device-trust

As a list

The component has no margin of its own — stack instances vertically with gap-3. Trust levels render with distinct ring colors so threats are scannable.

MacBook Pro 14

TrustedThis device

macOS 14.4 · Chrome 122

Location: São Paulo, BR
IP address: 200.142.18.42
First seen: Nov 21, 2025
Last active: 2m ago

iPhone 15 Pro

Trusted

iOS 17.4 · Safari

Location: São Paulo, BR
First seen: Feb 19, 2026
Last active: 30m ago

Windows PC

New device

Windows 11 · Edge 121

Location: Rio de Janeiro, BR · 380 km away
IP address: 189.43.220.91
First seen: 2d ago
Last active: 4h ago

Unknown Android

Suspicious

Android 14 · Chrome 122

Location: Tokyo, JP
IP address: 133.32.18.5
First seen: 6h ago
Last active: 30m ago

Compact

Hides the metadata grid. Good for dense panels or session summaries.

MacBook

Trusted

iPhone 15

Known

Old Android

Suspicious

Trust levels

type TrustLevel = "trusted" | "known" | "new" | "suspicious"

// trusted    — explicit user opt-in; bypass step-up auth
// known      — seen before, used regularly, no recent anomalies
// new        — first time signing in from this device fingerprint
// suspicious — anomaly flags (location, velocity, behavior) require attention

Props

Prop	Type	Default	Description
deviceName	string	—	User-facing device label.
deviceType	"phone" \| "tablet" \| "desktop" \| "unknown"	"unknown"	Drives the leading icon.
os	string	—	e.g. "iOS 17.4", "Windows 11".
browser	string	—	e.g. "Chrome 122", "Safari Mobile".
trust	"trusted" \| "known" \| "new" \| "suspicious"	"known"	Drives the chip + ring color.
firstSeen	Date	—	When the device first signed in.
lastActive	Date	—	Last activity timestamp.
location	string	—	Pre-formatted location.
ipAddress	string	—	Pre-formatted IP (mask in prod if needed).
current	boolean	false	Marks the device as the one being used now.
locale	string	"en-US"	Locale for relative-time formatting.
onTrust	() => void	—	Promotes the device to trusted.
onRevoke	() => void	—	Signs the device out.
compact	boolean	false	Hides the metadata grid.