Implementing SMS Mobile Verification with Vue 3 & Pinia in 5 Minutes (No Paperwork)

SMS Verification for Side Projects: Is Paperwork Really Necessary?

When developing a side project or startup MVP, the most exhausting part for developers isn't the technical challenge—it's the red tape. If you look into integrating an SMS verification API, you are usually blocked by complex procedures like submitting a business registration, carrier proofs, and pre-registering sender numbers.

This is where EasyAuth comes in. EasyAuth is a developer-friendly, ultra-simple SMS authentication API that lets you complete integration in just 5 minutes after signing up, with absolutely zero paperwork or sender number pre-registration required.

In this tutorial, we will build a production-ready SMS mobile verification form using Vue 3 (Composition API), Pinia for state management, and EasyAuth.

---

Why This Tech Stack?

1. Vue 3 Composition API: Maximizes logic reusability and keeps components clean.
2. Pinia: Manages the authentication state (sent status, verification status) globally, making it easily accessible across multiple components.
3. EasyAuth: Extremely simplifies backend/frontend communication with just two endpoints: /send and /verify.

---

1. Setting Up the Pinia Store (State Management)

First, let's create a Pinia Store to handle the authentication state and API calling logic. EasyAuth's API structure is highly intuitive, making this code very straightforward.

// src/stores/useAuthStore.js
import { defineStore } from 'pinia';
import { ref } from 'vue';

export const useAuthStore = defineStore('auth', () => {
  const isSent = ref(false);
  const isVerified = ref(false);
  const errorMsg = ref('');

  // 1. Send Verification Code (EasyAuth POST /send)
  const sendVerification = async (phone) => {
    try {
      // Note: In production, route this through a backend proxy for security.
      const res = await fetch('https://api.easyauth.co.kr/send', {
        method: 'POST',
        headers: { 
          'Content-Type': 'application/json', 
          'Authorization': 'Bearer YOUR_EASYAUTH_API_KEY' 
        },
        body: JSON.stringify({ to: phone })
      });
      
      if (res.ok) {
        isSent.value = true;
        errorMsg.value = '';
      } else {
        errorMsg.value = 'Failed to send. Please check the number.';
      }
    } catch (e) {
      errorMsg.value = 'Network error occurred.';
    }
  };

  // 2. Verify Code (EasyAuth POST /verify)
  const verifyCode = async (phone, code) => {
    try {
      const res = await fetch('https://api.easyauth.co.kr/verify', {
        method: 'POST',
        headers: { 
          'Content-Type': 'application/json',
          'Authorization': 'Bearer YOUR_EASYAUTH_API_KEY' 
        },
        body: JSON.stringify({ to: phone, code })
      });

      if (res.ok) {
        isVerified.value = true;
        errorMsg.value = '';
      } else {
        errorMsg.value = 'Invalid or expired verification code.';
      }
    } catch (e) {
      errorMsg.value = 'Error occurred during verification.';
    }
  };

  return { isSent, isVerified, errorMsg, sendVerification, verifyCode };
});

---

2. Implementing the Vue 3 Component (UI)

Now, let's build the view that users will interact with, based on the Store we just created.

  <div>
    <h2>Mobile Verification</h2>
    
    
    <div>
      
      <div>
        
        
          {{ authStore.isSent ? 'Code Sent' : 'Send Code' }}
        
      </div>

      
      <div>
        
        
          Verify
        
      </div>
    </div>

    
    <p>
      {{ authStore.errorMsg }}
    </p>

    
    <div>
      <p>✅ Verification successful!</p>
    </div>
  </div>

---

💡 Tips & Best Practices

1. Add a Countdown Timer: For better UX, implement a 3-minute (180 seconds) countdown timer after the verification code is sent.
2. Enhance Error Handling: Add a "Resend" button and debounce logic to prevent users from spamming the send button.
3. Security Considerations (Important): In the example above, we called the API directly from the frontend for simplicity. In a real production environment, you should route these calls through a backend proxy (e.g., Next.js API Routes, Express, Spring) to prevent exposing your API Key.

---

Conclusion: The Best Choice for Solo Devs & Startups

In the past, integrating mobile verification could take 2-3 weeks and a mountain of paperwork. But with EasyAuth, you can integrate an SMS verification feature in just 5 minutes after signing up—without any paperwork or manual sender ID registration.

• Zero Paperwork: Start immediately without a business registration certificate.
• Cost-Effective: Only 15~25 KRW per message, significantly cheaper than the standard 30~50 KRW.
• Early Perks: Get 10 free trial credits upon signup.

If you need to add SMS verification to your toy project or MVP, stop wandering around and integrate quickly with EasyAuth today!