시작하기

빠른 시작

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

# Node.js (server-side)
npm install @authon/node

앱 감싸기

루트 컴포넌트를 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>
  );
}

완료!

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

React SDK 레퍼런스

@authon/react 전체 API 레퍼런스

Next.js SDK 레퍼런스

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