시작하기

빠른 시작

Name: Authon
Author: Authon

5분 안에 앱에 인증을 추가하세요.

프로젝트 생성

Authon 대시보드에 로그인하고, 새 프로젝트를 만든 후 API Keys 섹션에서 Publishable Key 를 복사하세요.

pk_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

SDK 설치

프레임워크에 맞는 SDK를 설치하세요:

bash

# React / Next.js
npm install @authon/react

# Vue / Nuxt
npm install @authon/vue

# Vanilla JavaScript
npm install @authon/js

앱 감싸기

루트 컴포넌트를 AuthonProvider 로 감싸고 publishable key를 전달하세요:

src/main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { AuthonProvider } from "@authon/react";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <AuthonProvider publishableKey="pk_live_your_key">
      <App />
    </AuthonProvider>
  </React.StrictMode>
);

라우트 보호

SignedIn 와 SignedOut 컴포넌트로 콘텐츠를 조건부 렌더링하세요:

src/App.tsx

import {
  SignedIn,
  SignedOut,
  UserButton,
  SignIn,
  useUser,
} from "@authon/react";

export default function App() {
  return (
    <div>
      <header>
        <SignedIn>
          <UserButton />
        </SignedIn>
        <SignedOut>
          <SignIn mode="popup" />
        </SignedOut>
      </header>

      <main>
        <SignedIn>
          <Dashboard />
        </SignedIn>
        <SignedOut>
          <LandingPage />
        </SignedOut>
      </main>
    </div>
  );
}

사용자 데이터 접근

useUser() 훅으로 앱 어디서나 현재 사용자에 접근하세요:

src/Dashboard.tsx

import { useUser } from "@authon/react";

export default function Dashboard() {
  const { user, isLoaded } = useUser();

  if (!isLoaded) return <div>Loading...</div>;

  return (
    <div>
      <h1>Welcome, {user?.displayName}!</h1>
      <p>Email: {user?.email}</p>
      <p>User ID: {user?.id}</p>
    </div>
  );
}

완료!

앱에 완전 관리형 인증이 추가되었습니다. 사용자는 대시보드에서 활성화한 모든 제공자로 로그인할 수 있습니다.

중요: 데이터베이스와 유저 동기화

앱에 자체 유저 데이터베이스가 있다면 웹훅을 설정하여 Authon 유저를 동기화해야 합니다. Authon으로 가입한 유저는 웹훅 없이는 앱의 데이터베이스에 자동으로 나타나지 않습니다. user.created, user.updated, user.deleted 이벤트를 수신하는 웹훅을 등록하세요.

웹훅 유저 동기화 설정하기 →

React SDK 레퍼런스

@authon/react 전체 API 레퍼런스

Next.js SDK 레퍼런스

서버 컴포넌트, 미들웨어 등