React

@authdog/react-elements is the drop-in UI kit for React 18+ apps: a navbar, user profile, dropdown, and a TOTP validator that render your Authdog identity without you building the components. It pairs with a framework SDK — Next.js, Remix, Gatsby, or RedwoodJS — that resolves the session.

Install

npm install @authdog/react-elements

Peer deps are React 18 or 19. Import the stylesheet once at your app root:

import "@authdog/react-elements/styles.css"

Components

• Navbar — app navigation with a user menu; requires identityHost and environmentId (both read from your pk_... key's payload)
• UserProfile — renders the signed-in user's profile; loading is required
• UserDropdown — the account menu on its own
• Button, ClientOnly (SSR guard), PlaceholderAlert
• TOTPValidator — { onValidate: (code: string) => Promise<void> } for MFA prompts

Usage

Feed the components the user and identity payload your framework SDK already resolved:

import {
  Navbar,
  UserProfile,
  PlaceholderAlert,
} from "@authdog/react-elements"

<Navbar
  logoText="ACME Corp"
  items={[]}
  isLoading={isLoading}
  user={user}
  environmentId={payload.environmentId}
  identityHost={payload.identityHost}
  onProfileSelected={() => router.push("/profile")}
  onLogout={() => {
    clearAuthdogSession()
    location.reload()
  }}
/>

The kit is presentational only — it renders identity, it doesn't enforce it. Resolve and guard sessions with your framework SDK and a backend SDK.

Next steps

• Component reference — every component and prop in depth.
• Next.js — the most common pairing for these elements.
• Account portal — the zero-config hosted alternative to building your own UI.