Own account panel

Replace the built-in user badge with a burger side panel owned by the application.

This example keeps Gate One’s frontend guard but removes the built-in user badge. The application provides a burger button and a side panel, then reads the session from Gate One.

Files

Route

{
  "authProvider": {
    "type": "dev",
    "loginBaseUrl": "http://login.demo.localhost:3000",
    "cookieDomain": "demo.localhost"
  },
  "routes": [{
    "host": "app.demo.localhost",
    "path": "/*",
    "frontend": true,
    "backend": "http://127.0.0.1:8080",
    "auth": {}
  }]
}

There is no userBadge key. frontend: true keeps the guard, the login flow and window.__cladoneAuth available.

Read the session

await window.__cladoneAuth.refresh({ quiet: true });
const session = await window.__cladoneAuth.session();

const name = session.claims.preferred_username
  || session.claims.email
  || "Account";
const roles = session.roles;
const scopes = session.scopes;

refresh() forces the probe because this route has neither a badge nor data-gtw-* markup. session() alone would wait for a probe that the guard never starts.

The direct probe is equivalent:

const res = await fetch("/__gate-one/auth", {
  cache: "no-store",
  credentials: "same-origin",
});
const session = res.ok ? await res.json() : null;

Run it

The packaged demo serves the panel page and starts Gate One (no Docker):

cd gate-one-src/deploy/local/account-panel
BIN_DIR=~/gate-one-bin ./run.sh

The script prints the URLs and stops with ./run.sh down. See [deploy/local/account-panel](https://github.com/clad-one/gate-one/tree/main/deploy/local/account-panel) for the stack and its README.

To run it by hand instead:

# terminal 1: the application
cd examples/account-panel
python3 -m http.server 8080

# terminal 2: Gate One
gate-one -check -config examples/account-panel/routes.json
gate-one -config examples/account-panel/routes.json

Open http://app.demo.localhost:3000/ and sign in with the development provider’s default users:

UserPassword

alice

alice

bob

bob

Open the burger panel: it shows the username, email, roles and scopes. The top-edge Gate One badge is absent. Sign out calls window.__cladoneAuth.logout().

What to observe

  • the route still redirects anonymous visitors to the login page;

  • the panel is rendered by the application, not by Gate One;

  • roles and scopes come from the same session the route policy uses;

  • after logout, the panel offers Sign in and the application stays usable.

Important

  • The probe is display-only; server-side auth.identity remains the authorization boundary.

  • Account/services links and licence details are badge-specific and are not part of the probe. Define the links in your application.

  • A full-page reload after login is not required; login() resolves once the gateway session is active.

See also