# salla-login-modal (https://docs.salla.dev/twilight/react/web-components/salla-login-modal)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

Login and registration modal. It loads Salla's hosted login page in an iframe inside a `salla-modal` and handles the
result (token, cart sync, page reload). Add it once to the page layout; guests open it by dispatching the `login::open`
event. It renders nothing when the customer is already logged in. It is not shown at all when both `is-email-allowed`
and `is-mobile-allowed` are false (a warning is logged instead).

Events: it fires a bubbling DOM event `salla-login:closed` on the element when the modal closes, and emits the
`salla-login::ready`, `salla-login::closing` and `salla-login::closed` events through `salla.event`.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-login-modal>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaLoginModal } from '@salla.sa/twilight-components-react/login-modal';
```

**Client-only.** On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

## Example [#example]

```tsx
import { SallaLoginModal } from '@salla.sa/twilight-components-react/login-modal';

export function Example() {
  return (
    <SallaLoginModal isEmailAllowed isMobileAllowed />
  );
}
```

```html
<salla-login-modal is-email-allowed is-mobile-allowed></salla-login-modal>
```

````ts
Open it from a button
```js
salla.event.dispatch('login::open', { source: 'header', withoutReload: false });
````

```

## Properties

| Property | Attribute | Description | Type | Default |
| --- | --- | --- | --- | --- |
| `api` | `api` | The store API base URL sent to the login page. Filled from the store config when the page is ready. | `string` |  |
| `headers` | `headers` | Extra headers the login page should send with its API requests. Accepts an object of header name to value, or a JSON string of such an object (for example `'{"X-Custom":"1"}'`). An invalid JSON string is ignored. | `string \| { [key: string]: string; }` |  |
| `inline` | `inline` | Renders the login iframe directly in the page instead of inside a modal. | `boolean` |  |
| `isEmailAllowed` | `is-email-allowed` | Whether login with email is allowed. At least one of `isEmailAllowed` and `isMobileAllowed` must be true for the modal to open. | `boolean` |  |
| `isEmailRequired` | `is-email-required` | Whether registration requires both an email and a mobile number. **Deprecated:** Not read by the component or sent to the login page, so it has no effect. It will be removed in the next major version. | `boolean` | `false` |
| `isMobileAllowed` | `is-mobile-allowed` | Whether login with mobile number is allowed. Defaults to `true`. At least one of `isEmailAllowed` and `isMobileAllowed` must be true for the modal to open. | `boolean` | `true` |
| `storeId` | `store-id` | The store ID sent to the login page. Filled from the store config when the page is ready. | `number \| string` |  |
| `supportWebAuth` | `support-web-auth` | When true, a successful verification also signs the customer in on the storefront web pages (passed to the auth handler after login). Defaults to `true`. | `boolean` | `true` |
| `withoutReload` | `without-reload` | When true, the page is not reloaded after a successful login. Defaults to `false`, which reloads the page. A `withoutReload` value passed to the `login::open` event overrides it. | `boolean` | `false` |

## Methods

Call these on the element or a React ref.

### `open(_event?: any) => Promise<void | HTMLElement>`

Opens the login modal when the customer is a guest. If the customer is already logged in it reloads the page, unless `withoutReload` is true, in which case it does nothing.
Prefer `salla.event.dispatch('login::open')`, which also checks the allowed login types and creates the iframe.

| Parameter | Type | Description |
| --- | --- | --- |
| `_event` | `any` | Unused. |

Returns `Promise<void \| HTMLElement>`: A Promise that resolves when the call finishes.

## Related

Renders: [`<salla-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-modal).

Used inside: [`<salla-user-menu>`](https://docs.salla.dev/twilight/react/web-components/salla-user-menu).
```