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



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

One-time-code (OTP) verification for a mobile number or email: four digit boxes, a verify button and a resend link with a
30 second timer. It normally works on its own inside the login flow, and also opens in a modal when the store fires the
`profile::verification` event (for example after a customer changes their phone). Use `display="inline"` to place it in the page instead of a modal.

The code is submitted automatically once all four digits are filled; pasting a code fills the boxes. The boxes use
`autocomplete="one-time-code"` and a numeric keyboard on mobile. On success it emits `verified`, closes the modal and
reloads the page unless `auto-reload` is false.

## Use it [#use-it]

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

```tsx
import { SallaVerify } from '@salla.sa/twilight-components-react/verify';
```

**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 { useEffect } from 'react';
import { SallaVerify } from '@salla.sa/twilight-components-react/verify';

export function Example() {
  useEffect(() => {
    document.getElementById('verify').open({ type: 'mobile', phone: '501234567', country_code: '+966' });
  }, []);

  return (
    <SallaVerify id="verify" display="modal" type="mobile" autoReload={false} />
  );
}
```

```html
<salla-verify id="verify" display="modal" type="mobile" auto-reload="false"></salla-verify>
<script>
  document.getElementById('verify').open({ type: 'mobile', phone: '501234567', country_code: '+966' });
</script>
```

## Properties [#properties]

| Property         | Attribute          | Description                                                                                                                                                                                                | Type                  | Default    |
| ---------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ---------- |
| `autoReload`     | `auto-reload`      | Reloads the page after a successful verification. Defaults to `true`.                                                                                                                                      | `boolean`             | `true`     |
| `display`        | `display`          | `modal` (default) renders the component inside a `salla-modal`; `inline` renders it directly in the page. In `inline` mode it does not react to the `profile::verification` event, call `open()` yourself. | `"inline" \| "modal"` | `'modal'`  |
| `supportWebAuth` | `support-web-auth` | When true, a successful login verification also signs the customer in on the storefront web pages. Defaults to `true`. Only used for the login flow, not for profile verification.                         | `boolean`             | `true`     |
| `type`           | `type`             | What is being verified: `mobile` or `email`. It sets the title and icon, and is overwritten by `data.type` when `open()` is called with one.                                                               | `"email" \| "mobile"` | `'mobile'` |

## Events [#events]

Listen with `addEventListener`, or the `on` prop of the React wrapper (for example `onModalBack`).

| Event      | Description                                                                                                                                                         | Detail |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| `verified` | Fires after the code was verified successfully, before the modal closes and the page reloads. `event.detail` is the response returned by the verification API call. | `any`  |

## Methods [#methods]

Call these on the element or a React ref.

### `getCode() => Promise<string>` [#getcode--promisestring]

Returns the code currently entered in the boxes.

Returns `Promise<string>`: A Promise that resolves to the code as a string (empty until all boxes have been processed by the form).

### `open(data: any) => Promise<void>` [#opendata-any--promisevoid]

Opens the verification modal (or activates the inline form), clears the boxes, starts the 30 second resend timer and focuses the first box.

| Parameter | Type  | Description                                                                                                                                                                                                 |
| --------- | ----- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `data`    | `any` | What is being verified, sent to the API with the code and used to resend it: `{ type?: 'mobile' \| 'email', phone?: string, country_code?: string, email?: string }`. `type` falls back to the `type` prop. |

## Slots [#slots]

| Slot           | Description                                                                                                         |
| -------------- | ------------------------------------------------------------------------------------------------------------------- |
| `after-footer` | placeholder position                                                                                                |
| `email`        | Content shown above the code boxes, intended for email verification.                                                |
| `footer`       | Replaces the footer, by default it contains: verify button, resend, and timer                                       |
| `mobile`       | Content shown above the code boxes, intended for mobile verification (for example the phone number being verified). |

## Related [#related]

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