Authdog

React

Auth UI for React, batteries included

Drop in accessible, ready-made auth components for 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 buildingRead the docs
npmlatestCI passing
One import for a profile
Import UserProfile, add the stylesheet, and you have an accessible account panel with no markup to hand-build.
Accessible out of the box
Every element is keyboard-navigable with proper focus management and ARIA, so you ship inclusive auth UI by default.
Tree-shakeable by design
sideEffects: false and per-component exports mean your bundle only carries the pieces you actually render.
Any React 18+ setup
Works with Vite, CRA, or your own build. No framework lock-in and no provider gymnastics.

Drop-in components

// Account.tsx
import { UserProfile } from "@authdog/react-elements"
import "@authdog/react-elements/styles.css"

export function Account() {
  return <UserProfile />
}

A navbar with a user menu

// Layout.tsx
import { Navbar, UserDropdown } from "@authdog/react-elements"

export function Layout() {
  return (
    <Navbar>
      <UserDropdown />
    </Navbar>
  )
}

Components, not boilerplate

Everything React apps need

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

01

Accessible by default

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

  • Keyboard navigable
  • Screen-reader friendly
02

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.

  • Exported Tailwind config
  • Sensible defaults
03

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.

  • ESM-first
  • Dual CJS/ESM builds
04

Secure session handling

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

  • Managed session lifecycle
  • No token plumbing
05

Type-safe end to end

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

  • Types shipped in the package
  • Autocomplete for props
06

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.

  • Vite, CRA, or your own build
  • Components and hooks
01

Install

Add @authdog/react-elements and its stylesheet.

02

Compose

Render the sign-in, profile, and dropdown pieces you need.

03

Theme

Apply the exported Tailwind config to match your brand.

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