Add userId support across wallet APIs and UI

Introduces support for the userId field throughout wallet-related APIs and dashboard components. Updates search, display, and transformation logic to handle userId in addition to existing identifiers, and improves UI to distinguish between 'User Identifier' (userId) and 'Auth Identifier'. Updates API client types and documentation to reflect the new userId field.

Closes BLD-447

Author: 0xFirekeeper

.changeset/breezy-heads-crash.md

@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/api": patch
+---
+
+added support for userId across wallet apis

apps/dashboard/src/@/components/in-app-wallet-users-content/AdvancedSearchInput.tsx

@@ -14,6 +14,15 @@ import {
 } from "@/components/ui/select";
 import type { SearchType } from "./types";
 
+const searchTypeLabels: Record<SearchType, string> = {
+  email: "Email",
+  phone: "Phone",
+  id: "Auth Identifier",
+  address: "Address",
+  externalWallet: "External Wallet",
+  userId: "User Identifier",
+};
+
 export function AdvancedSearchInput(props: {
   onSearch: (searchType: SearchType, query: string) => void;
   onClear: () => void;
@@ -52,7 +61,8 @@ export function AdvancedSearchInput(props: {
         <SelectContent>
           <SelectItem value="email">Email</SelectItem>
           <SelectItem value="phone">Phone</SelectItem>
-          <SelectItem value="id">ID</SelectItem>
+          <SelectItem value="id">Auth Identifier</SelectItem>
+          <SelectItem value="userId">User Identifier</SelectItem>
           <SelectItem value="address">Address</SelectItem>
           <SelectItem value="externalWallet">External Wallet</SelectItem>
         </SelectContent>
@@ -62,7 +72,7 @@ export function AdvancedSearchInput(props: {
         <div className="relative flex-1">
           <Input
             className="bg-background pl-9 border-r-0 rounded-r-none rounded-l-full"
-            placeholder={`Search by ${searchType}...`}
+            placeholder={`Search by ${searchTypeLabels[searchType]}...`}
             value={query}
             onChange={(e) => setQuery(e.target.value)}
             onKeyDown={handleKeyDown}

apps/dashboard/src/@/components/in-app-wallet-users-content/SearchResults.tsx

@@ -12,8 +12,9 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { CopyTextButton } from "../ui/CopyTextButton";
 
-const getUserIdentifier = (user: WalletUser) => {
+const getAuthIdentifier = (user: WalletUser) => {
   const mainDetail = user.linkedAccounts[0]?.details;
   return (
     mainDetail?.email ??
@@ -24,6 +25,13 @@ const getUserIdentifier = (user: WalletUser) => {
   );
 };
 
+const truncateIdentifier = (value: string) => {
+  if (value.length <= 18) {
+    return value;
+  }
+  return `${value.slice(0, 8)}...${value.slice(-4)}`;
+};
+
 export function SearchResults(props: {
   results: WalletUser[];
   client: ThirdwebClient;
@@ -51,6 +59,8 @@ export function SearchResults(props: {
         const mainDetail = user.linkedAccounts?.[0]?.details;
         const email = mainDetail?.email as string | undefined;
         const phone = mainDetail?.phone as string | undefined;
+        const authIdentifier = getAuthIdentifier(user);
+        const userIdentifier = user.id;
 
         // Get external wallet addresses from linkedAccounts where type is 'siwe'
         const externalWalletAccounts =
@@ -68,7 +78,34 @@ export function SearchResults(props: {
                   <p className="text-sm font-medium text-muted-foreground">
                     User Identifier
                   </p>
-                  <p className="text-sm">{getUserIdentifier(user)}</p>
+                  {userIdentifier ? (
+                    <CopyTextButton
+                      textToShow={truncateIdentifier(userIdentifier)}
+                      textToCopy={userIdentifier}
+                      tooltip="Copy User Identifier"
+                      copyIconPosition="left"
+                      variant="ghost"
+                    />
+                  ) : (
+                    <p className="text-sm">N/A</p>
+                  )}
+                </div>
+
+                <div>
+                  <p className="text-sm font-medium text-muted-foreground">
+                    Auth Identifier
+                  </p>
+                  {authIdentifier ? (
+                    <CopyTextButton
+                      textToShow={truncateIdentifier(authIdentifier)}
+                      textToCopy={authIdentifier}
+                      tooltip="Copy Auth Identifier"
+                      copyIconPosition="left"
+                      variant="ghost"
+                    />
+                  ) : (
+                    <p className="text-sm">N/A</p>
+                  )}
                 </div>
 
                 {walletAddress && (

apps/dashboard/src/@/components/in-app-wallet-users-content/in-app-wallet-users-content.tsx

@@ -28,7 +28,7 @@ import { SearchResults } from "./SearchResults";
 import { searchUsers } from "./searchUsers";
 import type { SearchType } from "./types";
 
-const getUserIdentifier = (accounts: WalletUser["linkedAccounts"]) => {
+const getAuthIdentifier = (accounts: WalletUser["linkedAccounts"]) => {
   const mainDetail = accounts[0]?.details;
   return (
     mainDetail?.email ??
@@ -44,6 +44,13 @@ const getExternalWallets = (accounts: WalletUser["linkedAccounts"]) => {
 
 const columnHelper = createColumnHelper<WalletUser>();
 
+const truncateIdentifier = (value: string) => {
+  if (value.length <= 18) {
+    return value;
+  }
+  return `${value.slice(0, 8)}...${value.slice(-4)}`;
+};
+
 export function InAppWalletUsersPageContent(
   props: {
     authToken: string;
@@ -56,31 +63,48 @@ export function InAppWalletUsersPageContent(
 ) {
   const columns = useMemo(() => {
     return [
+      columnHelper.accessor("id", {
+        cell: (cell) => {
+          const userId = cell.getValue();
+
+          if (!userId) {
+            return "N/A";
+          }
+
+          return (
+            <CopyTextButton
+              textToShow={truncateIdentifier(userId)}
+              textToCopy={userId}
+              tooltip="Copy User Identifier"
+              copyIconPosition="left"
+              variant="ghost"
+            />
+          );
+        },
+        header: "User Identifier",
+        id: "user_identifier",
+      }),
       columnHelper.accessor("linkedAccounts", {
         cell: (cell) => {
-          const identifier = getUserIdentifier(cell.getValue());
+          const identifier = getAuthIdentifier(cell.getValue());
 
           if (!identifier) {
             return "N/A";
           }
 
           return (
             <CopyTextButton
-              textToShow={
-                identifier.length > 30
-                  ? `${identifier.slice(0, 30)}...`
-                  : identifier
-              }
+              textToShow={truncateIdentifier(identifier)}
               textToCopy={identifier}
-              tooltip="Copy User Identifier"
+              tooltip="Copy Auth Identifier"
               copyIconPosition="left"
               variant="ghost"
             />
           );
         },
         enableColumnFilter: true,
-        header: "User Identifier",
-        id: "user_identifier",
+        header: "Auth Identifier",
+        id: "auth_identifier",
       }),
       columnHelper.accessor("wallets", {
         cell: (cell) => {
@@ -243,7 +267,8 @@ export function InAppWalletUsersPageContent(
             : "Wallet not created yet",
           external_wallets: externalWalletAddresses || "None",
           login_methods: row.linkedAccounts.map((acc) => acc.type).join(", "),
-          user_identifier: getUserIdentifier(row.linkedAccounts),
+          auth_identifier: getAuthIdentifier(row.linkedAccounts) || "N/A",
+          user_identifier: row.id || "N/A",
         };
       }),
     );

apps/dashboard/src/@/components/in-app-wallet-users-content/searchUsers.ts

@@ -18,10 +18,10 @@ configure({
 type APIWallet = ListUserWalletsResponses[200]["result"]["wallets"][0];
 type APIProfile = APIWallet["profiles"][0];
 
-// Transform API response to match existing WalletUser format
+// Transform API response to match wallet user format
 function transformToWalletUser(apiWallet: APIWallet): WalletUser {
   return {
-    id: getProfileId(apiWallet.profiles[0]) || "",
+    id: apiWallet.userId || getProfileId(apiWallet.profiles[0]) || "",
     linkedAccounts: apiWallet.profiles.map((profile) => {
       // Create details object based on the profile data
       let details:
@@ -105,6 +105,9 @@ export async function searchUsers(
       case "externalWallet":
         queryParams.externalWalletAddress = query;
         break;
+      case "userId":
+        queryParams.userId = query;
+        break;
     }
 
     // Use the generated API function with Bearer authentication

apps/dashboard/src/@/components/in-app-wallet-users-content/types.ts

@@ -3,4 +3,5 @@ export type SearchType =
   | "phone"
   | "id"
   | "address"
-  | "externalWallet";
+  | "externalWallet"
+  | "userId";

apps/dashboard/src/@/hooks/useEmbeddedWallets.ts

@@ -76,10 +76,10 @@ const fetchAccountList = ({
   };
 };
 
-// Transform API response to match existing WalletUser format
+// Transform API response to match the wallet user format
 function transformToWalletUser(apiWallet: APIWallet): WalletUser {
   return {
-    id: getProfileId(apiWallet.profiles[0]) || "",
+    id: apiWallet.userId || getProfileId(apiWallet.profiles[0]) || "",
     linkedAccounts: apiWallet.profiles.map((profile) => {
       // Create details object based on the profile data
       let details:

packages/api/src/client/sdk.gen.ts

@@ -244,6 +244,7 @@ export const initiateAuthentication = <ThrowOnError extends boolean = false>(
  * - `isNewUser` - Whether this is a new wallet creation
  * - `token` - JWT token for authenticated API requests
  * - `type` - The authentication method used
+ * - `userId` - Unique identifier for the authenticated user
  * - `walletAddress` - Your new or existing wallet address
  *
  * **Next step - Verify your token:**
@@ -442,6 +443,7 @@ export const socialAuthentication = <ThrowOnError extends boolean = false>(
  * Retrieve the authenticated user's wallet information including wallet addresses and linked authentication wallets. This endpoint provides comprehensive user data for the currently authenticated session.
  *
  * **Returns:**
+ * - userId - Unique identifier for this wallet in thirdweb auth
  * - Primary wallet address
  * - Smart wallet address (if available)
  * - Wallet creation timestamp

packages/api/src/client/types.gen.ts

@@ -330,6 +330,10 @@ export type CompleteAuthenticationResponses = {
 		 * Type of authentication completed
 		 */
 		type: string;
+		/**
+		 * Unique identifier for the authenticated user
+		 */
+		userId: string;
 		/**
 		 * The wallet address
 		 */
@@ -875,6 +879,10 @@ export type GetMyWalletResponses = {
 	 */
 	200: {
 		result: {
+			/**
+			 * Unique identifier for the user wallet within the thirdweb auth system.
+			 */
+			userId?: string;
 			/**
 			 * The EOA (Externally Owned Wallet) address of the wallet. This is the traditional wallet address.
 			 */
@@ -1076,6 +1084,10 @@ export type ListUserWalletsData = {
 		address?: string;
 		externalWalletAddress?: string;
 		id?: string;
+		/**
+		 * Filter results by the unique user identifier returned by auth flows.
+		 */
+		userId?: string;
 	};
 	url: "/v1/wallets/user";
 };
@@ -1122,6 +1134,10 @@ export type ListUserWalletsResponses = {
 			 * Array of user wallets
 			 */
 			wallets: Array<{
+				/**
+				 * Unique identifier for the user wallet within the thirdweb auth system.
+				 */
+				userId?: string;
 				/**
 				 * The EOA (Externally Owned Wallet) address of the wallet. This is the traditional wallet address.
 				 */
@@ -1362,6 +1378,10 @@ export type CreateUserWalletResponses = {
 	 */
 	200: {
 		result: {
+			/**
+			 * Unique identifier for the user wallet within the thirdweb auth system.
+			 */
+			userId?: string;
 			/**
 			 * The EOA (Externally Owned Wallet) address of the wallet. This is the traditional wallet address.
 			 */
@@ -1604,6 +1624,10 @@ export type ListServerWalletsResponses = {
 			 * Array of server wallets
 			 */
 			wallets: Array<{
+				/**
+				 * Unique identifier for the user wallet within the thirdweb auth system.
+				 */
+				userId?: string;
 				/**
 				 * The EOA (Externally Owned Wallet) address of the wallet. This is the traditional wallet address.
 				 */
@@ -1831,6 +1855,10 @@ export type CreateServerWalletResponses = {
 	 */
 	200: {
 		result: {
+			/**
+			 * Unique identifier for the user wallet within the thirdweb auth system.
+			 */
+			userId?: string;
 			/**
 			 * The EOA (Externally Owned Wallet) address of the wallet. This is the traditional wallet address.
 			 */