우리가 Self-Hosted Clerk 대안을 만든 이유 (그리고 Open-Sourced한 이유)

Source: Dev.to

Authentication is the first thing every web app needs and the last thing anyone wants to build from scratch.
우리는 Clerk, Auth0, 그리고 Supabase Auth를 시도했지만, 각각 동일한 문제에 부딪혔습니다. 이것이 우리가 Authon—무료이며 자체 호스팅 가능한 인증 플랫폼—을 구축하고 오픈소스로 공개한 이유에 대한 이야기입니다.

호스팅 인증의 문제점

1. 가격이 매출보다 빠르게 상승

Clerk는 10 k를 초과하는 MAU당 $0.02를 청구하고, Auth0 Essentials는 MAU당 $0.07를 청구합니다. 부트스트랩된 스타트업에게는 이 비용이 큰 부담이 됩니다. 인증은 사용자 수가 아니라 컴퓨팅 비용에 맞춰 확장되어야 합니다.

2. 공급업체 종속이 현실이다

Importing @clerk/nextjs, using “, and calling clerkClient.users.getUser() ties your code to Clerk. Switching providers forces a massive rewrite.
Firebase Auth is even tighter: Firestore security rules reference request.auth, Cloud Functions use auth triggers, and user IDs are Firebase‑specific. Migrating away becomes a multi‑week project.

3. 데이터 주권

Hosted auth services store credentials, sessions, and personal data on third‑party servers. For regulated industries (healthcare, finance) or regions with strict data‑privacy laws (EU), this is often unacceptable.

4. 우리가 필요로 했던 누락된 기능들

솔루션: Authon

• Self‑hosted, always free – 자체 서버에서 실행; 사용자당 비용이 전혀 없습니다.
• Drop‑in SDKs – 한 줄로 모든 프레임워크에 인증을 추가합니다.
• ShadowDOM isolation – 로그인 모달이 캡슐화되어 CSS 충돌을 방지합니다.
• Web3 native – 지갑 인증이 일등 시민으로 다루어지며, 사후 고려 사항이 아닙니다.

Authon이 하는 일

인증 방법

• 이메일 / 비밀번호 (회원가입, 로그인, 비밀번호 재설정)
• OAuth (Google, Apple, GitHub, Discord, Facebook, Microsoft, Kakao, Naver, LINE, X)
• 비밀번호 없는 인증 (매직 링크, 이메일 OTP)
• 패스키 (WebAuthn) – 전체 라이프사이클: 등록, 인증, 목록 조회, 이름 변경, 폐기
• Web3 지갑 – EVM (MetaMask, WalletConnect, Coinbase Wallet, Trust Wallet) 및 Solana (Phantom)

보안

• MFA (TOTP) – Google Authenticator / Authy 호환, 백업 코드 제공
• 세션 관리 – 활성 세션 목록, 개별 폐기
• 감사 로그 – 모든 인증 이벤트가 추적됨

플랫폼 기능

• 조직 – 다중 테넌트 지원 및 역할 (소유자, 관리자, 멤버)
• JWT 템플릿 – 커스텀 클레임 매핑
• 웹훅 – 서명된 페이로드를 포함한 10가지 이벤트 유형
• 브랜딩 – 전체 테마 (색상, 로고, 커스텀 CSS, 로케일)
• 관리자 대시보드 – 사용자 관리, 분석, 설정

6개 언어에 걸친 15개의 SDK

우리는 React 전용 SDK만 제공하고 나머지는 사용자가 직접 해결하도록 두고 싶지 않았습니다. Django, FastAPI, Gin, Flutter, SwiftUI 등 어떤 환경으로 개발하든—첫 번째 파티 SDK가 준비되어 있습니다.

How It Works

React Example

import {
  AuthonProvider,
  SignedIn,
  SignedOut,
  UserButton,
  useAuthon,
} from '@authon/react';

function App() {
  return (
    
      
        
        
      

      
        
      
    
  );
}

function SignInButton() {
  const { openSignIn } = useAuthon();
  return Sign in;
}

