Add useAuthToken hook for in-app wallet authentication (#7120)

# Add `useAuthToken` hook for in-app wallet authentication

This PR adds a new React hook `useAuthToken()` that returns a JWT authentication token for the currently active in-app wallet. This token can be used to authorize API calls to backend servers.

Key changes:
- Added `useAuthToken()` hook that returns the auth token when an in-app wallet is active
- Modified the `InAppConnector` interface to expose the storage property
- Updated the wallet interface to include a `getAuthToken()` method for in-app wallets
- Implemented token retrieval in the in-app wallet core implementation

The hook ensures the token is only returned when the active wallet is an in-app wallet and matches the active account.

Example usage:
```tsx
function MyComponent() {
  const authToken = useAuthToken();

  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data', {
      headers: {
        'Authorization': `Bearer ${authToken}`
      }
    });
    // ... handle response
  };
}
```

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
	- Introduced a new hook to retrieve authentication tokens for in-app wallets, enabling secure authorization for API calls.
- **Documentation**
	- Added usage examples and clarifications regarding authentication token availability for wallets.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the wallet functionality by introducing an authentication token feature and updating the visibility of certain properties. It adds a method for retrieving an authentication token and modifies the storage property to be public.

### Detailed summary
- Changed `storage` property from `private` to `public` in `native-connector.ts` and `web-connector.ts`.
- Added `getAuthToken` method to the wallet interface in `wallet.ts` with documentation.
- Included `storage` in the `InAppConnector` interface.
- Implemented `authToken` handling in `createInAppWallet` function.
- Created `useAuthToken` hook for retrieving the JWT of the active wallet.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: jnsdls

packages/thirdweb/src/exports/react.native.ts

@@ -9,10 +9,11 @@ export type {
 
 // wallet hooks
 export { useActiveWallet } from "../react/core/hooks/wallets/useActiveWallet.js";
-export { useAdminWallet } from "../react/core/hooks/wallets/useAdminWallet.js";
 export { useActiveWalletChain } from "../react/core/hooks/wallets/useActiveWalletChain.js";
 export { useActiveWalletConnectionStatus } from "../react/core/hooks/wallets/useActiveWalletConnectionStatus.js";
 export { useActiveAccount } from "../react/core/hooks/wallets/useActiveAccount.js";
+export { useAdminWallet } from "../react/core/hooks/wallets/useAdminWallet.js";
+export { useAuthToken } from "../react/core/hooks/wallets/useAuthToken.js";
 export { useAutoConnect } from "../react/native/hooks/wallets/useAutoConnect.js";
 export { useConnect } from "../react/core/hooks/wallets/useConnect.js";
 export { useConnectedWallets } from "../react/core/hooks/wallets/useConnectedWallets.js";

packages/thirdweb/src/exports/react.ts

@@ -40,10 +40,11 @@ export type { MediaRendererProps } from "../react/web/ui/MediaRenderer/types.js"
 
 // wallet hooks
 export { useActiveWallet } from "../react/core/hooks/wallets/useActiveWallet.js";
-export { useAdminWallet } from "../react/core/hooks/wallets/useAdminWallet.js";
 export { useActiveWalletChain } from "../react/core/hooks/wallets/useActiveWalletChain.js";
 export { useActiveWalletConnectionStatus } from "../react/core/hooks/wallets/useActiveWalletConnectionStatus.js";
 export { useActiveAccount } from "../react/core/hooks/wallets/useActiveAccount.js";
+export { useAdminWallet } from "../react/core/hooks/wallets/useAdminWallet.js";
+export { useAuthToken } from "../react/core/hooks/wallets/useAuthToken.js";
 export { useAutoConnect } from "../react/web/hooks/wallets/useAutoConnect.js";
 export { useConnect } from "../react/core/hooks/wallets/useConnect.js";
 export { useConnectedWallets } from "../react/core/hooks/wallets/useConnectedWallets.js";

packages/thirdweb/src/react/core/hooks/wallets/useAuthToken.ts

@@ -0,0 +1,41 @@
+import { useActiveAccount } from "./useActiveAccount.js";
+import { useActiveWallet } from "./useActiveWallet.js";
+
+/**
+ * A hook that returns the authentication token (JWT) for the currently active wallet.
+ * This token can be used to authorize API calls to your backend server.
+ *
+ * @returns The JWT string if the active wallet is an in-app wallet and matches the active account, null otherwise
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const authToken = useAuthToken();
+ *
+ *   const fetchData = async () => {
+ *     const response = await fetch('https://api.example.com/data', {
+ *       headers: {
+ *         'Authorization': `Bearer ${authToken}`
+ *       }
+ *     });
+ *     // ... handle response
+ *   };
+ * }
+ * ```
+ *
+ * @wallet
+ */
+export function useAuthToken() {
+  const activeWallet = useActiveWallet();
+  const activeAccount = useActiveAccount();
+  // if the active wallet is an in-app wallet and the active account is the same as the active wallet's account, return the auth token for the in-app wallet
+  if (
+    activeWallet?.getAuthToken &&
+    activeAccount &&
+    activeAccount.address === activeWallet.getAccount()?.address
+  ) {
+    return activeWallet.getAuthToken();
+  }
+  // all other wallets don't expose an auth token for now
+  return null;
+}

packages/thirdweb/src/wallets/in-app/core/interfaces/connector.ts

@@ -1,5 +1,6 @@
 import type { SocialAuthOption } from "../../../../wallets/types.js";
 import type { Account } from "../../../interfaces/wallet.js";
+import type { ClientScopedStorage } from "../authentication/client-scoped-storage.js";
 import type {
   AuthArgsType,
   AuthLoginReturnType,
@@ -38,4 +39,5 @@ export interface InAppConnector {
   linkProfile(args: AuthArgsType): Promise<Profile[]>;
   unlinkProfile(args: Profile): Promise<Profile[]>;
   getProfiles(): Promise<Profile[]>;
+  storage: ClientScopedStorage;
 }

packages/thirdweb/src/wallets/in-app/core/wallet/in-app-core.ts

@@ -55,9 +55,11 @@ export function createInAppWallet(args: {
   let adminAccount: Account | undefined = undefined; // Admin account if smartAccountOptions were provided with connection
   let chain: Chain | undefined = undefined;
   let client: ThirdwebClient | undefined;
+  let authToken: string | null = null;
 
   return {
     id: walletId,
+    getAuthToken: () => authToken,
     subscribe: emitter.subscribe,
     getChain() {
       if (!chain) {
@@ -114,6 +116,12 @@ export function createInAppWallet(args: {
       account = connectedAccount;
       adminAccount = _adminAccount;
       chain = connectedChain;
+      try {
+        authToken = await connector.storage.getAuthCookie();
+      } catch (error) {
+        console.error("Failed to retrieve auth token:", error);
+        authToken = null;
+      }
       trackConnect({
         client: options.client,
         ecosystem,
@@ -168,6 +176,12 @@ export function createInAppWallet(args: {
       account = connectedAccount;
       adminAccount = _adminAccount;
       chain = connectedChain;
+      try {
+        authToken = await connector.storage.getAuthCookie();
+      } catch (error) {
+        console.error("Failed to retrieve auth token:", error);
+        authToken = null;
+      }
       trackConnect({
         client: options.client,
         ecosystem,
@@ -194,6 +208,7 @@ export function createInAppWallet(args: {
       account = undefined;
       adminAccount = undefined;
       chain = undefined;
+      authToken = null;
       emitter.emit("disconnect", undefined);
     },
     switchChain: async (newChain) => {

packages/thirdweb/src/wallets/in-app/native/native-connector.ts

@@ -29,7 +29,7 @@ type NativeConnectorOptions = {
 export class InAppNativeConnector implements InAppConnector {
   private client: ThirdwebClient;
   private ecosystem?: Ecosystem;
-  private storage: ClientScopedStorage;
+  public storage: ClientScopedStorage;
   private passkeyDomain?: string;
   private wallet?: IWebWallet;
 

packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts

@@ -50,7 +50,7 @@ export class InAppWebConnector implements InAppConnector {
   private client: ThirdwebClient;
   private ecosystem?: Ecosystem;
   private querier: InAppWalletIframeCommunicator<AuthQuerierTypes>;
-  private storage: ClientScopedStorage;
+  public storage: ClientScopedStorage;
 
   private wallet?: IWebWallet;
   /**

packages/thirdweb/src/wallets/interfaces/wallet.ts

@@ -151,8 +151,18 @@ export type Wallet<TWalletId extends WalletId = WalletId> = {
    * This is useful for smart wallets to get the underlying personal account
    */
   getAdminAccount?: () => Account | undefined;
-};
 
+  /**
+   * Get the authentication token for the wallet.
+   *
+   * This method is not available for on all wallets. This method will be `undefined` if the wallet does not support it.
+   * @example
+   * ```ts
+   * const authToken = await wallet.getAuthToken();
+   * ```
+   */
+  getAuthToken?: () => string | null;
+};
 /**
  * Account interface
  *