@farcaster/auth-kit

一个反应库,可以方便地将Sign In With Farcaster添加到您的应用程序中.

开始

安装

安装 AuthKit 及其对等依赖 维姆。 。 。 .

npm install @farcaster/auth-kit viem

说明: AuthKit 是一个 反应 图书馆。 如果你使用另一个前端框架,请看看 @farcaster/auth-client 图书馆.

导入

导入样式和函数 .

import "@farcaster/auth-kit/styles.css";
import { AuthKitProvider } from "@farcaster/auth-kit";

添加提供者

用 AuthKitProvider。 。 。 .

const config = {
  // For a production app, replace this with an Optimism Mainnet
  // RPC URL from a provider like Alchemy or Infura.
  rpcUrl: "https://mainnet.optimism.io",
  domain: "example.com",
  siweUri: "https://example.com/login",
};

const App = () => {
  return <AuthKitProvider config={config}>{/* Your App */}</AuthKitProvider>;
};

在按钮中添加标志

然后,在你的应用中,导入和渲染 SignInButton 组件.

import { SignInButton } from "@farcaster/auth-kit";

export const SignIn = ({ nonce }: { nonce: string }) => {
  return <SignInButton nonce={nonce} />;
};

法克斯特按钮的标志将会生效 当用户点击时,他们会被提示在使用他们的Farcaster钱包应用程序时完成签名. 一旦他们完成签名 在签名消息中 将返回回召.

实例

您可以找到正式的例子 这里。 。 。 .

解决问题

使用的项目 创建反应 App( CRA) 可能遇到 TypeScript 版本冲突, 如 [email protected] 期望 TypeScript 版本的对等依赖 ^3.2.1 || ^4,而viem和AuthKit都要求 >=5.0.4。 。 。 .

为解决这一问题:

• 安装 TypeScript 的最新版本 : npm i typescript -D
• 添加覆盖 react-scripts 要删除版本天花板 :

"overrides": {
  "react-scripts": {
    "typescript": ">3.2.1"
  }
}

说明: 始终小心地处理超接,并确保它们与使用它们的包兼容.

构成部分

AuthKitProvider

将您的申请包成 AuthKitProvider 以使用法克斯特·奥特.

const config = {
  domain: "example.com",
  siweUri: "https://example.com/login",
  rpcUrl: "https://mainnet.optimism.io",
  relay: "https://relay.farcaster.xyz",
};

const App = () => {
  return <AuthKitProvider config={config}>{/* Your App */}</AuthKitProvider>;
};

道具

config 选项:

SignInButton

主要内容。 将"Sign in With Farcaster"按钮渲染出,该按钮会促使用户用手机在网络上扫描QR代码,或者直接在移动设备上重定向. 您可以使用回调道具或钩子访问用户的认证状态和配置信息.

import { SignInButton } from "@farcaster/auth-kit";

export const SignIn = ({ nonce }: { nonce: string }) => {
  return (
    <SignInButton
      nonce={nonce}
      onSuccess={({ fid, username }) =>
        console.log(`Hello, ${username}! Your fid is ${fid}.`)
      }
    />
  );
};

道具

钩子

useSignIn

钩在用户签名。 连接到中继服务器,生成QR代码并签名链接到用户面前,投票中继服务器进行钱包签名.

import { QRCode, useSignIn } from "@farcaster/auth-kit";

function App() {
  const {
    signIn,
    url
    data: { username },
    onSuccess: ({ fid }) => console.log("Your fid:", fid);
  } = useSignIn();

  return (
    <div>
      <button onClick={signIn}>Sign In</button>
      {qrCodeUri && (
        <span>
          Scan this: <QRCode uri={url} />
        </span>
      )}
      {username && `Hello, ${username}!`}
    </div>
  );
}

参数

回返

  {
    signIn: () => void;
    reconnect: () => void;
    isSuccess: boolean;
    isPolling: boolean;
    isError: boolean;
    error: AuthClientError;
    channelToken: string;
    url: string;
    qrCodeUri: string;
    data: {
        state: "pending" | "complete";
        nonce: string;
        message: string;
        signature: string;
        fid: number;
        username: string;
        bio: string;
        displayName: string;
        pfpUrl: string;
        custody: Hex;
        verifications: Hex[];
    },
    validSignature: boolean;
  };

useProfile

读取认证用户信息的钩子 .

import { useProfile } from "@farcaster/auth-kit";

function App() {
  const {
    isAuthenticated,
    profile: { fid, pfpUrl, username, displayName, bio },
  } = useProfile();

  return (
    <div>
     { isAuthenticated ? <p>Hello, {username}! Your fid is {fid}.<p>  : <p>You're not signed in.</p>}
    </div>
  );
}

回返

  {
    isAuthenticated: boolean;
    profile: {
        fid: number;
        username: string;
        bio: string;
        displayName: string;
        pfpUrl: string;
    },
  };

useSignInMessage

用于读取用于认证用户的SIWE消息和签名的Hook.

import { useSignInMessage } from "@farcaster/auth-kit";

function App() {
  const { message, signature } = useSignInMessage();

  return (
    <div>
      <p>You signed: {message}</p>
      <p>Your signature: {signature}</p>
    </div>
  );
}

回返

{
  message: string;
  signature: string;
}