Olympus Docs
CookbookUI & content

Brand the consent screen

Customize Hera's OAuth2 consent UI

When an OAuth2 client requests user consent, Hera renders a consent screen showing the requesting app and the requested scopes. The default styling is generic; you'll usually want it branded.

hera/src/app/consent/page.tsx is the Next.js page rendered when Hera receives a consent_challenge.

It typically shows:

  • The requesting client's name (from Hydra's consent request context).
  • The list of scopes being requested.
  • "Accept" / "Decline" buttons.
  • "Remember my choice" checkbox.

Forking Hera

Olympus's customization model: fork Hera, edit, build, deploy your fork's image.

cd hera
# Edit hera/src/app/consent/page.tsx
bun build
podman build -t ghcr.io/your-org/hera:custom .
podman push ghcr.io/your-org/hera:custom
# Update compose.prod.yml to reference your image; redeploy.

What you can customize

  • Logo, colors, font.
  • Wording (e.g. "Authorize" instead of "Accept").
  • Per-scope explanations (a tooltip explaining what read:widgets allows).
  • Skip-consent flag honoring (see below).

Per-client styling

If you want different branding per OAuth2 client (e.g. "Athena CIAM" looks different from a third-party app):

  1. Read the client's metadata field from the consent request.
  2. Set up per-client branding (logo URL, color) in the metadata when creating the client.
  3. Render conditionally.
hydra update client <id> --endpoint http://localhost:3103 \
  --metadata '{"branding": {"logo": "https://...", "primary_color": "#abc123"}}'

Olympus's Hera supports metadata.skip_consent. When true, the consent step auto-accepts without rendering. Use only for first-party apps where consent is implicit:

hydra update client athena-iam --endpoint http://localhost:4103 \
  --metadata '{"skip_consent": true}'

Athena and Site clients in Olympus are auto-configured with skip_consent: true during the Daedalus Applications wizard step.

Showing "remember" sensibly

By default, "Remember my choice" is checked but the user can uncheck. If users uncheck, the next login re-prompts.

For first-party clients, you generally want to auto-remember without an option to opt out. Hide the checkbox in your fork:

{!isFirstParty && (
  <Checkbox name="remember">Remember my choice</Checkbox>
)}

On this page