1.1 環境構築・セットアップ 🛠

このセクションでは、Sui zkLoginアプリの開発環境を構築します。

必要なツール

Node.js（推奨:v23以上）
Bun
Git

リポジトリのクローン

# リポジトリをクローン
git clone https://github.com/unchain-tech/sui-zklogin-app.git
cd sui-zklogin-app

# チェックアウト
git checkout main
bun install

環境変数の設定

.env.exampleをコピーして.env.localを作成し、必要な値を設定します。

cp .env.example .env.local

主な環境変数：

VITE_GOOGLE_CLIENT_ID=
VITE_SUI_NETWORK_NAME=devnet
VITE_SUI_FULLNODE_URL=https://fullnode.devnet.sui.io
VITE_SUI_DEVNET_FAUCET=https://faucet.devnet.sui.io
VITE_SUI_PROVER_DEV_ENDPOINT=https://prover-dev.mystenlabs.com/v1
VITE_REDIRECT_URI=http://localhost:5173/
VITE_SUPABASE_URL=
VITE_SUPABASE_ANON_KEY=

Supabaseのセットアップ

Supabaseでアカウント作成

アカウント作成後はプロジェクトを作成しSQLエディターを開く

以下のSQLを実行してprofilesテーブル作成する

-- ユーザープロフィールを保存するテーブル
CREATE TABLE profiles (
  -- ランダムに生成されたUUIDをキーとする
  id uuid PRIMARY KEY,
  -- Googleから取得するsub ID（重複を許可しない）
  sub text UNIQUE NOT NULL,
  name text,
  email text,
  user_salt text NOT NULL,
  max_epoch integer NOT NULL,
  created_at timestamptz NOT NULL DEFAULT now(),
  updated_at timestamptz NOT NULL DEFAULT now()
);

-- インデックスの追加（subカラムでの検索性能向上のため）
CREATE INDEX idx_profiles_sub ON profiles(sub);

以下のSQLを実行してトリガー・関数も同時に設定する

-- updated_atカラムの自動更新関数の作成
CREATE OR REPLACE FUNCTION update_updated_at_column() 
RETURNS TRIGGER AS $$
BEGIN
    NEW.updated_at = now();
    RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- updated_atカラムの自動更新トリガー
CREATE TRIGGER update_profiles_updated_at
    BEFORE UPDATE ON profiles
    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

環境変数の取得
- VITE_SUPABASE_URLの取得
  
  Project SettingsからAPI Keysページに遷移してPublishable keyの値をコピー&ペーストする
- VITE_SUPABASE_ANON_KEYの取得
  
  Project SettingsからData APIページに遷移してProject URLの値をコピー&ペーストする

Google Cloudのセットアップ

Google Cloudでアカウントを持っていない場合は新規作成すること。
Google Cloud コンソール - APIとサービス認証情報にアクセスする

OAuthクライアントの設定例
- 認証情報を作成をクリックし、クライアントIDを選択する
- 以下の設定で新しい認証情報を作成する
  - アプリケーションの種類: ウェブアプリケーション
  - 名前： sui-zklogin
  - 承認済みのリダイレクトURI
    - http://localhost:5173/
- するとクライアントIDとクライアントシークレットが表示されるはずなのでクライアントIDを環境変数に設定する
```
VITE_GOOGLE_CLIENT_ID=
```

NFTコントラクトのデプロイ

次にアプリで使用するNFTコントラクトをデプロイします！

ローカルでSUI CLIを使って開発することもできますが、今回はより簡単にデプロイできるChain IDEを利用します！

Chain IDEでテンプレートからNon Fousible Tokenを選択します。

すると以下のような画面になるはずです！

ウォレット接続してコントラクトをデプロイしましょう！

もしdevnet用のトークンを持っていない場合はhttps://faucet.sui.io/?network=devnetでトークンがもらえます！

テンプレートなのでそのまま何もしなくてもデプロイできるはずです！

[info] [13:32:47] Package published to chain with digest:  AUDnuK4PyW1tnzPk1ySarQSNTz9p87vw7PYfQehEF2MR
[info] [13:32:47] https://suiscan.xyz/devnet/tx/AUDnuK4PyW1tnzPk1ySarQSNTz9p87vw7PYfQehEF2MR
[info] [13:32:47] Executed successfully
[info] [13:32:49] Uploaded file [deploy/0x1d...d876-published.json] successfully!

SuiScanの方を確認するとパッケージIDが表示されるはずなのでその値をsrc/utils/constant.tsに設定しましょう！

// NFTのパッケージID(Chain IDEを使って事前にデプロイしておく！)
export const NFT_PACKAGE_ID = "<ここにデプロイしたコントラクトのパッケージIDを貼り付ける>";

ここまでで実装を始める前の事前準備が完了しました！

🙋‍♂️ 質問する

セットアップで困った場合はDiscord #zkで質問してください。

必要なツール​

リポジトリのクローン​

環境変数の設定​

Supabaseのセットアップ​

Google Cloudのセットアップ​

NFTコントラクトのデプロイ​

🙋‍♂️ 質問する​