> ## Documentation Index
> Fetch the complete documentation index at: https://docs.magicblock.gg/llms.txt
> Use this file to discover all available pages before exploring further.

# session key manager を使う

> セッショントークンの作成と失効を管理し、安全で使いやすい形でトランザクションの署名・送信に必要なメソッドを提供するカスタム React hook

`useSessionKeyManager` は `AnchorWallet`、`Connection`、`Cluster` を引数に取り、`SessionWalletInterface` を返すカスタム hook です。この hook は session keys と tokens を管理し、トランザクションの署名と送信のためのメソッドを提供します。

`SessionWalletInterface` は次のプロパティとメソッドで構成されています。

```typescript theme={null}
interface SessionWalletInterface {
  publicKey: PublicKey | null; // Public key associated with the session wallet
  ownerPublicKey: PublicKey | null; // The Publickey of the session token authority(The creator of the session token)
  isLoading: boolean; // Indicates whether the session wallet is loading
  error: string | null; // An error message, if any
  sessionToken: string | null; // Session token for the current session
  signTransaction:
    | (<T extends Transaction>(
        transaction: T,
        connection?: Connection,
        sendOptions?: SendTransactionOptions
      ) => Promise<T>)
    | undefined; // Sign a single transaction
  signAllTransactions:
    | (<T extends Transaction>(
        transactions: T[],
        connection?: Connection,
        sendOptions?: SendTransactionOptions
      ) => Promise<T[]>)
    | undefined; // Sign multiple transactions
  signMessage: ((message: Uint8Array) => Promise<Uint8Array>) | undefined; // Sign a message
  sendTransaction:
    | (<T extends Transaction>(
        transaction: T,
        connection?: Connection,
        options?: SendTransactionOptions
      ) => Promise<string>)
    | undefined; // Send a signed transaction
  signAndSendTransaction:
    | (<T extends Transaction>(
        transactions: T | T[],
        connection?: Connection,
        options?: SendTransactionOptions
      ) => Promise<string[]>)
    | undefined; // Sign and send transactions
  createSession: (
    targetProgram: PublicKey, // Target Solana program
    topUpLamports?: number, // Top up session wallet with lamports or not
    validUntil?: number, // Duration of session token before expiration
    sessionCreatedCallback?: (sessionInfo: {
      sessionToken: string;
      publicKey: string;
    }) => void
  ) => Promise<SessionWalletInterface | undefined>; // Create a new session
  revokeSession: () => Promise<void>; // Revoke the current session
  getSessionToken: () => Promise<string | null>; // Retrieve the current session token
}
```

以下は `useSessionKeyManager` の使用例です。

```typescript theme={null}
import { useAnchorWallet, useConnection } from '@solana/wallet-adapter-react';
import { useSessionKeyManager } from '@gumhq/react-sdk';

function YourComponent() {
  const wallet = useAnchorWallet();
  const connection = useConnection();
  const cluster = "devnet"; // or "mainnet-beta", "testnet", "localnet"

  const sessionWallet = useSessionKeyManager(wallet, connection, cluster);

  // ここで session wallet のプロパティとメソッドにアクセスできます
  // 例: sessionWallet.publicKey
  // 例: sessionWallet.createSession

  return (
    // Your component JSX
  );
}
```

複数のコンポーネントで Session Key Manager を使いたい場合は、次のセクションのようにアプリケーション内で Provider Component と Context を設定できます。