> ## Documentation Index
> Fetch the complete documentation index at: https://docs.firmhouse.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Login template components

> Reference for Liquid components available on Customer Portal login screens.

## Page context

The `login` object describes the current step of the passwordless login flow.

| Property          | Available when | Description                                         |
| ----------------- | -------------- | --------------------------------------------------- |
| `login.state`     | Always         | Either `form` or `email_sent`                       |
| `login.login_url` | `form`         | Server-owned endpoint for the login form            |
| `login.email`     | Both states    | Email address entered by the customer, when present |
| `login.retry_url` | `email_sent`   | URL for returning to the login form                 |

## `{% login_form %}`

Renders the passwordless email login form. The server owns the form endpoint, CSRF token, email field, and submit behavior. Use the optional parameters to change its presentation, submit label, and hint without changing the authentication contract.

Used in: Login

| Parameter        | Type   | Default                                                      |
| ---------------- | ------ | ------------------------------------------------------------ |
| `form_classes`   | String | No classes                                                   |
| `label_classes`  | String | Default form label classes                                   |
| `input_classes`  | String | Default email input classes                                  |
| `button_classes` | String | Default primary button classes                               |
| `submit_label`   | String | Translated "Sign in with E-mail" label                       |
| `hint`           | String | Translated login hint. Pass an empty string to hide the hint |
| `hint_classes`   | String | Default form hint classes                                    |

```liquid theme={null}
{% login_form
  form_classes: "flex flex-col gap-6"
  input_classes: "w-full rounded-xl border border-gray-300 px-4 py-3"
  button_classes: "w-full rounded-xl bg-black px-4 py-3 text-white"
  submit_label: "Email me a login link"
  hint: "We'll email you a secure login link."
%}
```

```html theme={null}
<form action="/self-service/login" method="post">
  <input type="hidden" name="authenticity_token">
  <label for="email">Email</label>
  <input id="email" type="email" name="email">
  <input type="submit" value="Sign in with E-mail">
</form>
```