Login & Signup Embed

When User Accounts is enabled, you don't have to hand-build a login/signup form — HelmCustomers.renderAuth() drops a fully-styled, branded login/signup box into any page of your website with one line of code. This page is for your developer.

Add it to your page

<script src="https://api.usehelm.host/api/public/customers/sdk.js" data-api-key="YOUR_PROJECT_API_KEY"></script>
<div id="helm-auth"></div>
<script>
  HelmCustomers.renderAuth('#helm-auth');
</script>

Replace YOUR_PROJECT_API_KEY with your project's API key — the same one already used for your site's content. The box renders itself: tabs to switch between Log in and Sign up, your logo and business name pulled in automatically, and a small "Powered by Helm" credit at the bottom. It calls the same register()/login() methods documented elsewhere in this section, so HelmCustomers.on('login', ...) and HelmCustomers.isLoggedIn() keep working normally once someone signs in through it.

If the visitor is already signed in — they logged in earlier and still have a valid session — the box skips straight to a signed-in state with a Log out button instead of flashing the login form first.

Email confirmation is built in

New accounts have to confirm their email address before they can log in — so nobody can sign up with someone else's address. The box handles the whole round-trip for you:

1. Someone signs up → the box shows a "Check your email to confirm your account" panel (with a Resend button) instead of logging them straight in.
2. They get a branded "Confirm your email" email and click the link, which opens back on whichever page has renderAuth on it (with a ?verifyToken= in the URL).
3. The box shows a short "Enter your password to confirm your account" step, and once they do, it confirms their email and signs them in — all in the same box.
4. If someone tries to log in before confirming, the box tells them so and offers a Resend button right there.

You don't need to build anything for this — point the confirmation email at any page with renderAuth and the box does the rest. Accounts created through the claim link (below) are already confirmed, since clicking that link proves they own the address.

Handles claiming and set-password too

The box also covers the two steps described in Bookings & Account Claiming: a "Booked with us before? Claim your account" link is built in, and if the page renderAuth is running on is opened with a ?token= in the URL (the link from the claim email), it automatically shows a set-password form instead of login/signup. You don't need a separate claim page — point the claim email link at whichever page has renderAuth on it, and the box handles both steps itself. If you'd rather build a custom claim flow instead, the underlying claim()/completeClaim() calls are still available and documented on that page.

Options

HelmCustomers.renderAuth('#helm-auth', {
  mode: 'signup',
  theme: {
    mode: 'dark',
    accent: '#e11d48',
    radius: '10px',
  },
  onAuth: function (customer) {
    console.log('Signed in:', customer);
  },
});

• mode — which tab shows first, 'login' or 'signup'. Defaults to 'login'. (Separate from theme.mode below — this one picks the starting tab, that one picks light or dark.)

• theme — matches the box to your site's look:

  • mode — 'light' (default) or 'dark'
  • accent — button and highlight colour
  • surface — card background colour
  • text — main text colour
  • muted — secondary text colour
  • border — border colour
  • radius — corner radius, e.g. '10px'
  • fontFamily — the box's font

  Leave any of these out and they fall back to clean defaults for the theme.mode you've chosen.

• onAuth — called with the customer's record right after they log in, sign up, or finish setting a password through a claim link.

• copy — override any of the box's built-in text by key, e.g. { loginButton: 'Sign me in', signupButton: 'Join now' }.

When User Accounts isn't enabled

If a project doesn't have User Accounts turned on, the box shows a quiet "Accounts aren't available here yet" message instead of a broken form — it never fails loudly. If you see this and expect the login box to work, ask us to enable User Accounts for your project.