🐕

ReactアプリへのSign In With Ethereum（SIWE）の追加について

2023/01/23に公開

React

※当記事は、こちらの記事を翻訳したものです。

はじめに

このガイドでは、Authを使用して、アプリに Ethereum でのサインインを追加していきます。

最終的には、以下のような、ユーザーがウォレットを接続してEthereumでサインインできる完全なReactアプリを作成します。

次のコマンドを実行すれば、このガイドに書いてあるフルコードを、すぐに始められます。

npx thirdweb create --template sign-in-button

では、はじめましょう!

なぜweb3のサインインを使うのか？

イーサリアムのサインインでは、ウォレットを使用して安全にログインし、バックエンドでウォレットを検証することができます!

私たちのAuth SDKはJSON Web Tokens (JWT)を利用して、ユーザーがサーバーサイドの環境でウォレットを所有していることを証明します。

セットアップ

Next.jsアプリの作成

このガイドでは、Next javascriptのスターターテンプレートを使用します。

このガイドに沿ってプロジェクトを作成する場合は、thirdwebで
Next Javascriptのテンプレートを使って、thirdweb CLIでプロジェクトを作成します。

すでにNext.jsのアプリをお持ちの方は、以下の手順で簡単に始めることができます。

thirdweb-dev/react と @thirdweb-dev/sdk と ethers をインストール
MetaMask認証をサイトに追加します。このガイドに沿って行うことができます。

thirdweb authのセットアップ

まず、thirdweb auth パッケージをインストールする必要があります。

npm i @thirdweb-dev/auth # npm

yarn add @thirdweb-dev/auth # yarn

ここで、auth.config.jsというファイルを作成し、以下のようにします。

import { ThirdwebAuth } from "@thirdweb-dev/auth/next";

export const { ThirdwebAuthHandler, getUser } = ThirdwebAuth({
  // Learn how to securely store your private key below:
  // https://portal.thirdweb.com/sdk/set-up-the-sdk/securing-your-private-key
  privateKey: process.env.PRIVATE_KEY,
  // Set this to be your websites domain name
  domain: "example.org",
});

秘密鍵を安全に保管するために、シークレットマネージャーを使用することを推奨しております！

Auth API を設定するには、pages/api 内に auth という名前の新しいフォルダを作成し、その中に [...thirdweb].js ファイルを作成します。

このファイルから、作成した ThirdwebAuthHandler をエクスポートする必要があります!

import { ThirdwebAuthHandler } from "../../../auth.config";

export default ThirdwebAuthHandler();

最後に、_app.tsx ファイル内で、ThirdwebProvider に authConfig プロパティを追加してください。

<ThirdwebProvider
      desiredChainId={activeChainId}
      authConfig={{
        authUrl: "/api/auth",
        domain: "example.org",
        loginRedirect: "/",
      }}
    >
    <Component {...pageProps} />
</ThirdwebProvider>

フロントエンドの構築

pages/index.tsxの中で、return文を以下のように更新します。

return (
    <div>
      <div>
        <ConnectWallet
          auth={{
            loginOptional: false,
          }}
        />
      </div>
      {user && <p>You are signed in as {user.address}</p>}
    </div>
);

ここでは、認証オプションを持つthirdwebのConnectWalletを使用しています。

また、useUserフックを使って、現在認証されているユーザーを取得することができます。

import { ConnectWallet, useUser } from "@thirdweb-dev/react";

const { user } = useUser();

thirdwebでDappにEthereumのサインインを追加するのはこんなに簡単にできました！

まとめ

今回のガイドでは、thirdweb authを使ってEthereumを使ったサインインを追加する方法を学びました。

Ethereumでのサインインを利用して作った、あなたの素晴らしいDappsをthirdwebのdiscordでシェアしましょう! コードを見たい場合は、GitHub Repositoryをチェックしてみてください。