비트베이크

Integrating Custom SMS Auth in Next.js + Clerk in 5 Minutes via Webhook (Zero Paperwork)

2026-05-11T01:02:21.146Z

A professional, modern, and clean tech image featuring abstract digital lines and geometric shapes, suitable for developer authentication content with text overlay.

The Dilemma of SMS Authentication in Side Projects

If you are a Next.js developer building a side project or a startup MVP, you have likely chosen Clerk as your primary authentication solution. It is universally loved for its seamless integration of social logins and email magic links. However, when you decide to implement Phone Number Login (SMS OTP)—especially when targeting regions with strict telecom regulations like South Korea—you hit a massive roadblock.

Traditional SMS API providers demand an exhausting amount of paperwork before you can send a single text message:

  • Business Registration Certificates
  • Proof of Telecom Service Subscription
  • Mandatory Sender ID Pre-registration (which can take 1 to 3 business days to be approved)

As a solo developer or a freelance engineer, you just want to launch your MVP this weekend. You don't have the time or the business entity set up to deal with days of bureaucratic red tape. So, is there a way to integrate custom SMS authentication instantly, with zero paperwork?

The Solution: Clerk Custom Webhooks + EasyAuth

The answer is a resounding yes. You can build a robust, production-ready SMS authentication flow in under 5 minutes with absolutely no paperwork.

The secret lies in combining Clerk's Custom SMS Webhook feature with EasyAuth, a developer-centric SMS API designed for speed and simplicity.

In this architecture, Clerk handles the heavy lifting of user management, OTP code generation, and verification. It simply delegates the actual delivery of the SMS message to your Next.js server via a webhook. Your server then forwards this message to EasyAuth, which dispatches the SMS instantly.

Why EasyAuth is the Ultimate Developer Tool

  • Zero Paperwork: Forget about submitting business licenses or telecom proofs.
  • Instant Setup: Sign up, get your API key, and complete the API integration in 5 minutes.
  • Automated Sender ID: No need to pre-register and wait days for a sender number approval.
  • Highly Cost-Effective: At just 15~25 KRW per message, it is significantly cheaper than legacy providers (which charge 30~50 KRW). Plus, you get 10 free SMS upon signup to test your MVP immediately.

Step-by-Step Implementation Guide

Step 1. Configure the Webhook in the Clerk Dashboard

