Better Auth UI

The <SessionsCard /> component provides users with an intuitive interface for viewing and managing their active authentication sessions. Users can easily revoke active sessions, enhancing security by maintaining control over their account access across multiple devices and browsers.

Usage

Include the <SessionsCard /> component within your account settings page or security settings page:

import { SessionsCard } from "@daveyplate/better-auth-ui"
 
export default function SettingsPage() {
    return (
        <div className="flex flex-col gap-6">
            <SessionsCard />
        </div>
    )
}

Reference

Below are the available props for customizing <SessionsCard />:

Prop	Type	Default
`className?`	`string`	-
`classNames?`	`SettingsCardClassNames`	-
`isPending?`	`boolean`	-
`localization?`	`Partial<Partial<{ account: string; accounts: string; accountsDescription: string; accountsInstructions: string; addAccount: string; addPasskey: string; alreadyHaveAnAccount: string; avatar: string; ... 132 more ...; passwordTooShort: string; }>>`	-
`sessions?`	`Session[] \| null`	-
`skipHook?`	`boolean`	-
`refetch?`	`(() => Promise<void>)`	-

Styling

You can customize the appearance of <SessionsCard /> using Tailwind CSS classes provided via the classNames prop:

<SessionsCard
    classNames={{
        base: "border-blue-500",
        header: "bg-blue-50",
        title: "text-xl text-blue-600",
        description: "text-muted-foreground",
        content: "bg-background space-y-3",
        footer: "bg-blue-300",
        button: "bg-blue-600 hover:bg-blue-700 text-white"
    }}
/>

Localization

The text within <SessionsCard /> can be customized through the localization prop, allowing you to adapt it to different languages or contexts:

<SessionsCard
    localization={{
        sessions: "Active Devices",
        sessionsDescription: "Review and revoke access from active devices and sessions.",
        currentSession: "This Device",
        revoke: "Remove Access"
    }}
/>

<SessionsCard />

Usage

Reference

Styling

Localization

On this page