まいにちDapps#5 web3ウォレットとFirebaseAuthとを繋げる

まいにちDappsの5日目は3日目で作成したサービス内ウォレットをより実用的なDappsとして開発するために、Firebase Authと連携してFirestoreでデータ管理をしていきます。

これまで作成したDappsはいずれもweb3ログインをさせるだけでした。web3ログインで得られるデータはオンチェーンのものに限られます。これでも十分成り立つDappsの要件はありますが、ユーザーごとにプライベートなデータ管理が必要だったりオフチェーンのほうが効率が良いケースがあります。その際は従来のオフチェーンのデータベース（クラウド）を利用したデータ管理とAuthでの権限管理をする必要があります。

Thirdweb × Firebase Auth

https://portal.thirdweb.com/auth/integrations/firebase の記事を元に進めていきます。

Firebaseで新しいプロジェクトを作ります。

プロジェクトの設定>サービスアカウントから新しいキーを生成します。

npx thirdweb create app --template firebase-auth でテンプレートから作成しちゃいます。中でやっていることは参考元の記事に書いてある通り、npm moduleのインストールやfirebase initの設定、状態管理の設定などです。

.env.local ファイルを作成して上記firebaseの情報を環境変数に設定します。

firebaseのコンソールからAuthenticationを開始します。

yarn devでlocalhostを立ち上げます。

connect walletをしてさらにSign inをするとログイン状態が確認できます。

なお、firestoreを開始してルールを以下に設定すると、ユーザーのデータは誰からも閲覧できるがユーザー本人しか編集できない、というルールを追加することができます。

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // The wildcard expression {userId} makes the userId variable available in rules.
    match /users/{userId} {
      // Only allow users to update their own documents.
      allow create, update, delete: if request.auth != null && request.auth.uid == userId;
      // But anybody can read their profile.
      allow read;
    }
  }
}

Web3Auth × FIrebase Auth

まいにちDapps#3で取り上げたWeb3Authも同様の連携が可能です。

こちらの記事を元に進めていきます。

https://web3auth.io/docs/content-hub/guides/firebase#interacting-with-blockchain

Firebaseのプロジェクトを作成してAuthenticationのmethodのgoogleログインを有効にしておきます。

web3Authのダッシュボードからplug and playでプロジェクトを作成します。

ReactのプロジェクトをWeb3Authのテンプレートから作成します。

npx degit Web3Auth/web3auth-pnp-examples/web-no-modal-sdk/custom-authentication/firebase-react-no-modal-example w3a-firebase-demo && cd w3a-firebase-demo && npm install && npm run start

firebaseのinit情報とWeb3AuthのClient IDを適切な場所に置くと出来上がりです。

まとめ

以上今回は2つの実装方法をご紹介しました。

ウォレット接続だけであればsdkを使ってすぐできますが、Firebase Authのようなweb2のAuthシステムとの連携は一手間必要なのでDapps開発エンジニアであれば押さえておきたいところです。

弊社Pontechはweb3に関わる開発を得意とするテック企業です。サービス開発に関するご相談はこちらのフォームからお願いいたします。

また、受託開発案件に共に取り組むメンバーを募集しています！ご興味のある方はぜひお話させてください！