快速入门

快速开始

Name: Authon
Author: Authon

5分钟内为您的应用添加认证功能。

创建项目

登录Authon 控制台，创建新项目，并从 API 密钥部分复制您的 可公开密钥 。

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 包裹根组件，并传入您的可公开密钥：

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() Hook 在应用中任何位置访问当前用户：

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>
  );
}

完成！

您的应用现在已拥有完全托管的认证功能。用户可通过您在控制台中启用的任何登录方式进行登录。

重要：将用户同步到您的数据库

如果您的应用有自己的用户数据库，您需要设置 Webhook 来同步 Authon 用户。用户通过 Authon 注册后，不会自动出现在您应用的数据库中。请注册 Webhook（user.created、user.updated、user.deleted）以保持数据库同步。

设置 Webhook 用户同步 →

React SDK 参考

@authon/react 的完整 API 参考

Next.js SDK 参考

服务端组件、中间件等