Build WhatsApp OTP Login with AI Vibe Coding | WALoops
WALoops
Chat with us
smart_toy Build with an AI coding assistant

Vibe code a WhatsApp OTP login

Connect the WALoops MCP server to an MCP-compatible coding assistant and ask it to build an OTP flow for your app. The assistant can use tools to send a WhatsApp code and verify what the user enters.

Paste this prompt

WALoops REST API prompt
Add WhatsApp OTP login to this app using the WALoops REST API.
Send a code: POST https://app.waloops.com/api/otp/send.php
  headers: X-API-Key: <WALOOPS_API_KEY env var>, X-Site-Url: <this app's public URL>, Content-Type: application/json
  body: {"phone": "<international digits, e.g. 919876543210>"}
Verify: POST https://app.waloops.com/api/otp/verify.php with the same headers and {"phone": "...", "code": "<6 digits>"}; the response has "verified": true on success.
Call these only from server-side code (API route, server action or edge function), never from the browser. Keep the key in an environment variable. Codes are 6 digits, valid 5 minutes, max 5 wrong attempts, one resend per 30 seconds.

Works in Lovable, Bolt, Replit, v0, Cursor and Claude Code.

Copy-paste recipes

Keep requests on the server and store both environment variables in your deployment settings.

Next.js App Router · send and verify
// app/api/otp/send/route.ts
export async function POST(request: Request) {
  const { phone } = await request.json();
  const response = await fetch("https://app.waloops.com/api/otp/send.php", {
    method: "POST",
    headers: {
      "X-API-Key": process.env.WALOOPS_API_KEY!,
      "X-Site-Url": process.env.APP_URL!,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ phone }),
  });
  return Response.json(await response.json(), { status: response.status });
}

// app/api/otp/verify/route.ts
export async function POST(request: Request) {
  const { phone, code } = await request.json();
  const response = await fetch("https://app.waloops.com/api/otp/verify.php", {
    method: "POST",
    headers: {
      "X-API-Key": process.env.WALOOPS_API_KEY!,
      "X-Site-Url": process.env.APP_URL!,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ phone, code }),
  });
  return Response.json(await response.json(), { status: response.status });
}
Supabase Edge Function · send or verify
Deno.serve(async (request) => {
  const { action, phone, code } = await request.json();
  const verifying = action === "verify";
  const response = await fetch(
    verifying
      ? "https://app.waloops.com/api/otp/verify.php"
      : "https://app.waloops.com/api/otp/send.php",
    {
      method: "POST",
      headers: {
        "X-API-Key": Deno.env.get("WALOOPS_API_KEY")!,
        "X-Site-Url": Deno.env.get("APP_URL")!,
        "Content-Type": "application/json",
      },
      body: JSON.stringify(verifying ? { phone, code } : { phone }),
    },
  );
  return new Response(await response.text(), {
    status: response.status,
    headers: { "Content-Type": response.headers.get("Content-Type") ?? "application/json" },
  });
});
Plain PHP · cURL
$verify = false;
$endpoint = $verify
    ? 'https://app.waloops.com/api/otp/verify.php'
    : 'https://app.waloops.com/api/otp/send.php';
$payload = $verify
    ? ['phone' => $phone, 'code' => $code]
    : ['phone' => $phone];

$curl = curl_init($endpoint);
curl_setopt_array($curl, [
    CURLOPT_POST => true,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_HTTPHEADER => [
        'X-API-Key: ' . getenv('WALOOPS_API_KEY'),
        'X-Site-Url: ' . getenv('APP_URL'),
        'Content-Type: application/json',
    ],
    CURLOPT_POSTFIELDS => json_encode($payload),
]);
$response = curl_exec($curl);
if ($response === false) {
    throw new RuntimeException(curl_error($curl));
}
$status = curl_getinfo($curl, CURLINFO_HTTP_CODE);
curl_close($curl);

Using Claude Code or Cursor? Add the MCP server

The MCP server lets your coding assistant read the docs, send a test OTP (send_otp with site_url) and check usage while it builds. Your live app still calls the REST API above.

Keep these checks in your build

Frequently asked questions

What is vibe coding for WhatsApp OTP? expand_more
It is using an AI coding assistant to help build an OTP login flow. With the WALoops MCP server connected, the assistant can call tools to send and verify WhatsApp codes.
Does the AI assistant send OTPs by itself? expand_more
The assistant can call the WALoops tools while you build and test. Your finished app calls the OTP API as part of its own user flow.
Can I use a free key? expand_more
Yes. The free plan includes 100 WhatsApp OTPs a month from the WALoops shared number, with no Meta setup or credit card.
Where can I see API examples? expand_more
The WhatsApp OTP API guide has cURL, PHP, Node.js and Python examples, plus endpoint details, limits and pricing.
Join 500+ D2C Brands on WAloops

Build your first WhatsApp OTP flow

Connect the MCP server and start with 100 free OTPs a month.

✓ No credit card required   ✓ 7-day free trial   ✓ Cancel anytime