Customer navbarThe customer navbar sits on a shop. Shop items are public. Orders stay empty until a server app holds the session.
Clone starters/react. SDK reference: React Elements. Pair this UI with Team dashboard or Orders API 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 |
| 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
npm install
npm run devOpen 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
// 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.