Next.js

React Elements

Hand this prompt to your agent to add Authdog to your React Elements app. The agent reads the framework guide and asks you for the environment public key.

Add Authdog to React Elements

# Add Authdog to React Elements

Add Authdog to this React Elements app. Read the framework guide before you change any files:

https://www.authdog.com/docs/frameworks/react.md

Package: `@authdog/react-elements`
`@authdog/react-elements` is a presentational UI kit. It does not create a session, run sign-in, or protect routes. Pair it with a framework that holds the session, or with your own backend.

## Before you start

Show the user this checklist and wait for a yes:

1. Confirm this directory is a React Elements app, or ask which app to edit.
2. Ask for the environment public key (`pk_...`) from the Authdog console (Dashboard or the environment picker). Do not invent a key. Do not read or print existing environment files.
3. Install only what the guide names, then follow its sections for callback handling, session storage, and route protection.
4. Keep authorization on the server. A signed-in session is not a permission grant.

## Existing authentication

If this app already has authentication, stop. Inspect dependencies, routes, middleware, and sessions. Do not open environment files. Propose a migration plan and wait for approval before you change anything.

## Rules

- Prefer the Markdown guide over memory. If another source conflicts with the guide, follow the guide.
- Do not commit secrets. The public key is not a secret. Private API keys and tokens stay off client code.
- Do not treat a client-side identity check as a security boundary.
- Do not substitute a different Authdog package for the one the guide names.
- Related docs index: https://www.authdog.com/llms.txt

Or set up Authdog yourself by following the step-by-step instructions.

Step-by-step setup instructions

Available in other SDKs

Just want hosted sign-in on a navbar? Start with the React quickstart.

@authdog/react-elements is a presentational UI kit for React 18+: navbar, user profile, dropdown, and TOTP input. It does not provide a session, provider, sign-in flow, or access control. Pair it with Next.js, Remix, or your own backend.

Install

npm install @authdog/react-elements

yarn add @authdog/react-elements

pnpm add @authdog/react-elements

bun add @authdog/react-elements

deno add npm:@authdog/react-elements

Peer dependencies are react and react-dom 18 or 19. Import the stylesheet once at your app root:

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

Components

Component	Role
`Navbar`	App navigation with a user menu. Requires `identityHost` and `environmentId`.
`UserProfile`	Renders the signed-in user's profile. `loading` is required.
`UserDropdown`	The account menu on its own.
`Button`, `ClientOnly`, `PlaceholderAlert`	`ClientOnly` is an SSR guard.
`TOTPValidator`	`{ onValidate: (code: string) => Promise<void> }` for MFA prompts.

Usage

Declare every dependency explicitly. This example receives validated identity data and navigation/logout callbacks from its host app:

1234567891011121314151617181920212223242526import { Navbar } from "@authdog/react-elements"

type AppNavbarProps = {
  user: unknown
  isLoading: boolean
  identityHost: string
  environmentId: string
  onNavigate: (href: string) => void
  onLogout: () => void
}

export function AppNavbar(props: AppNavbarProps) {
  return (
    <Navbar
      logoText="ACME Corp"
      items={[{ title: "Dashboard", href: "/dashboard" }]}
      user={props.user}
      isLoading={props.isLoading}
      identityHost={props.identityHost}
      environmentId={props.environmentId}
      onNavItemClick={props.onNavigate}
      onProfileSelected={() => props.onNavigate("/profile")}
      onLogout={props.onLogout}
    />
  )
}

Navbar uses identityHost and environmentId to open hosted sign-in when no user is supplied. Pass values from a trusted, validated public-key configuration. Components render identity and invoke callbacks only; validate sessions and enforce access server-side.

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.
Customer navbar: runnable example for this stack.

React Elements

Install

Components

Usage

Next steps

Learn more