Add useAuthToken hook for in-app wallet authentication

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,7 @@ export function createInAppWallet(args: {
       account = connectedAccount;
       adminAccount = _adminAccount;
       chain = connectedChain;
+      authToken = await connector.storage.getAuthCookie();
       trackConnect({
         client: options.client,
         ecosystem,
@@ -168,6 +171,7 @@ export function createInAppWallet(args: {
       account = connectedAccount;
       adminAccount = _adminAccount;
       chain = connectedChain;
+      authToken = await connector.storage.getAuthCookie();
       trackConnect({
         client: options.client,
         ecosystem,
@@ -194,6 +198,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
  *

packages/thirdweb/src/wallets/native/create-wallet.ts

@@ -41,7 +41,7 @@ import type {
  */
 export function createWallet<const ID extends WalletId>(
   ...args: CreateWalletArgs<ID>
-): Wallet<ID> {
+) {
   const [id, creationOptions] = args;
 
   switch (true) {