openSignIn()은 대시보드에서 구성한 모든 제공자를 포함한 ShadowDOM 모달을 렌더링합니다.

Next.js Middleware

import { authMiddleware } from '@authon/nextjs';

export default authMiddleware({
  publicRoutes: ['/', '/sign-in', '/pricing'],
});

export const config = {
  matcher: ['/((?!_next|.*\\..*).*)'],
};

세 줄의 설정만으로 모든 비공개 라우트를 보호합니다.

Express Backend

import { expressMiddleware } from '@authon/node';

app.use(
  '/api',
  expressMiddleware({
    secretKey: process.env.AUTHON_SECRET_KEY!,
  })
);

app.get('/api/profile', (req, res) => {
  res.json({ user: req.auth });
});

미들웨어는 JWT를 검증하고, 사용자를 디코딩한 뒤 req.auth에 첨부합니다.

Web3 Sign‑In

const authon = new Authon('pk_live_...');

// 1️⃣ Get a nonce for the wallet to sign
const { message } = await authon.web3GetNonce(address, 'evm', 'metamask');

// 2️⃣ User signs the message in MetaMask
const signature = await ethereum.request({
  method: 'personal_sign',
  params: [message, address],
});

// 3️⃣ Verify the signature and obtain a session
const user = await authon.web3Verify(
  message,
  signature,
  address,
  'evm',
  'metamask'
);

타사 플러그인이나 추가 서비스가 필요 없습니다—네이티브 지갑 인증만 제공됩니다.

Authon은 인증 비용, 데이터 주권 및 기능 세트에 대한 완전한 제어 권한을 제공하면서, 모든 주요 플랫폼에서 통합을 간단하게 유지합니다. 🚀

Plex 통합

Web3 인증은 핵심 SDK에 내장되어 있습니다.

ShadowDOM: 왜 중요한가

대부분의 인증 솔루션은 UI를 직접 DOM에 주입하거나 iframe을 사용합니다. 두 방법 모두 문제점이 있습니다:

• 직접 DOM 주입 – 앱의 CSS가 인증 모달에 영향을 줄 수 있습니다. * { box-sizing: border-box; } 규칙, 전역 폰트 오버라이드, 혹은 높은 z‑index 요소가 로그인 폼을 깨뜨릴 수 있습니다.
• Iframe – 작동은 하지만 UX 마찰을 유발합니다 (스크롤 컨텍스트가 다르다, 일부 브라우저에서 차단될 수 있다, 테마 적용이 어려움).

Authon은 ShadowDOM을 사용합니다. 모달은 완전히 앱 스타일과 격리된 shadow root 안에서 렌더링됩니다. 여러분의 CSS가 새어 들어올 수 없고, 모달의 스타일도 밖으로 새어 나가지 않습니다. 매번 그대로 작동합니다.

비교

오픈 소스

Authon SDK는 MIT 라이선스를 가지고 있으며 GitHub에서 이용 가능합니다: .
모노레포에는 15개의 SDK가 모두 포함되어 있으며, 완전한 타입 지정과 전체 문서가 제공됩니다.

git clone https://github.com/mikusnuz/authon-sdk.git
cd authon-sdk
pnpm install
pnpm build

시작하기

Authon을 가장 빠르게 사용해 보기:

npx create-authon-app my-app --framework nextjs

이 명령은 Authon이 사전 구성된 Next.js 앱을 생성합니다 – 공급자, 미들웨어, 로그인 페이지 및 대시보드가 포함됩니다.

또는 수동으로 설치

npm install @authon/nextjs @authon/js

문서:
GitHub:
웹사이트:

다음 단계

우리는 현재 다음을 활발히 개발하고 있습니다:

• SMS/전화 인증
• SAML 및 OIDC 연동
• 익명 인증
• 속도 제한 및 봇 탐지
• 추가 OAuth 제공자

인증당 비용을 지불하는 것이 지겹거나, 자체 호스팅 패키지에서 Web3/패스키/MFA가 필요하다면 Authon을 사용해 보세요. 여러분의 피드백을 기다립니다.