ReferenceWidgets
Login widget
Drop-in sign-in surface for products that use Hatched's managed auth.
Most customers have their own auth. For those that want Hatched to manage user identity — typically side projects, demos, or standalone Hatched apps — the login widget provides a pre-styled sign-in surface.
Mount
<div
data-hatched-widget="login"
data-hatched-customer-id="cus_01…"
data-hatched-redirect="https://yourapp.com/after-login"
></div>This widget does not take a
data-hatched-token— authentication is the purpose of the widget.
Attributes
| Attribute | Values | Default |
|---|---|---|
data-hatched-customer-id | cus_* | required |
data-hatched-redirect | URL | required |
data-hatched-methods | comma list: email, google, apple | email,google |
data-hatched-appearance | modal inline | inline |
On success
The widget redirects the browser to the data-hatched-redirect URL with a
one-time ?ticket=… query param. Exchange the ticket server-side for a
session:
const session = await hatched.auth.exchangeTicket({ ticket, customerId });
// session.userId, session.token, session.expiresAtWhen not to use
If you already run your own auth (Clerk, Auth0, custom JWT), use widget session tokens instead — they're minted from your own authenticated backend without forcing users through a second login flow.