Playground API
Stop Waiting for the Backend • Part 21 of 122 min read•2026-09-20

How to Test Email & SMS Verification (OTP & Magic Links) in React Without Twilio or SendGrid

Learn how to test OTP verification codes, magic links, email templates, and SMS alerts using Playground API's Virtual Web Inbox.

NK
Nilesh Kumar
Creator of Playground API
How to Test Email & SMS Verification (OTP & Magic Links) in React Without Twilio or SendGrid

How to Test Email & SMS Verification (OTP & Magic Links) in React Without Twilio or SendGrid

Building authentication and onboarding flows often requires sending transactional emails and SMS messages:

  • 6-digit OTP verification codes (Two-Factor Auth / Phone login).
  • Passwordless magic login links.
  • Welcome emails and invoice receipts.

Testing these flows during local development usually requires setting up Mailtrap, Twilio, or SendGrid accounts, which cost money and slow down automated testing suites.

Playground API now provides a dedicated Virtual In-Browser Email & SMS Web Inbox!

1. Dispatching Virtual Emails & SMS Messages

Send transactional communications via simple REST endpoints:

typescript
1
// Sending a magic login link email
2
await fetch('https://playground.nileslabs.com/api/v1/emails', {
3
method: 'POST',
4
headers: { 'Content-Type': 'application/json' },
5
body: JSON.stringify({
6
to: 'user@example.com',
7
subject: 'Your Magic Login Link',
8
html: '<p>Click here to login: <a href="http://localhost:3000/auth/verify?token=tok_987">Log In</a></p>',
9
}),
10
});
11
12
// Sending an OTP SMS message
13
await fetch('https://playground.nileslabs.com/api/v1/sms', {
14
method: 'POST',
15
headers: { 'Content-Type': 'application/json' },
16
body: JSON.stringify({
17
to: '+15551234567',
18
message: 'Your verification code is 849201. Valid for 5 minutes.',
19
}),
20
});

2. Real-Time In-Browser Web Inbox

Instead of checking an external email inbox, navigate to:

👉 https://playground.nileslabs.com/docs/inbox

The virtual inbox displays:

  • 📬 Live Message List: Incoming emails and SMS messages appear instantly with zero page reloads.
  • 🔑 Automatic OTP Parser: Automatically extracts 6-digit verification codes into a 1-click copy badge.
  • 🌐 HTML Email Previewer: Render responsive email templates, inspect raw HTML, and click test links.
  • 📱 SMS Device View: Visual phone screen displaying simulated SMS bubbles.

3. Automated E2E Testing with Playwright & Cypress

Query messages programmatically in your automated test suites:

typescript
1
// In Playwright / Cypress
2
const res = await request.get('https://playground.nileslabs.com/api/v1/inbox?to=user@example.com');
3
const { messages } = await res.json();
4
const otpCode = messages[0].otp_code; // e.g. "849201"
5
6
// Fill OTP into React form
7
await page.fill('input[name="otp"]', otpCode);
8
await page.click('button[type="submit"]');

4. Interactive Inbox Studio

Explore email sending, OTP extraction, and live templates directly in the documentation:

👉 https://playground.nileslabs.com/docs/inbox

Conclusion

Test authentication flows, magic links, and OTP codes effortlessly with Playground API!

Tags:#react#webdev#javascript#security
Series: Stop Waiting for the Backend
Part 21 of 12
Previous Article (#20)
How to Test Stripe Checkout & 3D Secure in React Without Real API Keys
Next Article (#22)
How to Test Flaky APIs & Chaos Network Engineering in React

Try Playground API in Your Own App

Stateful mock REST & GraphQL API with private sandbox overlays.

Quickstart GuideOpen Interactive Studio