How to Send OTP in Ionic (Capacitor) — 2026

Ionic with Capacitor remains a popular cross-platform path for Indian agencies and SMB SaaS. This tutorial wires StartMessaging on top of your existing Node backend.

Setup

ionic start otp-ionic blank --type angular --capacitor
cd otp-ionic
npm install @capacitor-community/sms-retriever

Angular Service

// src/app/otp.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class OtpService {
  private base = 'https://your-backend.example.com';
  constructor(private http: HttpClient) {}

  send(phone: string) {
    return this.http.post<{ requestId: string }>(`${this.base}/auth/send-otp`, { phoneNumber: phone });
  }
  verify(requestId: string, otpCode: string) {
    return this.http.post<{ verified: boolean }>(`${this.base}/auth/verify-otp`, { requestId, otpCode });
  }
}

Login Page

// src/app/login/login.page.ts
export class LoginPage {
  phone = ''; code = ''; requestId: string | null = null;
  constructor(private otp: OtpService) {}
  async send() {
    const r = await firstValueFrom(this.otp.send(this.phone));
    this.requestId = r.requestId;
  }
  async verify() {
    await firstValueFrom(this.otp.verify(this.requestId!, this.code));
  }
}

SMS Auto-Fill via Capacitor

import { SmsRetriever } from '@capacitor-community/sms-retriever';

const result = await SmsRetriever.startWatch();
const code = result.message.match(/\d{6}/)?.[0];

FAQ

Flutter equivalent at our Flutter guide.