The customer navbar sits on a shop. Shop items are public. Orders stay empty until a server app holds the session.

Clone [starters/react](https://github.com/authdog/samples/tree/main/starters/react). SDK reference: [React Elements](/docs/frameworks/react). Pair this UI with [Team dashboard](/docs/examples/nextjs) or [Orders API](/docs/examples/express) for the session gate.

`@authdog/react-elements` does not mint a session, store a cookie, or check a permission.

## What you need

| Requirement | Detail |
| --- | --- |
| Identity | Identity host and environment id from the [console](https://console.authdog.com) |
| Environment | Copy `.env.example` to `.env` and set `VITE_AUTHDOG_IDENTITY_HOST` and `VITE_AUTHDOG_ENVIRONMENT_ID`. `VITE_AUTHDOG_IDENTITY_HOST` is the identity origin, not `console.authdog.com` |
| Secret key | Never put `sk_...` in the app |

## Run

```bash
npm install
npm run dev
```

Open the URL Vite prints. **Shop** lists Field kit ($48) and Spare sensor ($19). **Sign in** opens the hosted flow for that environment. After return, this app still has no session, so **Orders** does not list anything. That is expected.

## Shop and navbar

```tsx
// src/App.tsx
import { Navbar } from "@authdog/react-elements"

const identityHost = import.meta.env.VITE_AUTHDOG_IDENTITY_HOST
const environmentId = import.meta.env.VITE_AUTHDOG_ENVIRONMENT_ID

const PRODUCTS = [
  { name: "Field kit", price: "$48" },
  { name: "Spare sensor", price: "$19" },
]

export function App() {
  return (
    <>
      <Navbar
        logoText="Northwind"
        items={[
          { title: "Shop", href: "#shop" },
          { title: "Orders", href: "#orders" },
        ]}
        user={undefined}
        isLoading={false}
        identityHost={identityHost}
        environmentId={environmentId}
        onNavItemClick={(href) => {
          window.location.href = href
        }}
        onLogout={() => undefined}
      />
      <ul>
        {PRODUCTS.map((product) => (
          <li key={product.name}>
            {product.name} · {product.price}
          </li>
        ))}
      </ul>
    </>
  )
}
```

Do not check permissions in the client. Continue in a server example before any authorization decision.