Authentication

Programmatic authentication

Call get_user() inside __render__ or any registered function to require login. If the user is not authenticated, the page returns 401 and the frontend shows a login prompt automatically.

from abstra.pages import register_function, get_user from lib_jinja import render_template @register_function def __render__(): return render_template("welcome.html", title="Welcome", user=get_user())

{# templates/welcome.html #} {% extends "base.html" %} {% block body %} <ab-page-header heading="Welcome, {{ user.email }}"></ab-page-header> <ab-cluster gap="2"> {% for role in user.roles %}<ab-tag>{{ role }}</ab-tag>{% else %}<ab-text type="secondary">No roles</ab-text>{% endfor %} </ab-cluster> {% endblock %}

During local development, any email and code can be used to bypass the login prompt.

The base template passes the email to <ab-app user-email>, so the header shows the signed-in user. Use Jinja (autoescaped) to put user data in the page, not an f-string.

Using authentication in functions

You can also call get_user() inside regular functions to protect specific actions:

from abstra.pages import register_function, get_user @register_function def approve_payment(payment_id: str): user = get_user() if "finance" not in user.roles: raise Exception("Only finance team can approve payments") # ... approve logic return {"status": "approved", "approved_by": user.email} @register_function def __render__(): return """ <link rel="stylesheet" href="https://design.abstra.io/v0/abstra-ds.css"> <script type="module" src="https://design.abstra.io/v0/abstra-ds.js"></script> <ab-button id="approve" variant="primary" icon="check">Approve Payment</ab-button> <script type="module"> const button = document.getElementById("approve"); button.addEventListener("click", async () => { button.loading = true; try { const result = await approve_payment("PAY-001"); abToast("Approved by " + result.approved_by); } catch (error) { abToast(await abErrorMessage(error), { tone: "danger" }); } finally { button.loading = false; } }); </script> """

Declarative access control

Pages support the same access control settings as Forms. Configure via the editor's Settings tab or abstra.json:

• Public — anyone with the URL can access
• Private — requires authentication (any logged-in user)
• Private with roles — requires the user to have at least one of the specified roles

Declarative access control is checked before the Python script runs. If the user doesn't meet the requirements, they are redirected to the login page.

Browser-side authentication (JavaScript)

Pages render without the player navbar, so login and logout are controlled from your own HTML through the window.abstra browser API:

• abstra.login() — sends the user to the login screen and returns them to the page after they authenticate.
• abstra.logout() — clears the session (including OIDC sign-out) and reloads the page in a logged-out state.
• abstra.logged() — returns true when a user is logged in (synchronous), useful to toggle UI.

The design system's ab-app already uses this API: with user-email set it shows the user and a sign-out button (abstra.logout()), and with an empty user-email it shows "Entrar" (abstra.login()). Add no-auth on public pages to hide it. Call the API yourself only for other controls:

from abstra.pages import register_function @register_function def __render__(): return """ <link rel="stylesheet" href="https://design.abstra.io/v0/abstra-ds.css"> <script type="module" src="https://design.abstra.io/v0/abstra-ds.js"></script> <ab-button id="auth"></ab-button> <script type="module"> const button = document.getElementById("auth"); const logged = abstra.logged(); button.textContent = logged ? "Sign out" : "Sign in"; button.icon = logged ? "sign-out" : "sign-in"; button.addEventListener("click", () => (logged ? abstra.logout() : abstra.login())); </script> """

Player layout

Forms render inside the player layout with navbar, sidebar, and branding. Pages do not — a page renders only its own HTML inside an isolated iframe, with no navbar or sidebar. Use <ab-app> from the Abstra Design System as the page shell (header, navigation and the signed-in user), or the window.abstra API above for your own controls.