First, we need to instruct Clerk to notify our Next.js application whenever it generates an OTP that needs to be sent via SMS.

  1. Navigate to your Clerk Dashboard and open the [Webhooks] section.
  2. Click on Add Endpoint.
  3. Enter your Endpoint URL. If your Next.js app is running locally, use a tool like ngrok to expose your localhost (e.g., https://your-ngrok-url.app/api/webhooks/clerk-sms).
  4. Under 'Message Filtering', select the sms.created event.
  5. Once the webhook is created, copy the Signing Secret provided by Clerk. You will need to save this in your .env.local file.
CLERK_WEBHOOK_SECRET=whsec_your_clerk_secret
EASYAUTH_API_KEY=ea_your_easyauth_api_key

Step 2. Create the Next.js Webhook Route

We will be using the Next.js App Router. Create a new file at app/api/webhooks/clerk-sms/route.ts.

Security is paramount when dealing with webhooks. To ensure that the incoming requests are legitimately coming from Clerk and not a malicious actor, we will use the svix package to verify the webhook signatures.

npm install svix @clerk/nextjs

Step 3. Dispatch the SMS via EasyAuth API (Complete Code)

EasyAuth offers a beautifully simple two-endpoint API architecture:

  • POST /send - To dispatch an SMS.
  • POST /verify - To verify an OTP.

Because Clerk natively handles the verification of the OTP when using the webhook integration, we only need to utilize EasyAuth's POST /send endpoint.

Below is the complete, copy-pasteable code for your webhook route:

// app/api/webhooks/clerk-sms/route.ts
import { Webhook } from 'svix';
import { WebhookEvent } from '@clerk/nextjs/server';

export async function POST(req: Request) {
  const WEBHOOK_SECRET = process.env.CLERK_WEBHOOK_SECRET;
  
  if (!WEBHOOK_SECRET) {
    throw new Error('Please add CLERK_WEBHOOK_SECRET from Clerk Dashboard to .env or .env.local');
  }

  // 1. Extract Svix headers from the incoming request
  const svix_id = req.headers.get("svix-id");
  const svix_timestamp = req.headers.get("svix-timestamp");
  const svix_signature = req.headers.get("svix-signature");

  if (!svix_id || !svix_timestamp || !svix_signature) {
    return new Response('Error: Missing Svix headers', {
      status: 400
    });
  }

  // 2. Parse the request body and verify the signature
  const payload = await req.json();
  const body = JSON.stringify(payload);
  const wh = new Webhook(WEBHOOK_SECRET);

  let evt: WebhookEvent;

  try {
    evt = wh.verify(body, {
      "svix-id": svix_id,
      "svix-timestamp": svix_timestamp,
      "svix-signature": svix_signature,
    }) as WebhookEvent;
  } catch (err) {
    console.error('Error verifying webhook:', err);
    return new Response('Error verifying webhook signature', { status: 400 });
  }

  // 3. Process the sms.created event and trigger EasyAuth
  if (evt.type === 'sms.created') {
    const { phone_number, message } = evt.data;

    try {
      // Call EasyAuth's /send endpoint
      const easyAuthRes = await fetch('https://api.easyauth.co.kr/send', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${process.env.EASYAUTH_API_KEY}`
        },
        body: JSON.stringify({
          to: phone_number,
          text: message // This contains the OTP generated by Clerk
        })
      });

      if (!easyAuthRes.ok) {
        throw new Error('Failed to dispatch SMS via EasyAuth');
      }

      console.log(`SMS successfully dispatched to ${phone_number}`);
    } catch (error) {
      console.error('Failed to send SMS:', error);
      // Returning a 500 status will let Clerk know the delivery failed
      return new Response('Failed to deliver SMS', { status: 500 });
    }
  }

  // Acknowledge receipt of the webhook
  return new Response('Webhook processed successfully', { status: 200 });
}

Tips & Best Practices

  1. Never Skip Security Verification: Your webhook endpoint is public. If you skip the Svix signature verification, anyone who discovers your endpoint URL could exploit it to send SMS messages at your expense.
  2. Handle Errors Gracefully: Always wrap your external API calls in a try-catch block. If the EasyAuth API call fails (due to invalid phone numbers or unexpected network issues), returning a non-200 status code allows Clerk to mark the SMS delivery as failed in their dashboard.
  3. Fully Custom Auth Flows: If your project scales and you decide to migrate away from Clerk to build a 100% custom authentication system, you don't need to change your SMS provider. EasyAuth provides an equally simple POST /verify endpoint, allowing you to manage the entire generation, dispatch, and validation lifecycle internally with just a few lines of code.

Conclusion

By leveraging Clerk's Custom SMS Webhooks alongside EasyAuth, you can completely sidestep the bureaucratic nightmare of traditional telecom APIs.

As developers, our time is best spent writing business logic and shipping core features—not filling out business registration forms or waiting days for sender ID approvals. If you are a freelancer, a solo dev, or part of a startup team trying to move fast, EasyAuth is the perfect zero-paperwork solution designed explicitly for you.

Start immediately, launch your MVP in 5 minutes, and take advantage of the 10 free SMS credits available upon signup. Happy coding!

비트베이크에서 광고를 시작해보세요

광고 문의하기

다른 글 보기

2026-06-16T05:01:55.625Z

2026 다이소 여름 신상/인기템! 시원한 여름 꿀템 총정리

2026년 다이소 여름 신상부터 인기 쿨링템, 장마철 필수품, 홈캉스 아이템까지! 가성비 넘치는 다이소 여름 꿀템으로 시원하고 쾌적한 여름을 준비하는 완벽 가이드.

2026-06-16T05:01:31.367Z

지속 가능한 국내 워케이션: 2026년 숨은 보석 여행지

2026년 국내 워케이션 트렌드는 지속가능한 여행과 만납니다. 디지털 디톡스, 친환경 숙소, 로컬 체험을 통해 몸과 마음을 치유하고 지역 경제 활성화에 기여하는 숨은 명소 3곳을 소개합니다. 지금 바로 나만의 지속 가능한 워케이션을 계획해보세요!

2026-06-16T05:01:30.087Z

2026년 최신 의학 트렌드: AI와 정밀의료로 여는 초개인화 건강관리

2026년, AI와 정밀의료가 이끄는 초개인화 건강관리 시대가 열렸습니다. 딥러닝 기반 진단, 유전체 맞춤 치료, 웨어러블 및 디지털 치료제가 일상 속 건강을 혁신합니다. 미래 의학의 도전 과제와 현명한 건강 관리법을 알아보세요.

2026-06-16T05:01:16.613Z

2026 가을/겨울 출산준비물: 신생아 육아템 필수템 총정리

2026년 가을/겨울 출산을 앞둔 예비맘들을 위한 완벽 가이드! 최신 트렌드를 반영한 신생아 육아템 필수템부터 대형 육아용품 비교, 스마트한 케어 및 수유 용품, 쌀쌀한 날씨 대비 아기옷, 그리고 알뜰 구매 팁까지 모든 출산준비물을 총정리했습니다.

서비스

피드자주 묻는 질문고객센터

문의

비트베이크

레임스튜디오 | 사업자 등록번호 : 542-40-01042

경기도 남양주시 와부읍 수례로 116번길 16, 4층 402-제이270호

트위터인스타그램네이버 블로그