Implementing SMS Mobile Authentication in SvelteKit 5 in 5 Minutes Using Form Actions (Zero Paperwork)

🚀 The Nightmare of SMS Verification

When building a side project or a startup MVP, implementing SMS mobile authentication (OTP) is often a major roadblock. Legacy SMS providers usually demand a mountain of paperwork: business registration certificates, telecommunication service proofs, and pre-registering a caller ID.

For solo developers, freelancers, or early-stage startups that need to validate their hypotheses quickly, this bureaucratic process is incredibly frustrating.

In this article, we'll explore how to implement SMS verification in just 5 minutes using SvelteKit 5 Form Actions and EasyAuth—a developer-friendly SMS API that requires zero paperwork.

💡 SvelteKit Form Actions meet EasyAuth

SvelteKit's Form Actions allow you to handle form submissions elegantly on the server side without writing complex client-side JavaScript. By adding use:enhance, you get a seamless, progressive UX without full page reloads.

EasyAuth's API structure is wonderfully simple and pairs perfectly with Form Actions, consisting of just two endpoints:

POST /send : Sends the verification code
POST /verify : Verifies the code

🛠️ Step-by-Step Implementation Guide

1. Building the Client UI (`+page.svelte`)

First, let's create a form to input the phone number and another to enter the verification code once the SMS is sent.



<h2>SMS Verification</h2>



  
  
    {form?.sent ? 'Code Sent' : 'Send OTP'}
  



{#if form?.sent &amp;&amp; !form?.success}

  
  
  
  Verify

{/if}


{#if form?.success}
  <p>✅ Verification successful!</p>
{/if}
{#if form?.error}
  <p>❌ {form.error}</p>
{/if}

2. Server-side Actions (`+page.server.ts`)

Now, let's define the actions object to communicate with the EasyAuth API securely from the server.

import { fail } from '@sveltejs/kit';
import type { Actions } from './$types';

// Load your API key from environment variables
// Use $env/dynamic/private in a real production app
const EASYAUTH_API_KEY = 'YOUR_EASYAUTH_API_KEY';

export const actions = {
  send: async ({ request }) =&gt; {
    const data = await request.formData();
    const phone = data.get('phone')?.toString();

    if (!phone) {
      return fail(400, { error: 'Phone number is required.' });
    }

    try {
      const response = await fetch('https://api.easyauth.kr/send', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${EASYAUTH_API_KEY}`
        },
        body: JSON.stringify({ phone })
      });

      if (!response.ok) throw new Error('Failed to send');
      
      return { sent: true, phone };
    } catch (err) {
      return fail(500, { error: 'Failed to send verification code.' });
    }
  },

  verify: async ({ request }) =&gt; {
    const data = await request.formData();
    const phone = data.get('phone')?.toString();
    const code = data.get('code')?.toString();

    if (!phone || !code) {
      return fail(400, { error: 'Phone number and code are required.' });
    }

    try {
      const response = await fetch('https://api.easyauth.kr/verify', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${EASYAUTH_API_KEY}`
        },
        body: JSON.stringify({ phone, code })
      });

      if (!response.ok) throw new Error('Verification failed');

      return { success: true };
    } catch (err) {
      return fail(400, { error: 'Invalid or expired verification code.' });
    }
  }
} satisfies Actions;

💡 Tips & Best Practices

Progressive Enhancement: Thanks to SvelteKit's use:enhance, this flow works seamlessly without full page reloads if JavaScript is enabled, but gracefully falls back to native HTML form submissions if JavaScript fails.
Security & Rate Limiting: In a production environment, make sure to implement rate limiting within your +page.server.ts to prevent malicious actors from spamming the /send endpoint.

🎉 Conclusion: EasyAuth, Built for Developers

Integrating SMS authentication in SvelteKit 5 is a breeze when you combine Form Actions with EasyAuth. For indie hackers and startup developers, EasyAuth offers unbeatable advantages:

Zero Paperwork: No business registration required. Sign up and get your API key instantly.
Automated Caller ID: Skip the tedious caller ID pre-registration process.
Cost-Effective: At just 15~25 KRW per message, it's nearly half the price of legacy providers (30~50 KRW).

Ready to get started? Sign up for EasyAuth today and claim your 10 free test credits to verify your SvelteKit integration immediately!