<tl-login>
Magic-link sign-in: an email in, a link or a six-digit code back, and a session.
| HTML tag | <tl-login> |
| React | import { TlLogin } from '@ticketlayer/elements-react' |
| Category | Account |
| Runs in | web (browser DOM), native (planned React Native set) |
Magic-link sign-in: an email in, a link or a six-digit code back, and a session. No password is ever handled.
tl-login - magic-link sign-in. The customer enters an email, we ask the SDK
to send a link (POST /sales/customer-auth/magic-link), then either the link
lands back on this page with ?code= or the customer types the code from
the email; both exchange through the SDK (POST /sales/customer-tokens). No
password is ever handled here. The link's code is a long token and is sent
on its own; a typed 6-digit code is sent with the email it went to, because
the API refuses a short code without its contact.
States: enter email -> check your inbox (resend, enter code) -> signed in (email + sign out).
<tl-login></tl-login>What signing in and out does to the cart#
Signing in keeps the buyer's cart. When the exchange succeeds, Live
attaches the session's open cart to the customer and re-evaluates every line
for them, so member prices open without starting again. The client takes the
re-evaluated cart and cart:updated carries it; a line the customer can no
longer buy is reported (cartLines, with its reason) and left in the cart for
them to remove, never silently dropped. If the customer already had another
open cart, the one they were just building is kept and the other expires on
its own; nothing is merged.
Signing out empties the cart, on purpose. "Sign out" drops the cart and releases the tickets it was holding straight away. On a shared device a cart left behind would still carry the signed-in customer's identity and any member prices they had unlocked, so the element never leaves one for the next person. A buyer who signs out mid-purchase starts a new cart.
Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
allowCodeEntry | allow-code-entry | Offer a "enter the code" path alongside the emailed link (default true). | boolean | true |
heading | heading | Heading for the email step. | string | 'Sign in' |
unstyled | unstyled | Render into the light DOM with no stylesheet, for a page that styles the element itself: every node carries a tl-login__* class. Without it the element is styled, and each node is a ::part() of the same name. | boolean | false |
Events#
| Event | Description | Type |
|---|---|---|
tlAuthChanged | CustomEvent<TlAuthChanged> | |
tlError | CustomEvent<{ message: string; }> | |
tlMagicLinkSent | CustomEvent<{ email: string; }> |
Events are CustomEvents; the payload is on event.detail. In HTML, listen with element.addEventListener('tlXxx', handler); in React the wrapper exposes each one as an onTlXxx prop.
Related elements#
Used by: <tl-my-orders>