The admin console lists workspace teams on `/directory` after hosted sign-in. The home page stays open.

Clone [starters/angular](https://github.com/authdog/samples/tree/main/starters/angular). SDK reference: [Angular](/docs/frameworks/angular).

The guard is UX. A client route guard can be bypassed in the browser. Enforce access on the server with a [backend SDK](/docs/backend), then apply [authorization](/docs/concepts/authorization).

## What you need

| Requirement | Detail |
| --- | --- |
| Public key | `pk_...` from the [console](https://console.authdog.com) |
| Environment | Angular has no built-in `.env` in this example. Set the key in `src/environments/environment.ts` as `authdogPublicKey`, or inject it at build time. Never commit a real key |
| Secret key | Never put `sk_...` in the app |
| Return URL | Account portal back to this app. Local: `http://localhost:4200` |

## Run

```bash
npm install
npm start
```

Open http://localhost:4200. Click **Sign in**, finish the hosted Account portal, then open **Directory**. You should see Platform (Owner, Active) and Support (Agent, Invited).

## Provider, guard, and directory

`isAuthenticated()` stays false until `fetchUser()` returns a user. Call `fetchUser()` on init. The interceptor attaches the bearer to HTTP calls. Scope it, or strip the header for origins that are not Authdog.

```ts
// src/app/app.config.ts
import type { ApplicationConfig } from "@angular/core"
import { provideHttpClient, withInterceptors } from "@angular/common/http"
import { provideRouter } from "@angular/router"
import { provideAuthdog, authdogInterceptor } from "@authdog/angular"
import { routes } from "./app.routes"
import { environment } from "../environments/environment"

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(withInterceptors([authdogInterceptor])),
    provideAuthdog({
      publicKey: environment.authdogPublicKey,
      loginPath: "/",
    }),
  ],
}
```

```ts
// src/app/app.routes.ts
import type { Routes } from "@angular/router"
import { authdogGuard } from "@authdog/angular"
import { HomeComponent } from "./home.component"
import { ProfileComponent } from "./profile.component"

export const routes: Routes = [
  { path: "", component: HomeComponent },
  { path: "directory", component: ProfileComponent, canActivate: [authdogGuard] },
]
```

`ProfileComponent` calls `auth.fetchUser()` in `ngOnInit`, then renders the team list: Platform and Support.