We're actively working on improving our documentation. Some sections may be incomplete or missing details. We'll be expanding and refining everything over time.
LoginForm
<allegro-login-form> is a web component that authenticates readers via a magic
login link sent to their email, a six-digit one-time code, or via Google, Apple,
or Facebook OAuth. The email-based method is chosen with the
login-method attribute — magic link by default. On mobile the
email input and button stack vertically; on wider screens (≥40em) they sit
inline.
Set login-method="magic-link-otp" to send a single email containing both a
magic link and a six-digit code. The form has one submit button, just like the
single-method layouts; submitting it emails the reader both options and shows
the code-entry screen. Clicking the link in the email authenticates directly
(the form polls for that in the background), or the reader can type the code
instead — whichever they do first signs them in.
The component moves through several states as the chosen sign-in flow advances.
link-sent appears for the magic-link method, and code-entry for the
one-time-code method (login-method="otp") and for the combined
login-method="magic-link-otp" method — submitting the combined form always
sends the single email and moves straight to code-entry, since the reader can
either type the code there or click the link in the email. The expired state
adapts its wording to match whichever method was last used.
State
Trigger
Description
email
Initial render (unauthenticated, no token in URL)
Email input + social login buttons.
loading
Initial render when allegro_token is present in the URL
Rendered above the email input. Use for a title or description. Hidden once the form transitions to another state.
footer
email
Rendered below the email input (and social buttons when present). Use for supplementary links. Hidden once the form transitions to another state.
after-form
email
Rendered between the email input and the social login buttons. Use for supplementary inputs such as newsletter opt-in checkboxes. Values from named inputs inside this slot are included in the magic link request data.
success
success
Replaces the entire success state UI (icon, heading, body, and continue button). When omitted, the default success UI is shown as fallback content.
after-continue
success
Rendered directly below the continue button in the default success UI. Ignored when the success slot is provided.
<allegro-login-formpublisher-name="Example News">
<divslot="header">
<h2>Sign in to continue</h2>
<p>Access your account below.</p>
</div>
<pslot="footer">
<ahref="/register">Don't have an account? Sign up</a>
The component records the following analytics events via the Allegro SDK.
Event
When
Data
magic_link_requested
A magic link is requested — on the initial submit, or when resent from the link-sent state.
{ created: boolean }
otp_requested
A one-time code is requested — on the initial submit, or when resent from a code-entry state.
{ created: boolean }
otp_validated
A submitted one-time code is accepted and the device is authenticated.
(none)
login
Authentication completes through a social / SSO provider.
{ provider: string }
created is true when a new audience member was created for the email
address, and false when an existing member was matched.
note
Magic link validation is tracked separately as magic_link_validated by the
SDK when the link is opened, since that happens on the page the link points to
rather than within the form.
Base unit all internal sizing is derived from. Defaults to the document's rem. See the note below.
--loginForm--color
black
Base text colour for the component.
--loginForm--font-family
system-ui, sans-serif
Font family applied to the entire component.
Sizing on pages with a non-16px root
Internally the form scales every dimension — padding, font sizes, spacing — from
--loginForm--base-font-size, which defaults to the page's rem. If the host
page sets a root font-size other than the usual 16px (for example a 10px
root), the form renders too small or too large. Pin the base to a fixed value so
the form sizes consistently regardless of the host page: