Why is adding SMS Authentication to a side project so painful?

Have you ever tried to add SMS-based identity verification to your toy project or startup MVP? The moment you start integrating an API, you are met with a mountain of bureaucratic requirements: business registration documents, proof of telecommunication service usage, and mandatory caller ID pre-registration. For solo developers or early-stage MVPs trying to validate a hypothesis quickly, these hurdles make it almost impossible to even begin.

Moreover, if you are building a frontend-centric project using Astro, spinning up a dedicated backend server (Node.js, Spring, etc.) just to handle a single SMS authentication endpoint feels like massive overkill.

Today, we'll explore how to implement a serverless SMS authentication flow using Astro Actions and frontend code only. We will be using EasyAuth, a developer-friendly SMS API that requires zero paperwork and can be set up in under 5 minutes.

---

The Solution: Astro Actions + EasyAuth

1. Astro Actions: Introduced in Astro 4.15, Actions provide a way to define type-safe backend functions (RPCs) that can be called directly from your client-side code. This means you can write server-side logic without setting up a separate API route or backend framework.
2. EasyAuth: The ultra-simple SMS API designed for developers.
   • ❌ Zero Paperwork: Start immediately with just an email—no business documents required.
   • ⚡ Instant Setup: API integration takes under 5 minutes (automatic caller ID provided).
   • 💰 Affordable Pricing: 15~25 KRW per message (up to 50% cheaper than traditional providers).
   • 🎁 Free Trial: Get 10 free test credits instantly upon sign-up.

---

Step 1: Project Setup and API Key Generation

First, sign up on the EasyAuth website to get your API Key. Because there are no document reviews or caller ID registration processes, you can find your EASYAUTH_API_KEY in your dashboard immediately after signing up.

Create a .env file at the root of your Astro project and add your generated key:

EASYAUTH_API_KEY=your_api_key_here

Step 2: Defining the Astro Action (Server Logic)

Create a file at src/actions/index.ts. We will define two actions: sendSms for dispatching the OTP (One-Time Password) and verifySms for checking it. EasyAuth only consists of two simple endpoints (POST /send and POST /verify), making integration highly intuitive.

// src/actions/index.ts
import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';

export const server = {
  sendSms: defineAction({
    accept: 'json',
    input: z.object({
      phone: z.string().regex(/^010\d{8}$/, 'Please enter a valid mobile number.'),
    }),
    handler: async (input) => {
      const res = await fetch('https://api.easyauth.co.kr/send', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${import.meta.env.EASYAUTH_API_KEY}`
        },
        body: JSON.stringify({ to: input.phone })
      });
      
      if (!res.ok) {
        const errorData = await res.json();
        throw new Error(errorData.message || 'Failed to send verification code.');
      }
      return { success: true };
    }
  }),

  verifySms: defineAction({
    accept: 'json',
    input: z.object({
      phone: z.string(),
      code: z.string().length(6, 'Verification code must be 6 digits.')
    }),
    handler: async (input) => {
      const res = await fetch('https://api.easyauth.co.kr/verify', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${import.meta.env.EASYAUTH_API_KEY}`
        },
        body: JSON.stringify({ to: input.phone, code: input.code })
      });
      
      if (!res.ok) {
        const errorData = await res.json();
        throw new Error(errorData.message || 'Invalid verification code.');
      }
      return { success: true };
    }
  })
};

Tip: Using zod from astro:schema ensures that data coming from the client (like phone number format and code length) is safely validated on the server side.

Step 3: Calling Actions from the Client

Now, let's create the user interface and call the Actions we just created using Vanilla JavaScript.

---
// src/pages/index.astro
import Layout from '../layouts/Layout.astro';
---


  <main>
    <h1>Mobile Verification</h1>
    
    <div>
      
      <div>
        Phone Number
        <div>
          
          Send
        </div>
      </div>

      
      <div>
        6-Digit Code
        <div>
          
          Verify
        </div>
      </div>
    </div>
  </main>

  

Tips & Best Practices for Production

1. Security Considerations (Rate Limiting) In a production environment, you must prevent malicious users from abusing your SMS endpoints and racking up charges. It is highly recommended to implement rate limiting via Astro middleware or utilize a CAPTCHA solution like Cloudflare Turnstile to block automated bot requests.

2. Protecting Environment Variables The EASYAUTH_API_KEY is only meant to be used inside src/actions/index.ts, which runs server-side. Never expose this key to your frontend clients by prefixing it with PUBLIC_!

Conclusion

By combining Astro Actions with EasyAuth, we've built a clean, fully functional SMS authentication system in just 5 minutes—without spinning up a backend server or filling out tedious paperwork.

• Infrastructure overhead? ➡️ Solved by Astro Actions
• Complex documents & high fees? ➡️ Solved by EasyAuth

If you're a solo developer or currently building a side project, you can get started right away without any paperwork. Sign up for EasyAuth today and claim your 10 free test credits. Launching your service MVP just got a whole lot easier!