@agg-building/auth (英语)

模块连接 / 签名 UI 和 认证方法适配器 恶作剧 预测市场聚合物。 掉进一个 ConnectButton选择 认证您想要启用的方法( SIWE, SIWS, Google, Apple, Twitter/ X, 电子邮件 magic-link) 和飞船 .

这是什么

@agg-build/auth 将特定供应商的认证集成从 @agg-build/ui。作为单独适配器的每一种认证方法 —— 钱包提供者( SIWE, SIWS) 停留在子路径导入后, 因此它们的端口依赖性仅是 当你真正启用它们时就停了下来. AggAuthProvider 将流端对流端进行曲调: 打开选择器、 驱动钱包签名、 重定向到 OAuth 提供者、 电子邮件魔法 链接,处理后方向代码交换,透明地解决 Cloudflare Turnstile 当API需要时,挑战.

何时使用此软件包

• 您想要AGG的连接/ 登录 UX 不重建它 .
• 您想要只启用您的应用程序支持的认证方法 .
• 您想要重定向回调处理( OAuth + mail magic- link) 为您解析 .
• 你想要Cloudflare Turnstile 挑战处理系统.

如果您喜欢滚动自己的钱包, 请跳过此包并使用 useAggAuth 从 @agg-build/hooks 直接说.

安装

核心软件包:

npm install @agg-build/sdk @agg-build/hooks @agg-build/ui @agg-build/auth liveline

只添加您需要的可选对等器 :

# SIWE / Ethereum
npm install wagmi viem

# SIWS / Solana
npm install @solana/wallet-adapter-react bs58

Google、苹果、Twitter/X和电子邮件的魔法链接流量不需要任何额外的同行 由 SDK 驱动的纯重定向流量 .

快开始

import "@agg-build/ui/styles.css";
import { QueryClient, QueryClientProvider } from "@agg-build/hooks";
import { createAggClient } from "@agg-build/sdk";
import { AggProvider } from "@agg-build/ui";
import {
  AggAuthProvider,
  ConnectButton,
  createAppleAuthMethod,
  createEmailAuthMethod,
  createGoogleAuthMethod,
  createTwitterAuthMethod,
} from "@agg-build/auth";
import { useSiweAuthMethod } from "@agg-build/auth/siwe";
import { useSiwsAuthMethod } from "@agg-build/auth/siws";
import { WagmiProvider } from "wagmi";
import { wagmiConfig } from "./wagmi-config";

const client = createAggClient({
  appId: "your-app-id",
  baseUrl: "https://api.agg.market",
});
const queryClient = new QueryClient();

function AuthActions() {
  const siwe = useSiweAuthMethod({ statement: "Sign in to AGG" });
  const siws = useSiwsAuthMethod({ cluster: "mainnet", statement: "Sign in to AGG" });

  return (
    <AggAuthProvider
      methods={[
        siwe,
        siws,
        createGoogleAuthMethod(),
        createAppleAuthMethod(),
        createTwitterAuthMethod(),
        createEmailAuthMethod(),
      ]}
    >
      <ConnectButton />
    </AggAuthProvider>
  );
}

export default function App() {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <AggProvider client={client}>
          <AuthActions />
        </AggProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

AggAuthProvider 监视挂载上的当前 URL。 对于重定向方法,它读取 code 查询参数, 调用 client.exchangeAuthCode(code),然后清理 URL。 没有额外 如果用户返回同一应用程序,则需要设置.

专用召回路线

如果您的应用路径重定向到一个单独的回调页面, 请将交换水分给自己 useAggAuthCallback数字 :

import { useAggAuthCallback } from "@agg-build/auth";

export function AuthCallbackPage() {
  const { error, isHandled, isHandling, user } = useAggAuthCallback();

  if (isHandling) return <p>Finishing sign-in…</p>;
  if (error) return <p>{error.message}</p>;
  if (isHandled) return <p>Signed in as {user?.id}</p>;

  return <p>No AGG auth callback data was found.</p>;
}

呼回钩采用同一种食谱:

1. 分析 code 查询参数.
2. 打电话 client.exchangeAuthCode(code)。 。 。 .
3. 删除 code 从 URL 通过 window.history.replaceState(...)。 。 。 .

转折的挑战

AGG API 返回时 challenge_required, (中文(简体) ), AggAuthProvider 自动使 a Cloudflare Turnstile 部件, 提交已解决的符号, 并重试请求 。 部件是 如果用户的环境阻断了Turnstile, 则无法识别成功, 并优雅地降解。 你没有 需要直接渲染或配置部件.

可用的认证方法

通过您想要启用的方法 AggAuthProvider - 那个 ConnectButton 仅选择列表 包括方法.

自定义重定向 URL/ 导航

基于再定向的适配器接受一个 redirectUrl 和可选 navigate 函数 :

createGoogleAuthMethod({
  redirectUrl: "https://yourapp.com/auth/callback",
  navigate: (url) => window.top?.location.assign(url),
});

自定义钱包拾取器( SIWE)

useSiweAuthMethod 接受可选选项 connectorPicker 来制作您的钱包选择模式 改为 wagmi默认值 :

const siwe = useSiweAuthMethod({
  connectorPicker: async (connectors) => showMyWalletModal(connectors),
});

ConnectButton 道具

认证时,按钮会随动作按钮倒入用户的配置文件芯片 (保存,退出,配置,断开). 用回调道具把它们接到你的应用程序上 导航或模式系统.

主要出口

建筑

• @agg-build/sdk 拥有 auth API 调用和会话键存储 .
• @agg-build/hooks 内部拥有共享认证/会话状态 AggProvider。 。 。 .
• @agg-build/ui 舰只使用通用UI原始.
• @agg-build/auth 船舶认证方法适配器+连接/签名 UX.

入境点

同伴依赖关系

要求 :

• @agg-build/hooks
• @agg-build/ui
• react ^18.0.0或^19.0
• react-dom ^18.0.0或^19.0

可选(与特定适配器挂钩):

• wagmi ^ 3. 5.0 — 锡瓦
• @solana/wallet-adapter-react ^0.15.39 - SIWS (英语)
• bs58 ^ 6. 0.0 — SIWS 签名编码

链接

• 文 件 - 存档副本 https://docs.agg.market/ 互联网档案馆的存檔,存档日期2013-12-02
• 童话书—— https://storybook.agg.market/ 页面存档备份,存于互联网档案馆
• Demo app - 软件 https://demo.agg.market/ 页面存档备份,存于互联网档案馆
• 香草SDK - - 。 @agg-build/sdk
• 反应钩- @agg-build/hooks
• 贸易UI - @agg-build/ui

许可证

麻省理工学院