はじめに

クイックスタート

5分以内にアプリに認証を追加。

プロジェクトの作成

Authonダッシュボードにサインインし、新しいプロジェクトを作成して、API KeysセクションからあなたのPublishable Keyをコピーしてください。 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リファレンス

サーバーコンポーネント、ミドルウェアなど