<tl-login>
| HTML tag | <tl-login> |
| React | import { TlLogin } from '@ticketlayer/elements-react' |
| Category | Account |
| Runs in | web (browser DOM), native (planned React Native set) |
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.
States: enter email -> check your inbox (resend, enter code) -> signed in (email + sign out).
<tl-login></tl-login>
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' |
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>