Authdog
Console

React Elements quickstart

Last updated Sep 10, 2026npmlatestCI passing
View as Markdown

Outcome: a React app whose navbar opens Authdog hosted sign-in for the selected environment. About five minutes.

@authdog/react-elements is UI only. It does not mint a session or protect a server route. For cookies and a gated page, use the Next.js quickstart after this.

  1. Prerequisites: React 18 or 19, and an Authdog account.

1. Create an environment and copy the IDs

In the console:

  1. Create a tenant, a project, and an environment.
  2. Open Dashboard (/dashboard/home).
  3. Copy Public key (pk_...) and Environment ID.
  4. Copy the identity host from the environment picker (the origin of hosted sign-in).

The public key is publishable. Do not put an adenv_ API secret in the browser. Details: Environments.

2. Install the kit

npm install @authdog/react-elements

3. Set the env vars

VITE_AUTHDOG_IDENTITY_HOST=https://your-identity-host
VITE_AUTHDOG_ENVIRONMENT_ID=<environment-id>

Use the identity host and environment ID from step 1. Vite is shown here; CRA and other bundlers use their own REACT_APP_ / PUBLIC_ prefix.

4. Import the stylesheet

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

Import it once at the app root.

5. Render the navbar

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

export function AppNavbar() {
  return (
    <Navbar
      logoText="ACME Corp"
      items={[{ title: "Dashboard", href: "/dashboard" }]}
      user={undefined}
      isLoading={false}
      identityHost={import.meta.env.VITE_AUTHDOG_IDENTITY_HOST}
      environmentId={import.meta.env.VITE_AUTHDOG_ENVIRONMENT_ID}
      onNavItemClick={(href) => {
        window.location.href = href
      }}
      onProfileSelected={() => {
        window.location.href = "/profile"
      }}
      onLogout={() => undefined}
    />
  )
}

With no user, Navbar opens hosted sign-in using identityHost and environmentId.

6. Verify

Click the sign-in control. You should land on the Authdog hosted flow for that environment.

If it fails:

  • Wrong host — identityHost must be the identity origin for this environment, not console.authdog.com.
  • Wrong environment — environmentId must match the environment whose public key you copied.
  • No session in your app after return — expected. Elements do not store a session. Continue with Next.js or a backend SDK.

Next