# username.html

The username.html page is responsible for allowing your customers login to your store.

### Root Object

| Variables | Type    | Description                                                                                                                                                                                                                 |
| --------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| external  | Boolean | If the login provider of the store requires the user to be sent to an external url which is available in the `url` variable. See [Non-External Login](#non-external-login) for what to do in the event external is `false`. |
| provider  | String  | The name of the login provider, such as FiveM, Discord or Steam.                                                                                                                                                            |
| url       | String  | The URL that the customer should be directed to so they can perform their login with the external provider.                                                                                                                 |

### External Login

If the external variable is `true`, let the user click a link to proceed to login via the external login provider:

```html
<p>Please login with your {{ provider }} account to continue.</p>
<a href="{{ url }}">Login</a>
```

### Non-External Login

If the external variable is `false`,  provide a form submitting to the current url, including an `ign` form parameter. The `ign` parameter should be a text field allowing the customer to enter their username freehand.

An example can be seen below:

```html
<form method="post">
    <input type="text" name="ign" placeholder="Enter your in-game username" />
    <button type="submit">Login</button>
</form>
```

### Full Working Example

An example of a flow supporting both external and non-external login providers is shown below:

```twig
{% if external %}
    <a href="{{ url }}">Login via {{ provider }}</a>
{% else %}
    <form method="post">
        <input
            type="text"
            name="ign"
            placeholder="Enter your in-game username"
        />
        <button type="submit">Login</button>
    </form>
{% endif %}
```

### Request Variable

If you'd like access to a variable that is not currently available, [please let us know.](https://forms.monday.com/forms/8cbacdac7c30b725cd4617cbba0e5eeb?r=use1)