salla-verify
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.
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
In HTML or JSX, use the tag <salla-verify> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
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
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} />
);
}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
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
Call these on the element or a React ref.
getCode() => Promise<string>
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>
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
| 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
Renders: <salla-modal>, <salla-button>.