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](/docs/quickstarts?sdk=nextjs) after this.

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

## 1. Create an environment and copy the IDs

In the [console](https://console.authdog.com):

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](/docs/console/environments).

## 2. Install the kit

```package-install
@authdog/react-elements
```

## 3. Set the env vars

```bash
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

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

Import it once at the app root.

## 5. Render the navbar

```tsx
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](/docs/quickstarts?sdk=nextjs) or a [backend SDK](/docs/backend).

## Next

- [React Elements guide](/docs/frameworks/react): every component and prop.
- [Account portal](/docs/account-portal): hosted profile and session UI.
- [Next.js quickstart](/docs/quickstarts?sdk=nextjs): cookies and a protected route.