<authui-show>
Render children only while the authentication status matches.
<authui-show when="signed-out">
<authui-button>Sign in</authui-button>
</authui-show>
<authui-show when="signed-in">
<a href="/dashboard">Dashboard</a>
<authui-user-button></authui-user-button>
</authui-show>Attributes
| Name | Type | Description |
|---|---|---|
when | status list | Show children while the status is one of these. |
unless | status list | Hide children while the status is one of these. |
Both accept a single value or a comma separated list. Valid values:
| Value | Meaning |
|---|---|
signed-in | A user is signed in and, if MFA is on, fully verified. |
signed-out | No session. |
mfa-required | A session exists but a second factor is still needed. |
loading | The initial account.get() has not resolved yet. |
Examples
<!-- Anyone without a complete session, including users mid-MFA -->
<authui-show unless="signed-in">…</authui-show>
<!-- Same thing, spelled out -->
<authui-show when="signed-out, mfa-required">…</authui-show>
<!-- A skeleton while the first request is in flight -->
<authui-show when="loading">Loading…</authui-show>when and unless can be combined; children render only when both agree.
Behaviour
- Children stay hidden until the initial status is known. Only
when="loading"renders during that window. - The in-module FOUC guard uses a constructable stylesheet (
document.adoptedStyleSheets) so it still works under CSPstyle-src 'self'. It cannot run until the script loads. - CDN / script-tag users: load the shipped FOUC stylesheet in
<head>before the Auth UI script so protected content stays hidden before the module executes (same rules asCRITICAL_FOUC_CSS):
<link rel="stylesheet" href="https://unpkg.com/@getauthui/core@0.1.45/dist/fouc.css" />With a bundler: import "@getauthui/core/fouc.css". The JS string exports FOUC_CSS / CRITICAL_FOUC_CSS and the in-module auto-inject remain for ESM; prefer the CSS file for script-tag installs.
Prefer the [ready] attribute selector (not :defined) so the same rule works in React, where custom elements can be defined before Auth UI sets ready.
signed-outis exact. A user who signed in with a password but still has an MFA challenge pending ismfa-required, notsigned-out. Useunless="signed-in"when you mean "anyone who is not fully in".- The element renders with
display: contents, so it does not affect layout. - Hiding is a convenience for UI, not a security boundary. Data access is enforced by Appwrite permissions.
Property
visible returns the current boolean result, handy in tests or when reading the element from script.