Ken Sternberg 6df62aaa2a web: fix a few visual nits reported after the latest release (#22012)
* ## What

         window.authentik.flow = {
             "layout": "{{ flow.layout }}",
    +        "background": "{{ flow.background }}",
    +        "title": "{{ flow.title }}",
         };

Amends the `flow.html` template and `GlobalAuthentik` parser to include new parameters, `background` and `title`, in the flow-specific part of the configuration written to the HTML `<head>` object, and to provide those parameters to client code.

## Why

The `layout` is start-up critical: it tells the Flow interface how the admin wants the Flow page to look, and allows the HTML and CSS to be pre-aligned to that condition. `layout` is determined on a per-Flow bases, not a per-Stage basis; Flows are derived from a tuple of `(Brand, Application?)`, where the opening policy *may* direct a user to a different flow if the user reached authentik via a redirect from a specific application, but will otherwise fall back to the default Flow for the Brand.

The `background` is a field that is required if the `Flow`’s layout is of type `frame_background`; in this case, the part of the viewport not dedicated to the FlowExecutor is reserved for an `<iframe>` that will be filled in with whatever the administrator specifies. Although this gives it the same priority as `layout` (whether it’s provided or undefined) for describing the [chrome](https://developer.mozilla.org/en-US/docs/Glossary/Chrome) around a challenge, it is currently not provided to the application in the start-up config; it is provided in the `challenge` and renders the IFrame as part of the initial challenge.

This patch fixes that; if `layout` is provided, `background` ought to be as well, even if it’s empty. The execution of a Challenge ought not have any influence over the look and feel of the Flow-defined appearance *around* that Challenge.

I have added `title` as well; with that, all of the current theme-and-appearance related configuration details are placed into `<head>` and can be removed from the FlowExecutor.

Server-side, `background` is currently specified: `background = FileField(blank=True, default="")` which is … interesting since we also appear to store URLs in it. I don’t see anything in the FlowSerializer that would change that from a client’s point of view.

This patch furthers the effort to separate flow execution from flow presentation.

- \[🐰\] The code has been formatted (`make web`)

* The status label was using HTML booleans incorrectly. It is impossible for a boolean to be null. The default red was alarming, so I chose a neutral grey for the 'not default' state.

* It is not enough to provide a blank cell to ensure the header is spaced correctly; if the table is empty, that will collapse to zero width.  Providing the classes that go with the 'this cell may contain a toggle' provides the correct spacing as well.

* Fix inconsistent wording between menu and page; make the 'select type' radiocard and radiolist interfaces flush with the top of the form container, removing a weird jagged visual line between the menu and the content.

* Document adding 'toggle' to Table classes.
2026-05-02 18:25:23 +02:00
2026-04-27 01:08:32 +02:00
2026-04-27 01:08:32 +02:00
2026-03-31 11:33:46 +02:00
2025-09-02 21:38:53 +00:00
2026-04-27 01:08:32 +02:00
2026-04-27 01:08:32 +02:00
2025-10-24 19:01:42 +02:00

authentik logo


Join Discord GitHub Workflow Status GitHub Workflow Status GitHub Workflow Status Code Coverage Latest version

What is authentik?

authentik is an open-source Identity Provider (IdP) for modern SSO. It supports SAML, OAuth2/OIDC, LDAP, RADIUS, and more, designed for self-hosting from small labs to large production clusters.

Our enterprise offering is available for organizations to securely replace existing IdPs such as Okta, Auth0, Entra ID, and Ping Identity for robust, large-scale identity management.

Installation

  • Docker Compose: recommended for small/test setups. See the documentation.
  • Kubernetes (Helm Chart): recommended for larger setups. See the documentation and the Helm chart repository.
  • AWS CloudFormation: deploy on AWS using our official templates. See the documentation.
  • DigitalOcean Marketplace: one-click deployment via the official Marketplace app. See the app listing.

Screenshots

Light Dark

Development and contributions

See the Developer Documentation for information about setting up local build environments, testing your contributions, and our contribution process.

Security

Please see SECURITY.md.

Adoption

Using authentik? We'd love to hear your story and feature your logo. Email us at hello@goauthentik.io or open a GitHub Issue/PR!

License

MIT License CC BY-SA 4.0 authentik EE License

Languages
Python 54.4%
TypeScript 34.9%
Go 4.2%
CSS 2.2%
Rust 1.9%
Other 2.3%