feat: add unlinking for in app wallet accounts

Author: ElasticBottle

packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx

@@ -908,12 +908,22 @@ function DetailsModal(props: {
       />
     );
   } else if (screen === "linked-profiles") {
+    let ecosystem: Ecosystem | undefined;
+    if (activeWallet && isEcosystemWallet(activeWallet)) {
+      const ecosystemWallet = activeWallet as Wallet<EcosystemWalletId>;
+      const partnerId = ecosystemWallet.getConfig()?.partnerId;
+      ecosystem = {
+        id: ecosystemWallet.id,
+        partnerId,
+      };
+    }
     content = (
       <LinkedProfilesScreen
         onBack={() => setScreen("manage-wallet")}
         client={client}
         locale={locale}
         setScreen={setScreen}
+        ecosystem={ecosystem}
       />
     );
   } else if (screen === "link-profile") {

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.tsx

@@ -1,7 +1,11 @@
 "use client";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import type { ThirdwebClient } from "../../../../../client/client.js";
 import { shortenAddress } from "../../../../../utils/address.js";
 import type { Profile } from "../../../../../wallets/in-app/core/authentication/types.js";
+import type { Ecosystem } from "../../../../../wallets/in-app/core/wallet/types.js";
+import { unlinkProfile } from "../../../../../wallets/in-app/web/lib/auth/index.js";
 import { fontSize, iconSize } from "../../../../core/design-system/index.js";
 import { useSocialProfiles } from "../../../../core/social/useSocialProfiles.js";
 import { getSocialIcon } from "../../../../core/utils/walletIcon.js";
@@ -10,6 +14,7 @@ import { LoadingScreen } from "../../../wallets/shared/LoadingScreen.js";
 import { Img } from "../../components/Img.js";
 import { Spacer } from "../../components/Spacer.js";
 import { Container, Line, ModalHeader } from "../../components/basic.js";
+import { IconButton } from "../../components/buttons.js";
 import { Text } from "../../components/text.js";
 import { Blobbie } from "../Blobbie.js";
 import { MenuButton } from "../MenuButton.js";
@@ -46,6 +51,7 @@ export function LinkedProfilesScreen(props: {
   setScreen: (screen: WalletDetailsModalScreen) => void;
   locale: ConnectLocale;
   client: ThirdwebClient;
+  ecosystem?: Ecosystem;
 }) {
   const { data: connectedProfiles, isLoading } = useProfiles({
     client: props.client,
@@ -99,6 +105,7 @@ export function LinkedProfilesScreen(props: {
               .map((profile) => (
                 <LinkedProfile
                   key={`${profile.type}-${getProfileDisplayName(profile)}`}
+                  enableUnlinking={connectedProfiles.length > 1}
                   profile={profile}
                   client={props.client}
                 />
@@ -113,11 +120,33 @@ export function LinkedProfilesScreen(props: {
 
 function LinkedProfile({
   profile,
+  enableUnlinking,
   client,
-}: { profile: Profile; client: ThirdwebClient }) {
+  ecosystem,
+}: {
+  profile: Profile;
+  enableUnlinking: boolean;
+  client: ThirdwebClient;
+  ecosystem?: Ecosystem;
+}) {
   const { data: socialProfiles } = useSocialProfiles({
     client,
-    address: profile.details.address,
+    address: profile.details.address
+      ? "0x225f137127d9067788314bc7fcc1f36746a3c3B5"
+      : undefined,
+  });
+  const queryClient = useQueryClient();
+  const { mutate: unlinkProfileMutation, isPending } = useMutation({
+    mutationFn: async () => {
+      await unlinkProfile({
+        client,
+        ecosystem,
+        profileToUnlink: profile,
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["profiles"] });
+    },
   });
 
   return (
@@ -126,6 +155,7 @@ function LinkedProfile({
         fontSize: fontSize.sm,
         cursor: "default",
       }}
+      as={"div"}
       disabled // disabled until we have more data to show on a dedicated profile screen
     >
       {socialProfiles?.some((p) => p.avatar) ? (
@@ -178,12 +208,41 @@ function LinkedProfile({
           {socialProfiles?.find((p) => p.avatar)?.name ||
             getProfileDisplayName(profile)}
         </Text>
-        {socialProfiles?.find((p) => p.avatar)?.name &&
-          profile.details.address && (
-            <Text color="secondaryText" size="sm">
-              {shortenAddress(profile.details.address, 4)}
-            </Text>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            gap: "8px",
+          }}
+        >
+          {socialProfiles?.find((p) => p.avatar)?.name &&
+            profile.details.address && (
+              <Text color="secondaryText" size="sm">
+                {shortenAddress(profile.details.address, 4)}
+              </Text>
+            )}
+          {enableUnlinking && (
+            <IconButton
+              autoFocus
+              type="button"
+              aria-label="Close"
+              onClick={() => unlinkProfileMutation()}
+              style={{
+                pointerEvents: "auto",
+              }}
+              disabled={isPending}
+            >
+              <Cross2Icon
+                width={iconSize.md}
+                height={iconSize.md}
+                style={{
+                  color: "inherit",
+                }}
+              />
+            </IconButton>
           )}
+        </div>
       </div>
     </MenuButton>
   );

packages/thirdweb/src/wallets/in-app/core/authentication/linkAccount.ts

@@ -57,6 +57,55 @@ export async function linkAccount({
   return (linkedAccounts ?? []) satisfies Profile[];
 }
 
+/**
+ * @description
+ * Links a new account to the current one using an auth token.
+ * For the public-facing API, use `wallet.linkProfile` instead.
+ *
+ * @internal
+ */
+export async function unlinkAccount({
+  client,
+  ecosystem,
+  profileToUnlink,
+  storage,
+}: {
+  client: ThirdwebClient;
+  ecosystem?: Ecosystem;
+  profileToUnlink: Profile;
+  storage: ClientScopedStorage;
+}): Promise<Profile[]> {
+  const clientFetch = getClientFetch(client, ecosystem);
+  const IN_APP_URL = getThirdwebBaseUrl("inAppWallet");
+  const currentAccountToken = await storage.getAuthCookie();
+
+  if (!currentAccountToken) {
+    throw new Error("Failed to unlink account, no user logged in");
+  }
+
+  const headers: Record<string, string> = {
+    Authorization: `Bearer iaw-auth-token:${currentAccountToken}`,
+    "Content-Type": "application/json",
+  };
+  const linkedDetailsResp = await clientFetch(
+    `${IN_APP_URL}/api/2024-05-05/account/disconnect`,
+    {
+      method: "POST",
+      headers,
+      body: stringify(profileToUnlink),
+    },
+  );
+
+  if (!linkedDetailsResp.ok) {
+    const body = await linkedDetailsResp.json();
+    throw new Error(body.message || "Failed to unlink account.");
+  }
+
+  const { linkedAccounts } = await linkedDetailsResp.json();
+
+  return (linkedAccounts ?? []) satisfies Profile[];
+}
+
 /**
  * @description
  * Gets the linked accounts for the current user.

packages/thirdweb/src/wallets/in-app/core/authentication/types.ts

@@ -250,3 +250,9 @@ export type GetAuthenticatedUserParams = {
   client: ThirdwebClient;
   ecosystem?: Ecosystem;
 };
+
+export type UnlinkParams = {
+  client: ThirdwebClient;
+  ecosystem?: Ecosystem;
+  profileToUnlink: Profile;
+};

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

@@ -36,5 +36,6 @@ export interface InAppConnector {
   ): Promise<AuthLoginReturnType>;
   logout(): Promise<LogoutReturnType>;
   linkProfile(args: AuthArgsType): Promise<Profile[]>;
+  unlinkProfile(args: Profile): Promise<Profile[]>;
   getProfiles(): Promise<Profile[]>;
 }

packages/thirdweb/src/wallets/in-app/native/auth/index.ts

@@ -3,6 +3,7 @@ import type {
   AuthArgsType,
   GetAuthenticatedUserParams,
   PreAuthArgsType,
+  UnlinkParams,
 } from "../../core/authentication/types.js";
 import { getOrCreateInAppWalletConnector } from "../../core/wallet/in-app-core.js";
 import type { Ecosystem } from "../../core/wallet/types.js";
@@ -146,9 +147,6 @@ export async function authenticate(args: AuthArgsType) {
  *
  * **When a profile is linked to the account, that profile can then be used to sign into the account.**
  *
- * This method is only available for in-app wallets.
- *
- * @param wallet - The wallet to link an additional profile to.
  * @param auth - The authentications options to add the new profile.
  * @returns A promise that resolves to the currently linked profiles when the connection is successful.
  * @throws If the connection fails, if the profile is already linked to the account, or if the profile is already associated with another account.
@@ -167,6 +165,36 @@ export async function linkProfile(args: AuthArgsType) {
   return await connector.linkProfile(args);
 }
 
+/**
+ * Disconnects an existing profile (authentication method) from the current user. Once disconnected, that profile can no longer be used to sign into the account.
+ *
+ * @param args - The object containing the profile that we want to unlink.
+ * @returns A promise that resolves to the updated linked profiles.
+ * @throws If the unlinking fails. This can happen if the account has no other associated profiles or if the profile that is being unlinked doesn't exists for the current logged in user.
+ *
+ * @example
+ * ```ts
+ * import { inAppWallet } from "thirdweb/wallets";
+ *
+ * const wallet = inAppWallet();
+ * wallet.connect({ strategy: "google" });
+ *
+ * const profiles = await getProfiles({
+ *  client,
+ * });
+ *
+ * const updatedProfiles = await unlinkProfile({
+ *  client,
+ *  profileToUnlink: profiles[0],
+ * });
+ * ```
+ * @wallet
+ */
+export async function unlinkProfile(args: UnlinkParams) {
+  const connector = await getInAppWalletConnector(args.client, args.ecosystem);
+  return await connector.unlinkProfile(args.profileToUnlink);
+}
+
 /**
  * Gets the linked profiles for the connected in-app or ecosystem wallet.
  *

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

@@ -10,6 +10,7 @@ import { customJwt } from "../core/authentication/jwt.js";
 import {
   getLinkedProfilesInternal,
   linkAccount,
+  unlinkAccount,
 } from "../core/authentication/linkAccount.js";
 import {
   loginWithPasskey,
@@ -24,6 +25,7 @@ import type {
   LogoutReturnType,
   MultiStepAuthArgsType,
   MultiStepAuthProviderType,
+  Profile,
   SingleStepAuthArgsType,
 } from "../core/authentication/types.js";
 import type { InAppConnector } from "../core/interfaces/connector.js";
@@ -332,6 +334,15 @@ export class InAppNativeConnector implements InAppConnector {
     });
   }
 
+  async unlinkProfile(profile: Profile) {
+    return await unlinkAccount({
+      client: this.client,
+      ecosystem: this.ecosystem,
+      storage: this.storage,
+      profileToUnlink: profile,
+    });
+  }
+
   async getProfiles() {
     return getLinkedProfilesInternal({
       client: this.client,

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

@@ -5,6 +5,7 @@ import type {
   GetAuthenticatedUserParams,
   PreAuthArgsType,
   SocialAuthArgsType,
+  UnlinkParams,
 } from "../../../core/authentication/types.js";
 import { getOrCreateInAppWalletConnector } from "../../../core/wallet/in-app-core.js";
 import type { Ecosystem } from "../../../core/wallet/types.js";
@@ -204,6 +205,36 @@ export async function linkProfile(args: AuthArgsType) {
   return await connector.linkProfile(args);
 }
 
+/**
+ * Disconnects an existing profile (authentication method) from the current user. Once disconnected, that profile can no longer be used to sign into the account.
+ *
+ * @param args - The object containing the profile that we want to unlink.
+ * @returns A promise that resolves to the updated linked profiles.
+ * @throws If the unlinking fails. This can happen if the account has no other associated profiles or if the profile that is being unlinked doesn't exists for the current logged in user.
+ *
+ * @example
+ * ```ts
+ * import { inAppWallet } from "thirdweb/wallets";
+ *
+ * const wallet = inAppWallet();
+ * wallet.connect({ strategy: "google" });
+ *
+ * const profiles = await getProfiles({
+ *  client,
+ * });
+ *
+ * const updatedProfiles = await unlinkProfile({
+ *  client,
+ *  profileToUnlink: profiles[0],
+ * });
+ * ```
+ * @wallet
+ */
+export async function unlinkProfile(args: UnlinkParams) {
+  const connector = await getInAppWalletConnector(args.client, args.ecosystem);
+  return await connector.unlinkProfile(args.profileToUnlink);
+}
+
 /**
  * Gets the linked profiles for the connected in-app or ecosystem wallet.
  *

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

@@ -11,6 +11,7 @@ import { customJwt } from "../../core/authentication/jwt.js";
 import {
   getLinkedProfilesInternal,
   linkAccount,
+  unlinkAccount,
 } from "../../core/authentication/linkAccount.js";
 import {
   loginWithPasskey,
@@ -25,6 +26,7 @@ import type {
   LogoutReturnType,
   MultiStepAuthArgsType,
   MultiStepAuthProviderType,
+  Profile,
   SingleStepAuthArgsType,
 } from "../../core/authentication/types.js";
 import type { InAppConnector } from "../../core/interfaces/connector.js";
@@ -456,6 +458,15 @@ export class InAppWebConnector implements InAppConnector {
     });
   }
 
+  async unlinkProfile(profile: Profile) {
+    return await unlinkAccount({
+      client: this.client,
+      storage: this.storage,
+      ecosystem: this.ecosystem,
+      profileToUnlink: profile,
+    });
+  }
+
   async getProfiles() {
     return getLinkedProfilesInternal({
       client: this.client,