React

Auth UI for React, batteries included

Drop in accessible, ready-made auth components — sign-in, user profile, dropdown, and TOTP — then restyle them to match your brand. Authdog handles the sessions so you ship UI, not boilerplate.

Start building Read the docs

Drop-in components

Account.tsx

// Account.tsx
import { UserProfile } from "@authdog/react-elements"
import "@authdog/react-elements/styles.css"
 
export function Account() {
  return <UserProfile />
}

Components, not boilerplate

Everything React apps need

Accessible UI primitives and secure session handling that drop into any React 18+ app.

Accessible by default

Ready-made sign-in buttons, a navbar, user profile and dropdown, and a TOTP validator — keyboard-navigable and screen-reader friendly out of the box.

Restyle to your brand

Components ship with sensible defaults and an exported Tailwind config, so you can theme them to match your product instead of fighting CSS.

Tiny & tree-shakeable

ESM-first with sideEffects: false and dual CJS/ESM builds. Import only the components you use and ship nothing you don't.

Secure session handling

Token validation, cookie handling, and the session lifecycle are managed for you — no token plumbing in your component tree.

Type-safe end to end

Written in TypeScript with first-class types shipped in the package. Autocomplete for props, sessions, and user data.

Drop into any React app

Works with Vite, CRA, or any React 18+ setup. No framework lock-in — just the components and hooks your app needs.

Composable building blocks

A navbar with a user menu

Compose the pieces you need — drop a UserDropdown into the Navbar and you have a complete, accessible account menu with avatar, profile link, and sign-out. No state to wire, no markup to maintain.

Layout.tsx

// Layout.tsx
import { Navbar, UserDropdown } from "@authdog/react-elements"
 
export function Layout() {
  return (
    <Navbar>
      <UserDropdown />
    </Navbar>
  )
}

Ship auth UI, not boilerplate

Authdog's React elements are accessible, themeable, and tree-shakeable — designed to disappear into your component tree.

1 import

To render a full user profile

Import UserProfile, add the stylesheet, and you have an accessible account panel — no markup to hand-build.

WCAG

Accessible components out of the box

Every element is keyboard-navigable with proper focus management and ARIA, so you ship inclusive auth UI by default.

ESM

Tree-shakeable by design

sideEffects: false and per-component exports mean your bundle only carries the pieces you actually render.

Add auth to your React app.

Install the components, add the stylesheet, and ship a polished sign-in flow today. Free to start, with secure defaults built in.

Start Building