central-auth-js-sdk 1.2.4 → 1.2.6

package/core/api.js

@@ -53,19 +53,23 @@ export function createApi(baseUrl = DEFAULT_BASE, options = {}) {
       return request('POST', '/signup/start', { email });
     },
 
-    /** POST /signup/email/verify — Email verify: OTP + names (entity auto-detected from email in backend) */
-    async signupEmailVerify({ email, otp, first_name, last_name }) {
-      return request('POST', '/signup/email/verify', {
+    /** POST /signup/email/verify — Email verify: OTP + names + org details (entity auto-detected from email in backend) */
+    async signupEmailVerify({ email, otp, first_name, last_name, team, sub_team, designation }) {
+      const payload = {
         email,
         otp,
         first_name,
         last_name,
-      });
+      };
+      if (team) payload.team = team;
+      if (sub_team) payload.sub_team = sub_team;
+      if (designation) payload.designation = designation;
+      return request('POST', '/signup/email/verify', payload);
     },
 
     /** POST /signup/mobile/send_otp — Mobile entry: send mobile OTP */
-    async signupMobileSendOtp(email, mobile) {
-      return request('POST', '/signup/mobile/send_otp', { email, mobile });
+    async signupMobileSendOtp(email, mobile, channel = 'sms') {
+      return request('POST', '/signup/mobile/send_otp', { email, mobile, channel });
     },
 
     /** POST /signup/mobile/verify — Mobile verify */
@@ -104,8 +108,8 @@ export function createApi(baseUrl = DEFAULT_BASE, options = {}) {
     },
 
     /** POST /login/google/mobile/send — after OAuth, send mobile OTP. app_identifier only when provided. */
-    async googleMobileSend(loginToken, mobile, appIdentifier) {
-      const body = { login_token: loginToken, mobile };
+    async googleMobileSend(loginToken, mobile, appIdentifier, channel = 'sms') {
+      const body = { login_token: loginToken, mobile, channel };
       if (appIdentifier) body.app_identifier = appIdentifier;
       return request('POST', '/login/google/mobile/send', body);
     },
@@ -126,8 +130,8 @@ export function createApi(baseUrl = DEFAULT_BASE, options = {}) {
       return request('POST', '/login/google/fr/enroll', fd);
     },
 
-    async microsoftMobileSend(loginToken, mobile, appIdentifier) {
-      const body = { login_token: loginToken, mobile };
+    async microsoftMobileSend(loginToken, mobile, appIdentifier, channel = 'sms') {
+      const body = { login_token: loginToken, mobile, channel };
       if (appIdentifier) body.app_identifier = appIdentifier;
       return request('POST', '/login/microsoft/mobile/send', body);
     },

package/login.js

@@ -153,12 +153,14 @@ export function mountLogin(container, options = {}) {
     flow.goNext();
   }
 
-  async function handleIdentifierMobile(mobile) {
+  async function handleIdentifierMobile(mobile, channel = 'sms') {
     state.clearError();
     state.set('identifier', mobile);
+    state.set('channel', channel);
     if (flow.currentMethod === LOGIN_METHODS.MOBILE_OTP) {
       try {
-        await api.otpSend(mobile, '', 'sms');
+        const res = await api.otpSend(mobile, '', channel);
+        if (res?.channel) state.set('channel', res.channel);
         flow.goNext();
       } catch (err) {
         const msg = err?.data?.error || err?.message || 'Failed to send code';
@@ -170,6 +172,16 @@ export function mountLogin(container, options = {}) {
     flow.goNext();
   }
 
+  async function handleOtpResend(channel = 'sms') {
+    state.clearError();
+    const identifier = state.get('identifier');
+    if (!identifier) throw new Error('Identifier missing');
+    state.set('channel', channel);
+    const res = await api.otpSend(identifier, '', channel);
+    if (res?.channel) state.set('channel', res.channel);
+    return res;
+  }
+
   function isFrRequiredError(err) {
     const msg = (err?.data?.error || err?.message || '').toLowerCase();
     return msg.includes('facial recognition') && msg.includes('required');
@@ -201,11 +213,14 @@ export function mountLogin(container, options = {}) {
     }
   }
 
-  async function handleOtp(otp) {
+  async function handleOtp(otp, channelParam = null) {
     state.clearError();
     state.set('otp', otp);
     const identifier = state.get('identifier');
-    const channel = identifier.includes('@') ? 'email' : 'sms';
+    let channel = channelParam || state.get('channel');
+    if (!channel) {
+      channel = identifier.includes('@') ? 'email' : 'sms';
+    }
     if (config.frsAsSecondFactor) {
       flow.goNext();
       return;
@@ -308,6 +323,7 @@ export function mountLogin(container, options = {}) {
     onIdentifierMobile: handleIdentifierMobile,
     onPassword: handlePassword,
     onOtp: handleOtp,
+    onOtpResend: handleOtpResend,
     onFrs: handleFrs,
     onSuccessContinue,
     onBack: () => { state.clearError(); layout.showError(''); flow.goBack(); },
@@ -330,6 +346,7 @@ export function mountLogin(container, options = {}) {
       onIdentifierMobile: handlers.onIdentifierMobile,
       onPassword: handlePassword,
       onOtp: handleOtp,
+      onOtpResend: handlers.onOtpResend,
       onFrs: handleFrs,
       onSuccessContinue: handlers.onSuccessContinue,
       onBack: handlers.onBack,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "central-auth-js-sdk",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "description": "Vanilla JS sign-up and login flow SDK — embeddable auth UI with configurable methods",
   "type": "module",
   "main": "index.js",

package/signup.js

@@ -103,6 +103,9 @@ export function mount(container, options = {}) {
       email: all.email,
       mobile: all.mobile,
       userId: all.userId,
+      team: all.team,
+      subTeam: all.subTeam,
+      designation: all.designation,
     };
     if (apiResult && typeof apiResult === 'object' && apiResult !== null) {
       Object.assign(payload, apiResult);
@@ -141,13 +144,23 @@ export function mount(container, options = {}) {
 
   async function handleEmailVerify(data) {
     state.clearError();
-    state.setMultiple({ emailOtp: data.otp, firstName: data.firstName, lastName: data.lastName });
+    state.setMultiple({
+      emailOtp: data.otp,
+      firstName: data.firstName,
+      lastName: data.lastName,
+      team: data.team,
+      subTeam: data.subTeam,
+      designation: data.designation,
+    });
     try {
       const res = await api.signupEmailVerify({
         email: state.get('email'),
         otp: data.otp,
         first_name: data.firstName,
         last_name: data.lastName,
+        team: data.team,
+        sub_team: data.subTeam,
+        designation: data.designation,
       });
       const userId = res?.user_id ?? res?.data?.user_id;
       if (userId) state.set('userId', userId);
@@ -159,18 +172,21 @@ export function mount(container, options = {}) {
     }
   }
 
-  async function handleMobileSubmit(mobile) {
+  async function handleMobileSubmit(mobile, channel = 'sms') {
     state.clearError();
     state.set('mobile', mobile);
+    state.set('mobileChannel', channel);
     try {
+      let res;
       if (isSocial()) {
         const token = state.get('loginToken');
         const provider = state.get('socialProvider');
-        if (provider === 'microsoft') await api.microsoftMobileSend(token, mobile, appIdentifier);
-        else await api.googleMobileSend(token, mobile, appIdentifier);
+        if (provider === 'microsoft') res = await api.microsoftMobileSend(token, mobile, appIdentifier, channel);
+        else res = await api.googleMobileSend(token, mobile, appIdentifier, channel);
       } else {
-        await api.signupMobileSendOtp(state.get('email'), mobile);
+        res = await api.signupMobileSendOtp(state.get('email'), mobile, channel);
       }
+      if (res?.channel) state.set('mobileChannel', res.channel);
       flow.goNext();
     } catch (err) {
       const msg = err?.data?.error || err?.message || 'Failed to send code';
@@ -179,6 +195,24 @@ export function mount(container, options = {}) {
     }
   }
 
+  async function handleMobileResend(channel = 'sms') {
+    state.clearError();
+    const mobile = state.get('mobile');
+    if (!mobile) throw new Error('Mobile number missing');
+    state.set('mobileChannel', channel);
+    let res;
+    if (isSocial()) {
+      const token = state.get('loginToken');
+      const provider = state.get('socialProvider');
+      if (provider === 'microsoft') res = await api.microsoftMobileSend(token, mobile, appIdentifier, channel);
+      else res = await api.googleMobileSend(token, mobile, appIdentifier, channel);
+    } else {
+      res = await api.signupMobileSendOtp(state.get('email'), mobile, channel);
+    }
+    if (res?.channel) state.set('mobileChannel', res.channel);
+    return res;
+  }
+
   async function handleMobileVerify(otp) {
     state.clearError();
     state.set('mobileOtp', otp);
@@ -272,6 +306,7 @@ export function mount(container, options = {}) {
     onEmailVerify: handleEmailVerify,
     onMobileSubmit: handleMobileSubmit,
     onMobileVerify: handleMobileVerify,
+    onMobileResend: handleMobileResend,
     onPasswordSubmit: handlePasswordSubmit,
     onFaceSubmit: handleFaceSubmit,
     onBack: () => {

package/styles.css

@@ -1239,3 +1239,99 @@
   .wf-page-footer { margin-top: 0.75rem; }
   .wf-camera-view { aspect-ratio: 16 / 9; }
 }
+
+
+/* ============================= WHATSAPP & CHANNEL SWITCHING ============================= */
+.wf-btn-whatsapp-outline {
+  border: 1px solid #25D366;
+  background: rgba(37, 211, 102, 0.05);
+  color: #128C7E;
+  font-weight: 600;
+}
+.wf-btn-whatsapp-outline:hover:not(:disabled) {
+  background: rgba(37, 211, 102, 0.12);
+  border-color: #25D366;
+  color: #075E54;
+  transform: translateY(-1px);
+}
+.wf-icon-box-whatsapp {
+  background: rgba(37, 211, 102, 0.12) !important;
+  color: #25D366 !important;
+}
+.wf-channel-alt {
+  margin-top: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+.wf-divider-text {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  color: var(--wf-muted);
+  font-size: 0.75rem;
+}
+.wf-divider-text::before,
+.wf-divider-text::after {
+  content: "";
+  flex: 1;
+  border-bottom: 1px solid var(--wf-border);
+}
+.wf-divider-text span {
+  padding: 0 0.625rem;
+  text-transform: uppercase;
+  font-size: 0.6875rem;
+  letter-spacing: 0.05em;
+  font-weight: 600;
+}
+.wf-whatsapp-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  color: #128C7E;
+  font-weight: 600;
+  font-size: 0.8125rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--wf-radius);
+  transition: all 0.15s var(--wf-ease);
+}
+.wf-whatsapp-link:hover {
+  background: rgba(37, 211, 102, 0.12);
+  color: #075E54;
+}
+.wf-verify-footer {
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  text-align: center;
+}
+.wf-channel-switch-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.wf-status-message {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  padding: 0.375rem 0.75rem;
+  border-radius: var(--wf-radius-sm);
+  transition: all 0.2s ease;
+  width: 100%;
+}
+.wf-status-message.success {
+  background: var(--wf-success-bg);
+  color: var(--wf-success);
+}
+.wf-status-message.error {
+  background: var(--wf-destructive-bg);
+  color: var(--wf-destructive);
+}
+.wf-status-message.info {
+  background: var(--wf-primary-light);
+  color: var(--wf-primary);
+}

package/ui/screens/email-verify.js

@@ -38,6 +38,20 @@ export function createEmailVerifyScreen(email, onNext, onBack, prefill = {}) {
           <input type="text" id="wf-last-name" placeholder="Doe" class="wf-input" required autocomplete="family-name" />
         </div>
       </div>
+      <div class="wf-row-2">
+        <div class="wf-field">
+          <label class="wf-label" for="wf-team">Team</label>
+          <input type="text" id="wf-team" placeholder="Engineering" class="wf-input" autocomplete="organization" />
+        </div>
+        <div class="wf-field">
+          <label class="wf-label" for="wf-sub-team">Sub-team</label>
+          <input type="text" id="wf-sub-team" placeholder="Backend" class="wf-input" />
+        </div>
+      </div>
+      <div class="wf-field">
+        <label class="wf-label" for="wf-designation">Designation</label>
+        <input type="text" id="wf-designation" placeholder="Software Engineer" class="wf-input" autocomplete="organization-title" />
+      </div>
       <div class="wf-btn-row">
         <button type="button" class="wf-btn wf-btn-outline wf-btn-lg" data-action="back" aria-label="Go back">
           <svg class="wf-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${ARROW_LEFT}"/></svg>
@@ -57,9 +71,15 @@ export function createEmailVerifyScreen(email, onNext, onBack, prefill = {}) {
   const otpEls = wrap.querySelectorAll('.wf-otp-input');
   const firstName = wrap.querySelector('#wf-first-name');
   const lastName = wrap.querySelector('#wf-last-name');
+  const team = wrap.querySelector('#wf-team');
+  const subTeam = wrap.querySelector('#wf-sub-team');
+  const designation = wrap.querySelector('#wf-designation');
 
   if (prefill.firstName) firstName.value = prefill.firstName;
   if (prefill.lastName) lastName.value = prefill.lastName;
+  if (prefill.team && team) team.value = prefill.team;
+  if (prefill.subTeam && subTeam) subTeam.value = prefill.subTeam;
+  if (prefill.designation && designation) designation.value = prefill.designation;
 
   function handleOtpPaste(e) {
     e.preventDefault();
@@ -86,7 +106,14 @@ export function createEmailVerifyScreen(email, onNext, onBack, prefill = {}) {
     e.preventDefault();
     const code = [...otpEls].map((o) => o.value).join('');
     if (code.length === 6 && firstName.value.trim() && lastName.value.trim()) {
-      onNext({ otp: code, firstName: firstName.value.trim(), lastName: lastName.value.trim() });
+      onNext({
+        otp: code,
+        firstName: firstName.value.trim(),
+        lastName: lastName.value.trim(),
+        team: team ? team.value.trim() : '',
+        subTeam: subTeam ? subTeam.value.trim() : '',
+        designation: designation ? designation.value.trim() : '',
+      });
     }
   });
 

package/ui/screens/index.js

@@ -18,6 +18,7 @@ export function createScreen(step, state, flow, callbacks) {
     onEmailVerify,
     onMobileSubmit,
     onMobileVerify,
+    onMobileResend,
     onPasswordSubmit,
     onFaceSubmit,
     onBack,
@@ -37,7 +38,13 @@ export function createScreen(step, state, flow, callbacks) {
         state.get('email'),
         (data) => onEmailVerify(data),
         onBack,
-        { firstName: state.get('firstName') || '', lastName: state.get('lastName') || '' }
+        {
+          firstName: state.get('firstName') || '',
+          lastName: state.get('lastName') || '',
+          team: state.get('team') || '',
+          subTeam: state.get('subTeam') || '',
+          designation: state.get('designation') || '',
+        }
       );
 
     case STEPS.MOBILE:
@@ -46,8 +53,12 @@ export function createScreen(step, state, flow, callbacks) {
     case STEPS.MOBILE_VERIFY:
       return createMobileVerifyScreen(
         state.get('mobile'),
-        (otp) => onMobileVerify(otp),
-        onBack
+        (otp, channel) => onMobileVerify(otp, channel),
+        onBack,
+        {
+          channel: state.get('mobileChannel') || 'sms',
+          onResend: onMobileResend,
+        }
       );
 
     case STEPS.PASSWORD:

package/ui/screens/login/identifier-mobile.js

@@ -1,34 +1,35 @@
 /**
  * Login — Mobile identifier input (country code + number)
- * v2.0 — warm, modern design
+ * v2.0 — warm, modern design with SMS and WhatsApp support
  */
 
-const PHONE_ICON = 'M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 010 2.78 12.84 12.84 0 006 6 2 2 0 002.78 0 12.84 12.84 0 002.81-.7A2 2 0 0022 16.92z';
-const ARROW_LEFT = 'M19 12H5m7 7l-7-7 7-7';
-const ARROW_RIGHT = 'M5 12h14m-7-7l7 7-7 7';
+const PHONE_ICON = "M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 0102.78 12.84 12.84 0 006 6 2 2 0 002.78 0 12.84 12.84 0 002.81-.7A2 2 0 0022 16.92z";
+const ARROW_LEFT = "M19 12H5m7 7l-7-7 7-7";
+const ARROW_RIGHT = "M5 12h14m-7-7l7 7-7 7";
+const WHATSAPP_ICON = "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.888 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L0 24l6.335-1.662c1.746.953 3.71 1.455 5.711 1.456h.005c6.554 0 11.89-5.336 11.893-11.893a11.821 11.821 0 00-3.48-8.413z";
 
 const COUNTRY_CODES = [
-  { code: '91', label: 'India +91' },
-  { code: '1', label: 'United States +1' },
-  { code: '44', label: 'United Kingdom +44' },
-  { code: '61', label: 'Australia +61' },
-  { code: '81', label: 'Japan +81' },
-  { code: '49', label: 'Germany +49' },
-  { code: '33', label: 'France +33' },
-  { code: '86', label: 'China +86' },
-  { code: '971', label: 'UAE +971' },
-  { code: '65', label: 'Singapore +65' },
-  { code: '55', label: 'Brazil +55' },
-  { code: '52', label: 'Mexico +52' },
+  { code: "91", label: "India +91" },
+  { code: "1", label: "United States +1" },
+  { code: "44", label: "United Kingdom +44" },
+  { code: "61", label: "Australia +61" },
+  { code: "81", label: "Japan +81" },
+  { code: "49", label: "Germany +49" },
+  { code: "33", label: "France +33" },
+  { code: "86", label: "China +86" },
+  { code: "971", label: "UAE +971" },
+  { code: "65", label: "Singapore +65" },
+  { code: "55", label: "Brazil +55" },
+  { code: "52", label: "Mexico +52" },
 ];
 
 export function createLoginIdentifierMobileScreen(onNext, onBack, onSignUp) {
-  const wrap = document.createElement('div');
-  wrap.className = 'wf-screen';
+  const wrap = document.createElement("div");
+  wrap.className = "wf-screen";
 
   const countryOptions = COUNTRY_CODES.map((c) =>
-    `<option value="${c.code}"${c.code === '91' ? ' selected' : ''}>${c.label}</option>`
-  ).join('');
+    `<option value="${c.code}"${c.code === "91" ? " selected" : ""}>${c.label}</option>`
+  ).join("");
 
   wrap.innerHTML = `
     <div class="wf-screen-header">
@@ -36,7 +37,7 @@ export function createLoginIdentifierMobileScreen(onNext, onBack, onSignUp) {
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${PHONE_ICON}"/></svg>
       </div>
       <h2 class="wf-screen-title">Enter your mobile number</h2>
-      <p class="wf-screen-desc">We'll use this to sign you in</p>
+      <p class="wf-screen-desc">We will use this to sign you in</p>
     </div>
     <form class="wf-form" id="wf-login-mobile-form">
       <div class="wf-field">
@@ -52,33 +53,58 @@ export function createLoginIdentifierMobileScreen(onNext, onBack, onSignUp) {
         <button type="button" class="wf-btn wf-btn-outline wf-btn-lg" data-action="back" aria-label="Go back">
           <svg class="wf-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${ARROW_LEFT}"/></svg>
         </button>
-        <button type="submit" class="wf-btn wf-btn-primary wf-btn-lg wf-btn-flex">
+        <button type="submit" class="wf-btn wf-btn-primary wf-btn-lg wf-btn-flex" id="wf-btn-login-submit">
           Continue
           <svg class="wf-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${ARROW_RIGHT}"/></svg>
         </button>
       </div>
+      <div class="wf-channel-alt">
+        <div class="wf-divider-text"><span>or</span></div>
+        <button type="button" class="wf-btn wf-btn-outline wf-btn-whatsapp-outline wf-btn-lg wf-btn-full" id="wf-btn-login-wa">
+          <svg class="wf-icon-sm" viewBox="0 0 24 24" fill="currentColor"><path d="${WHATSAPP_ICON}"/></svg>
+          Send WhatsApp OTP instead
+        </button>
+      </div>
     </form>
     <p class="wf-footer-link">
       Don't have an account? <button type="button" class="wf-link" data-action="signup">Sign up</button>
     </p>
   `;
 
-  const form = wrap.querySelector('#wf-login-mobile-form');
-  const countrySelect = wrap.querySelector('#wf-login-mobile-country');
-  const input = wrap.querySelector('#wf-login-mobile');
+  const form = wrap.querySelector("#wf-login-mobile-form");
+  const countrySelect = wrap.querySelector("#wf-login-mobile-country");
+  const input = wrap.querySelector("#wf-login-mobile");
+  const waBtn = wrap.querySelector("#wf-btn-login-wa");
 
-  form.addEventListener('submit', (e) => {
-    e.preventDefault();
-    const digits = input.value.trim().replace(/\D/g, '');
+  function submitMobile(channel = "sms") {
+    const digits = input.value.trim().replace(/\D/g, "");
     if (digits.length >= 10) {
-      const full = '+' + countrySelect.value + digits;
-      onNext(full);
+      const full = "+" + countrySelect.value + digits;
+      onNext(full, channel);
+    } else {
+      input.focus();
+      if (typeof input.reportValidity === "function") {
+        input.reportValidity();
+      }
     }
+  }
+
+  form.addEventListener("submit", (e) => {
+    e.preventDefault();
+    submitMobile("sms");
   });
-  wrap.querySelector('[data-action="back"]').addEventListener('click', onBack);
-  const signUpBtn = wrap.querySelector('[data-action="signup"]');
-  if (signUpBtn && typeof onSignUp === 'function') {
-    signUpBtn.addEventListener('click', () => onSignUp());
+
+  if (waBtn) {
+    waBtn.addEventListener("click", (e) => {
+      e.preventDefault();
+      submitMobile("whatsapp");
+    });
+  }
+
+  wrap.querySelector("button[data-action='back']").addEventListener("click", onBack);
+  const signUpBtn = wrap.querySelector("button[data-action='signup']");
+  if (signUpBtn && typeof onSignUp === "function") {
+    signUpBtn.addEventListener("click", () => onSignUp());
   }
 
   return wrap;

package/ui/screens/login/index.js

@@ -19,6 +19,7 @@ export function createLoginScreen(stepId, flow, state, config, handlers) {
     onIdentifierMobile,
     onPassword,
     onOtp,
+    onOtpResend,
     onFrs,
     onSuccessContinue,
     onBack,
@@ -75,13 +76,17 @@ export function createLoginScreen(stepId, flow, state, config, handlers) {
 
     case LOGIN_STEPS.OTP: {
       const identifier = state.get('identifier') || '';
-      const method = flow.currentMethod;
-      const otpLength = (method === LOGIN_METHODS.EMAIL_OTP) ? 6 : 4;
+      const currentChannel = state.get('channel') || (identifier.includes('@') ? 'email' : 'sms');
+      const otpLength = (currentChannel === 'whatsapp' || identifier.includes('@')) ? 6 : 4;
       return createLoginOtpScreen(
         identifier,
         otpLength,
-        (otp) => { state.set('otp', otp); onOtp(otp); },
-        onBack
+        (otp, chan) => { state.set('otp', otp); onOtp(otp, chan); },
+        onBack,
+        {
+          channel: currentChannel,
+          onResend: onOtpResend,
+        }
       );
     }
 

package/ui/screens/login/otp.js

@@ -1,79 +1,212 @@
 /**
  * Login — OTP verification (email or mobile)
- * v2.0 — warm, modern design
+ * v2.0 — warm, modern design with SMS and WhatsApp channel switching
  */
 
-const MAIL_ICON = 'M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z';
-const ARROW_LEFT = 'M19 12H5m7 7l-7-7 7-7';
-const ARROW_RIGHT = 'M5 12h14m-7-7l7 7-7 7';
+const MAIL_ICON = "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z";
+const PHONE_ICON = "M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z";
+const WHATSAPP_ICON = "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.888 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L0 24l6.335-1.662c1.746.953 3.71 1.455 5.711 1.456h.005c6.554 0 11.89-5.336 11.893-11.893a11.821 11.821 0 00-3.48-8.413z";
+const ARROW_LEFT = "M19 12H5m7 7l-7-7 7-7";
+const ARROW_RIGHT = "M5 12h14m-7-7l7 7-7 7";
 
-export function createLoginOtpScreen(identifier, otpLength = 4, onNext, onBack) {
-  const wrap = document.createElement('div');
-  wrap.className = 'wf-screen';
+export function createLoginOtpScreen(identifier, otpLength = 4, onNext, onBack, options = {}) {
+  const isEmail = identifier.includes("@");
+  let currentChannel = (options.channel || (isEmail ? "email" : "sms")).toLowerCase();
+  const onResend = typeof options.onResend === "function" ? options.onResend : null;
 
-  const otpInputs = Array(otpLength).fill(0).map((_, i) => `
-    <input type="text" inputmode="numeric" maxlength="1" class="wf-otp-input" id="wf-login-otp-${i}" data-idx="${i}" autocomplete="one-time-code" />
-  `).join('');
+  const wrap = document.createElement("div");
+  wrap.className = "wf-screen";
 
-  wrap.innerHTML = `
-    <div class="wf-screen-header">
-      <div class="wf-icon-box">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${MAIL_ICON}"/></svg>
-      </div>
-      <h2 class="wf-screen-title">Check your code</h2>
-      <p class="wf-screen-desc">We sent a ${otpLength}-digit code to <span class="wf-highlight">${identifier}</span></p>
-    </div>
-    <form class="wf-form" id="wf-login-otp-form">
-      <div class="wf-field">
-        <label class="wf-label">Verification code</label>
-        <div class="wf-otp-row">${otpInputs}</div>
+  let cooldownTimer = null;
+  let cooldownSec = 0;
+
+  function getExpectedLength() {
+    if (isEmail) return 6;
+    return currentChannel === "whatsapp" ? 6 : 4;
+  }
+
+  function getDescText(len) {
+    if (isEmail) {
+      return `We sent a ${len}-digit code to <span class="wf-highlight">${identifier}</span>`;
+    }
+    if (currentChannel === "whatsapp") {
+      return `We sent a ${len}-digit code via WhatsApp to <span class="wf-highlight">${identifier}</span>`;
+    }
+    return `We sent a ${len}-digit code to <span class="wf-highlight">${identifier}</span>`;
+  }
+
+  function renderScreen() {
+    const len = getExpectedLength();
+    const isWhatsApp = !isEmail && currentChannel === "whatsapp";
+
+    wrap.innerHTML = `
+      <div class="wf-screen-header">
+        <div class="wf-icon-box ${isWhatsApp ? "wf-icon-box-whatsapp" : ""}">
+          ${isEmail
+            ? `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${MAIL_ICON}"/></svg>`
+            : isWhatsApp
+              ? `<svg viewBox="0 0 24 24" fill="currentColor"><path d="${WHATSAPP_ICON}"/></svg>`
+              : `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${PHONE_ICON}"/></svg>`
+          }
+        </div>
+        <h2 class="wf-screen-title">Check your code</h2>
+        <p class="wf-screen-desc" id="wf-login-otp-desc">${getDescText(len)}</p>
       </div>
-      <div class="wf-btn-row">
-        <button type="button" class="wf-btn wf-btn-outline wf-btn-lg" data-action="back" aria-label="Go back">
-          <svg class="wf-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${ARROW_LEFT}"/></svg>
-        </button>
-        <button type="submit" class="wf-btn wf-btn-primary wf-btn-lg wf-btn-flex">
-          Verify
-          <svg class="wf-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${ARROW_RIGHT}"/></svg>
-        </button>
+      <form class="wf-form" id="wf-login-otp-form">
+        <div class="wf-field">
+          <label class="wf-label">Verification code</label>
+          <div class="wf-otp-row" id="wf-login-otp-container">
+            ${Array(len).fill(0).map((_, i) => `
+              <input type="text" inputmode="numeric" maxlength="1" class="wf-otp-input" id="wf-login-otp-${i}" data-idx="${i}" autocomplete="one-time-code" />
+            `).join("")}
+          </div>
+        </div>
+        <div class="wf-btn-row">
+          <button type="button" class="wf-btn wf-btn-outline wf-btn-lg" data-action="back" aria-label="Go back">
+            <svg class="wf-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${ARROW_LEFT}"/></svg>
+          </button>
+          <button type="submit" class="wf-btn wf-btn-primary wf-btn-lg wf-btn-flex">
+            Verify
+            <svg class="wf-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${ARROW_RIGHT}"/></svg>
+          </button>
+        </div>
+      </form>
+      <div class="wf-verify-footer">
+        <p class="wf-footer-link">
+          Didn't receive the code?
+          <button type="button" class="wf-link" id="wf-btn-login-resend">
+            ${cooldownSec > 0 ? `Resend (${cooldownSec}s)` : (isWhatsApp ? "Resend WhatsApp OTP" : "Resend")}
+          </button>
+        </p>
+        ${!isEmail ? `
+          <div class="wf-channel-switch-wrap">
+            ${isWhatsApp
+              ? `<button type="button" class="wf-link wf-channel-switch-btn" id="wf-btn-login-switch">Send via SMS instead</button>`
+              : `<button type="button" class="wf-whatsapp-link wf-channel-switch-btn" id="wf-btn-login-switch">
+                  <svg class="wf-icon-sm" viewBox="0 0 24 24" fill="currentColor"><path d="${WHATSAPP_ICON}"/></svg>
+                  Send WhatsApp OTP instead
+                 </button>`
+            }
+          </div>
+        ` : ""}
+        <div id="wf-login-resend-status" class="wf-status-message" style="display:none;"></div>
       </div>
-    </form>
-    <p class="wf-footer-link">
-      Didn't receive the code? <button type="button" class="wf-link">Resend</button>
-    </p>
-  `;
-
-  const form = wrap.querySelector('#wf-login-otp-form');
-  const otpEls = wrap.querySelectorAll('.wf-otp-input');
-
-  function handleOtpPaste(e) {
-    e.preventDefault();
-    const pasted = (e.clipboardData || window.clipboardData).getData('text');
-    const digits = pasted.replace(/\D/g, '').slice(0, otpLength).split('');
-    digits.forEach((d, i) => { if (otpEls[i]) otpEls[i].value = d; });
-    const nextIdx = Math.min(digits.length, otpLength - 1);
-    if (otpEls[nextIdx]) otpEls[nextIdx].focus();
+    `;
+
+    bindEvents();
+  }
+
+  function setStatus(msg, type = "success") {
+    const el = wrap.querySelector("#wf-login-resend-status");
+    if (!el) return;
+    el.textContent = msg;
+    el.className = `wf-status-message ${type}`;
+    el.style.display = "block";
+    setTimeout(() => {
+      if (el) el.style.display = "none";
+    }, 4500);
   }
 
-  otpEls.forEach((el, i) => {
-    el.addEventListener('paste', handleOtpPaste);
-    el.addEventListener('input', (e) => {
-      const v = e.target.value.replace(/\D/g, '').slice(0, 1);
-      e.target.value = v;
-      if (v && i < otpLength - 1) otpEls[i + 1].focus();
+  function startCooldown() {
+    cooldownSec = 30;
+    const resendBtn = wrap.querySelector("#wf-btn-login-resend");
+    if (resendBtn) {
+      resendBtn.disabled = true;
+      resendBtn.textContent = `Resend (${cooldownSec}s)`;
+    }
+    if (cooldownTimer) clearInterval(cooldownTimer);
+    cooldownTimer = setInterval(() => {
+      cooldownSec -= 1;
+      const btn = wrap.querySelector("#wf-btn-login-resend");
+      if (cooldownSec <= 0) {
+        clearInterval(cooldownTimer);
+        cooldownTimer = null;
+        if (btn) {
+          btn.disabled = false;
+          btn.textContent = currentChannel === "whatsapp" ? "Resend WhatsApp OTP" : "Resend";
+        }
+      } else if (btn) {
+        btn.textContent = `Resend (${cooldownSec}s)`;
+      }
+    }, 1000);
+  }
+
+  async function triggerResend(targetChannel) {
+    if (!onResend) return;
+    try {
+      const isSwitch = targetChannel !== currentChannel;
+      currentChannel = targetChannel;
+      if (isSwitch) {
+        renderScreen();
+      }
+      setStatus("Sending verification code...", "info");
+      const res = await onResend(targetChannel);
+      const chanLabel = targetChannel === "whatsapp" ? "WhatsApp" : (targetChannel === "email" ? "Email" : "SMS");
+      setStatus(res?.message || `Code sent via ${chanLabel}!`, "success");
+      startCooldown();
+      const firstOtp = wrap.querySelector("#wf-login-otp-0");
+      if (firstOtp) firstOtp.focus();
+    } catch (err) {
+      const msg = err?.data?.error || err?.message || "Failed to resend code";
+      setStatus(msg, "error");
+    }
+  }
+
+  function bindEvents() {
+    const form = wrap.querySelector("#wf-login-otp-form");
+    const otpEls = wrap.querySelectorAll(".wf-otp-input");
+    const len = getExpectedLength();
+
+    function handleOtpPaste(e) {
+      e.preventDefault();
+      const pasted = (e.clipboardData || window.clipboardData).getData("text");
+      const digits = pasted.replace(/\D/g, "").slice(0, len).split("");
+      digits.forEach((d, i) => { if (otpEls[i]) otpEls[i].value = d; });
+      const nextIdx = Math.min(digits.length, len - 1);
+      if (otpEls[nextIdx]) otpEls[nextIdx].focus();
+    }
+
+    otpEls.forEach((el, i) => {
+      el.addEventListener("paste", handleOtpPaste);
+      el.addEventListener("input", (e) => {
+        const v = e.target.value.replace(/\D/g, "").slice(0, 1);
+        e.target.value = v;
+        if (v && i < len - 1) otpEls[i + 1].focus();
+      });
+      el.addEventListener("keydown", (e) => {
+        if (e.key === "Backspace" && !e.target.value && i > 0) otpEls[i - 1].focus();
+      });
     });
-    el.addEventListener('keydown', (e) => {
-      if (e.key === 'Backspace' && !e.target.value && i > 0) otpEls[i - 1].focus();
+
+    form.addEventListener("submit", (e) => {
+      e.preventDefault();
+      const code = [...otpEls].map((o) => o.value).join("");
+      if (code.length === len || (code.length >= 4 && code.length <= 6)) {
+        onNext(code, currentChannel);
+      }
     });
-  });
 
-  form.addEventListener('submit', (e) => {
-    e.preventDefault();
-    const code = [...otpEls].map((o) => o.value).join('');
-    if (code.length === otpLength) onNext(code);
-  });
+    wrap.querySelector("button[data-action='back']").addEventListener("click", onBack);
 
-  wrap.querySelector('[data-action="back"]').addEventListener('click', onBack);
+    const resendBtn = wrap.querySelector("#wf-btn-login-resend");
+    if (resendBtn) {
+      if (cooldownSec > 0) resendBtn.disabled = true;
+      resendBtn.addEventListener("click", (e) => {
+        e.preventDefault();
+        if (cooldownSec <= 0) triggerResend(currentChannel);
+      });
+    }
+
+    const switchBtn = wrap.querySelector("#wf-btn-login-switch");
+    if (switchBtn) {
+      switchBtn.addEventListener("click", (e) => {
+        e.preventDefault();
+        const nextChannel = currentChannel === "whatsapp" ? "sms" : "whatsapp";
+        triggerResend(nextChannel);
+      });
+    }
+  }
 
+  renderScreen();
   return wrap;
 }

package/ui/screens/mobile-entry.js

@@ -1,34 +1,35 @@
 /**
  * Mobile Entry Screen — Add mobile number (country code + number)
- * v2.0 — warm, modern design
+ * v2.0 — warm, modern design with SMS and WhatsApp OTP choices
  */
 
-const PHONE_ICON = 'M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 0102.78 12.84 12.84 0 006 6 2 2 0 002.78 0 12.84 12.84 0 002.81-.7A2 2 0 0022 16.92z';
-const ARROW_LEFT = 'M19 12H5m7 7l-7-7 7-7';
-const ARROW_RIGHT = 'M5 12h14m-7-7l7 7-7 7';
+const PHONE_ICON = "M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 0102.78 12.84 12.84 0 006 6 2 2 0 002.78 0 12.84 12.84 0 002.81-.7A2 2 0 0022 16.92z";
+const ARROW_LEFT = "M19 12H5m7 7l-7-7 7-7";
+const ARROW_RIGHT = "M5 12h14m-7-7l7 7-7 7";
+const WHATSAPP_ICON = "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.888 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L0 24l6.335-1.662c1.746.953 3.71 1.455 5.711 1.456h.005c6.554 0 11.89-5.336 11.893-11.893a11.821 11.821 0 00-3.48-8.413z";
 
 const COUNTRY_CODES = [
-  { code: '91', label: '+91' },
-  { code: '1', label: '+1' },
-  { code: '44', label: '+44' },
-  { code: '61', label: '+61' },
-  { code: '81', label: '+81' },
-  { code: '49', label: '+49' },
-  { code: '33', label: '+33' },
-  { code: '86', label: '+86' },
-  { code: '971', label: '+971' },
-  { code: '65', label: '+65' },
-  { code: '55', label: '+55' },
-  { code: '52', label: '+52' },
+  { code: "91", label: "+91" },
+  { code: "1", label: "+1" },
+  { code: "44", label: "+44" },
+  { code: "61", label: "+61" },
+  { code: "81", label: "+81" },
+  { code: "49", label: "+49" },
+  { code: "33", label: "+33" },
+  { code: "86", label: "+86" },
+  { code: "971", label: "+971" },
+  { code: "65", label: "+65" },
+  { code: "55", label: "+55" },
+  { code: "52", label: "+52" },
 ];
 
 export function createMobileEntryScreen(onNext, onBack) {
-  const wrap = document.createElement('div');
-  wrap.className = 'wf-screen';
+  const wrap = document.createElement("div");
+  wrap.className = "wf-screen";
 
   const countryOptions = COUNTRY_CODES.map((c) =>
-    `<option value="${c.code}"${c.code === '91' ? ' selected' : ''}>${c.label}</option>`
-  ).join('');
+    `<option value="${c.code}"${c.code === "91" ? " selected" : ""}>${c.label}</option>`
+  ).join("");
 
   wrap.innerHTML = `
     <div class="wf-screen-header">
@@ -36,7 +37,7 @@ export function createMobileEntryScreen(onNext, onBack) {
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${PHONE_ICON}"/></svg>
       </div>
       <h2 class="wf-screen-title">Add your mobile number</h2>
-      <p class="wf-screen-desc">We'll send a verification code to confirm this number</p>
+      <p class="wf-screen-desc">We will send a verification code to confirm this number</p>
     </div>
     <form class="wf-form" id="wf-mobile-form">
       <div class="wf-field">
@@ -52,28 +53,52 @@ export function createMobileEntryScreen(onNext, onBack) {
         <button type="button" class="wf-btn wf-btn-outline wf-btn-lg" data-action="back" aria-label="Go back">
           <svg class="wf-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${ARROW_LEFT}"/></svg>
         </button>
-        <button type="submit" class="wf-btn wf-btn-primary wf-btn-lg wf-btn-flex">
+        <button type="submit" class="wf-btn wf-btn-primary wf-btn-lg wf-btn-flex" id="wf-btn-send-sms">
           Send Code
           <svg class="wf-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${ARROW_RIGHT}"/></svg>
         </button>
       </div>
+      <div class="wf-channel-alt">
+        <div class="wf-divider-text"><span>or</span></div>
+        <button type="button" class="wf-btn wf-btn-outline wf-btn-whatsapp-outline wf-btn-lg wf-btn-full" id="wf-btn-send-wa">
+          <svg class="wf-icon-sm" viewBox="0 0 24 24" fill="currentColor"><path d="${WHATSAPP_ICON}"/></svg>
+          Send WhatsApp OTP instead
+        </button>
+      </div>
     </form>
   `;
 
-  const form = wrap.querySelector('#wf-mobile-form');
-  const countrySelect = wrap.querySelector('#wf-mobile-country');
-  const input = wrap.querySelector('#wf-mobile');
+  const form = wrap.querySelector("#wf-mobile-form");
+  const countrySelect = wrap.querySelector("#wf-mobile-country");
+  const input = wrap.querySelector("#wf-mobile");
+  const waBtn = wrap.querySelector("#wf-btn-send-wa");
 
-  form.addEventListener('submit', (e) => {
-    e.preventDefault();
-    const digits = input.value.trim().replace(/\D/g, '');
+  function submitMobile(channel = "sms") {
+    const digits = input.value.trim().replace(/\D/g, "");
     if (digits.length >= 10) {
-      const full = '+' + countrySelect.value + digits;
-      onNext(full);
+      const full = "+" + countrySelect.value + digits;
+      onNext(full, channel);
+    } else {
+      input.focus();
+      if (typeof input.reportValidity === "function") {
+        input.reportValidity();
+      }
     }
+  }
+
+  form.addEventListener("submit", (e) => {
+    e.preventDefault();
+    submitMobile("sms");
   });
 
-  wrap.querySelector('[data-action="back"]').addEventListener('click', onBack);
+  if (waBtn) {
+    waBtn.addEventListener("click", (e) => {
+      e.preventDefault();
+      submitMobile("whatsapp");
+    });
+  }
+
+  wrap.querySelector("button[data-action='back']").addEventListener("click", onBack);
 
   return wrap;
 }

package/ui/screens/mobile-verify.js

@@ -1,79 +1,202 @@
 /**
  * Mobile Verification Screen — OTP entry
- * v2.0 — warm, modern design
+ * v2.0 — warm, modern design with SMS and WhatsApp support
  */
 
-const SMARTPHONE_ICON = 'M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z';
-const ARROW_LEFT = 'M19 12H5m7 7l-7-7 7-7';
-const ARROW_RIGHT = 'M5 12h14m-7-7l7 7-7 7';
+const SMARTPHONE_ICON = "M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z";
+const WHATSAPP_ICON = "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.888 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L0 24l6.335-1.662c1.746.953 3.71 1.455 5.711 1.456h.005c6.554 0 11.89-5.336 11.893-11.893a11.821 11.821 0 00-3.48-8.413z";
+const ARROW_LEFT = "M19 12H5m7 7l-7-7 7-7";
+const ARROW_RIGHT = "M5 12h14m-7-7l7 7-7 7";
 
-export function createMobileVerifyScreen(mobile, onNext, onBack) {
-  const wrap = document.createElement('div');
-  wrap.className = 'wf-screen';
+export function createMobileVerifyScreen(mobile, onNext, onBack, options = {}) {
+  let currentChannel = (options.channel || "sms").toLowerCase();
+  const onResend = typeof options.onResend === "function" ? options.onResend : null;
 
-  const otpInputs = Array(4).fill(0).map((_, i) => `
-    <input type="text" inputmode="numeric" maxlength="1" class="wf-otp-input" id="wf-mobile-otp-${i}" data-idx="${i}" autocomplete="one-time-code" />
-  `).join('');
+  const wrap = document.createElement("div");
+  wrap.className = "wf-screen";
 
-  wrap.innerHTML = `
-    <div class="wf-screen-header">
-      <div class="wf-icon-box">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${SMARTPHONE_ICON}"/></svg>
-      </div>
-      <h2 class="wf-screen-title">Verify your mobile</h2>
-      <p class="wf-screen-desc">Enter the code sent to <span class="wf-highlight">${mobile}</span></p>
-    </div>
-    <form class="wf-form" id="wf-mobile-verify-form">
-      <div class="wf-field">
-        <label class="wf-label">Verification code</label>
-        <div class="wf-otp-row">${otpInputs}</div>
+  let cooldownTimer = null;
+  let cooldownSec = 0;
+
+  function getExpectedLength() {
+    return currentChannel === "whatsapp" ? 6 : 4;
+  }
+
+  function getDescText() {
+    if (currentChannel === "whatsapp") {
+      return `Enter the 6-digit code sent via WhatsApp to <span class="wf-highlight">${mobile}</span>`;
+    }
+    return `Enter the code sent to <span class="wf-highlight">${mobile}</span>`;
+  }
+
+  function renderScreen() {
+    const otpLength = getExpectedLength();
+    const isWhatsApp = currentChannel === "whatsapp";
+
+    wrap.innerHTML = `
+      <div class="wf-screen-header">
+        <div class="wf-icon-box ${isWhatsApp ? "wf-icon-box-whatsapp" : ""}">
+          ${isWhatsApp
+            ? `<svg viewBox="0 0 24 24" fill="currentColor"><path d="${WHATSAPP_ICON}"/></svg>`
+            : `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${SMARTPHONE_ICON}"/></svg>`
+          }
+        </div>
+        <h2 class="wf-screen-title">Verify your mobile</h2>
+        <p class="wf-screen-desc" id="wf-verify-desc">${getDescText()}</p>
       </div>
-      <div class="wf-btn-row">
-        <button type="button" class="wf-btn wf-btn-outline wf-btn-lg" data-action="back" aria-label="Go back">
-          <svg class="wf-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${ARROW_LEFT}"/></svg>
-        </button>
-        <button type="submit" class="wf-btn wf-btn-primary wf-btn-lg wf-btn-flex">
-          Verify
-          <svg class="wf-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${ARROW_RIGHT}"/></svg>
-        </button>
+      <form class="wf-form" id="wf-mobile-verify-form">
+        <div class="wf-field">
+          <label class="wf-label">Verification code</label>
+          <div class="wf-otp-row" id="wf-otp-container">
+            ${Array(otpLength).fill(0).map((_, i) => `
+              <input type="text" inputmode="numeric" maxlength="1" class="wf-otp-input" id="wf-mobile-otp-${i}" data-idx="${i}" autocomplete="one-time-code" />
+            `).join("")}
+          </div>
+        </div>
+        <div class="wf-btn-row">
+          <button type="button" class="wf-btn wf-btn-outline wf-btn-lg" data-action="back" aria-label="Go back">
+            <svg class="wf-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${ARROW_LEFT}"/></svg>
+          </button>
+          <button type="submit" class="wf-btn wf-btn-primary wf-btn-lg wf-btn-flex">
+            Verify
+            <svg class="wf-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${ARROW_RIGHT}"/></svg>
+          </button>
+        </div>
+      </form>
+      <div class="wf-verify-footer">
+        <p class="wf-footer-link">
+          Didn't receive the code?
+          <button type="button" class="wf-link" id="wf-btn-resend-current">
+            ${cooldownSec > 0 ? `Resend (${cooldownSec}s)` : (isWhatsApp ? "Resend WhatsApp OTP" : "Resend")}
+          </button>
+        </p>
+        <div class="wf-channel-switch-wrap">
+          ${isWhatsApp
+            ? `<button type="button" class="wf-link wf-channel-switch-btn" id="wf-btn-switch-channel">Send via SMS instead</button>`
+            : `<button type="button" class="wf-whatsapp-link wf-channel-switch-btn" id="wf-btn-switch-channel">
+                <svg class="wf-icon-sm" viewBox="0 0 24 24" fill="currentColor"><path d="${WHATSAPP_ICON}"/></svg>
+                Send WhatsApp OTP instead
+               </button>`
+          }
+        </div>
+        <div id="wf-resend-status" class="wf-status-message" style="display:none;"></div>
       </div>
-    </form>
-    <p class="wf-footer-link">
-      Didn't receive the code? <button type="button" class="wf-link">Resend</button>
-    </p>
-  `;
-
-  const form = wrap.querySelector('#wf-mobile-verify-form');
-  const otpEls = wrap.querySelectorAll('.wf-otp-input');
-
-  function handleOtpPaste(e) {
-    e.preventDefault();
-    const pasted = (e.clipboardData || window.clipboardData).getData('text');
-    const digits = pasted.replace(/\D/g, '').slice(0, 4).split('');
-    digits.forEach((d, i) => { if (otpEls[i]) otpEls[i].value = d; });
-    const nextIdx = Math.min(digits.length, 3);
-    if (otpEls[nextIdx]) otpEls[nextIdx].focus();
+    `;
+
+    bindEvents();
+  }
+
+  function setStatus(msg, type = "success") {
+    const el = wrap.querySelector("#wf-resend-status");
+    if (!el) return;
+    el.textContent = msg;
+    el.className = `wf-status-message ${type}`;
+    el.style.display = "block";
+    setTimeout(() => {
+      if (el) el.style.display = "none";
+    }, 4500);
   }
 
-  otpEls.forEach((el, i) => {
-    el.addEventListener('paste', handleOtpPaste);
-    el.addEventListener('input', (e) => {
-      const v = e.target.value.replace(/\D/g, '').slice(0, 1);
-      e.target.value = v;
-      if (v && i < 3) otpEls[i + 1].focus();
+  function startCooldown() {
+    cooldownSec = 30;
+    const resendBtn = wrap.querySelector("#wf-btn-resend-current");
+    if (resendBtn) {
+      resendBtn.disabled = true;
+      resendBtn.textContent = `Resend (${cooldownSec}s)`;
+    }
+    if (cooldownTimer) clearInterval(cooldownTimer);
+    cooldownTimer = setInterval(() => {
+      cooldownSec -= 1;
+      const btn = wrap.querySelector("#wf-btn-resend-current");
+      if (cooldownSec <= 0) {
+        clearInterval(cooldownTimer);
+        cooldownTimer = null;
+        if (btn) {
+          btn.disabled = false;
+          btn.textContent = currentChannel === "whatsapp" ? "Resend WhatsApp OTP" : "Resend";
+        }
+      } else if (btn) {
+        btn.textContent = `Resend (${cooldownSec}s)`;
+      }
+    }, 1000);
+  }
+
+  async function triggerResend(targetChannel) {
+    if (!onResend) return;
+    try {
+      const isSwitch = targetChannel !== currentChannel;
+      currentChannel = targetChannel;
+      if (isSwitch) {
+        renderScreen();
+      }
+      setStatus("Sending verification code...", "info");
+      const res = await onResend(targetChannel);
+      const chanLabel = targetChannel === "whatsapp" ? "WhatsApp" : "SMS";
+      setStatus(res?.message || `Code sent via ${chanLabel}!`, "success");
+      startCooldown();
+      const firstOtp = wrap.querySelector("#wf-mobile-otp-0");
+      if (firstOtp) firstOtp.focus();
+    } catch (err) {
+      const msg = err?.data?.error || err?.message || "Failed to resend code";
+      setStatus(msg, "error");
+    }
+  }
+
+  function bindEvents() {
+    const form = wrap.querySelector("#wf-mobile-verify-form");
+    const otpEls = wrap.querySelectorAll(".wf-otp-input");
+    const otpLength = getExpectedLength();
+
+    function handleOtpPaste(e) {
+      e.preventDefault();
+      const pasted = (e.clipboardData || window.clipboardData).getData("text");
+      const digits = pasted.replace(/\D/g, "").slice(0, otpLength).split("");
+      digits.forEach((d, i) => { if (otpEls[i]) otpEls[i].value = d; });
+      const nextIdx = Math.min(digits.length, otpLength - 1);
+      if (otpEls[nextIdx]) otpEls[nextIdx].focus();
+    }
+
+    otpEls.forEach((el, i) => {
+      el.addEventListener("paste", handleOtpPaste);
+      el.addEventListener("input", (e) => {
+        const v = e.target.value.replace(/\D/g, "").slice(0, 1);
+        e.target.value = v;
+        if (v && i < otpLength - 1) otpEls[i + 1].focus();
+      });
+      el.addEventListener("keydown", (e) => {
+        if (e.key === "Backspace" && !e.target.value && i > 0) otpEls[i - 1].focus();
+      });
     });
-    el.addEventListener('keydown', (e) => {
-      if (e.key === 'Backspace' && !e.target.value && i > 0) otpEls[i - 1].focus();
+
+    form.addEventListener("submit", (e) => {
+      e.preventDefault();
+      const code = [...otpEls].map((o) => o.value).join("");
+      if (code.length === otpLength || (code.length >= 4 && code.length <= 6)) {
+        onNext(code, currentChannel);
+      }
     });
-  });
 
-  form.addEventListener('submit', (e) => {
-    e.preventDefault();
-    const code = [...otpEls].map((o) => o.value).join('');
-    if (code.length === 4) onNext(code);
-  });
+    wrap.querySelector("button[data-action='back']").addEventListener("click", onBack);
 
-  wrap.querySelector('[data-action="back"]').addEventListener('click', onBack);
+    const resendBtn = wrap.querySelector("#wf-btn-resend-current");
+    if (resendBtn) {
+      if (cooldownSec > 0) resendBtn.disabled = true;
+      resendBtn.addEventListener("click", (e) => {
+        e.preventDefault();
+        if (cooldownSec <= 0) triggerResend(currentChannel);
+      });
+    }
+
+    const switchBtn = wrap.querySelector("#wf-btn-switch-channel");
+    if (switchBtn) {
+      switchBtn.addEventListener("click", (e) => {
+        e.preventDefault();
+        const nextChannel = currentChannel === "whatsapp" ? "sms" : "whatsapp";
+        triggerResend(nextChannel);
+      });
+    }
+  }
 
+  renderScreen();
   return wrap;
 }