Authdog
Console

Admin console

Last updated Oct 7, 2026
View as Markdown

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

Clone starters/angular. SDK reference: Angular.

The guard is UX. A client route guard can be bypassed in the browser. Enforce access on the server with a backend SDK, then apply authorization.

What you need

Requirement Detail
Public key pk_... from the console
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

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.

// 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: "/",
    }),
  ],
}
// 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.