feat: farcaster login (#3827)

### TL;DR

Added Farcaster icon and login support to the thirdweb package.

### What changed?

- Added Farcaster icon to `socialIcons.ts` and `svgs.ts`
- Updated `WalletImage.tsx` to include Farcaster icon.
- Added Farcaster as a supported social login option throughout the codebase.

### How to test?

1. Ensure the Farcaster icon is rendered correctly by using the Farcaster login option.
2. Verify the Farcaster login flow works as expected on both web and native applications.

### Why make this change?

This update adds support for Farcaster as a social login option, enhancing the flexibility and options available to users for authentication.

---

<!-- start pr-codex -->

---

## PR-Codex overview
This PR adds support for the "Farcaster" authentication option in various parts of the application.

### Detailed summary
- Added "Farcaster" as an authentication option
- Updated login and connection flows to include "Farcaster"
- Introduced Farcaster icons for web and native UI components
- Enhanced social auth login paths to support Farcaster

> The following files were skipped due to too many changes: `packages/thirdweb/src/react/core/utils/socialIcons.ts`

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

<!-- end pr-codex -->

.changeset/spicy-flowers-return.md

@@ -0,0 +1,12 @@
+---
+"thirdweb": minor
+---
+
+Adds SIWF for in-app wallets
+
+```ts
+await wallet.connect({
+    strategy: "farcaster",
+    client: CLIENT,
+});
+```

apps/playground-web/src/lib/constants.ts

@@ -9,12 +9,12 @@ export const WALLETS = [
     auth: {
       options: [
         "google",
-        "facebook",
         "discord",
         "apple",
         "email",
         "passkey",
         "phone",
+        "farcaster",
       ],
       mode: "redirect",
     },

packages/thirdweb/src/react/core/utils/socialIcons.ts

@@ -19,6 +19,8 @@ export const twitchIconUri =
   "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgdmlld0JveD0iMCAwIDExMS43ODY2NyAxMjcuMzg2NjciCiAgIGhlaWdodD0iMTI3LjM4NjY3IgogICB3aWR0aD0iMTExLjc4NjY3IgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmczMzU1IgogICBzb2RpcG9kaTpkb2NuYW1lPSJUd2l0Y2hfbG9nby5zdmciCiAgIGlua3NjYXBlOnZlcnNpb249IjEuMS4xICgzYmY1YWUwZDI1LCAyMDIxLTA5LTIwKSIKICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiCiAgIHhtbG5zOnNvZGlwb2RpPSJodHRwOi8vc29kaXBvZGkuc291cmNlZm9yZ2UubmV0L0RURC9zb2RpcG9kaS0wLmR0ZCIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcwogICBpZD0iZGVmczI5Ij4KICAgIAogICAgCiAgPC9kZWZzPjxzb2RpcG9kaTpuYW1lZHZpZXcKICAgaWQ9Im5hbWVkdmlldzI3IgogICBwYWdlY29sb3I9IiNmZmZmZmYiCiAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IgogICBib3JkZXJvcGFjaXR5PSIxLjAiCiAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwLjAiCiAgIGlua3NjYXBlOnBhZ2VjaGVja2VyYm9hcmQ9IjAiCiAgIHNob3dncmlkPSJmYWxzZSIKICAgaW5rc2NhcGU6em9vbT0iNC4xOTkyMjg0IgogICBpbmtzY2FwZTpjeD0iLTUwLjYwNDUzNSIKICAgaW5rc2NhcGU6Y3k9IjE0MC4zODI5MyIKICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIyNTYwIgogICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSIxMzg3IgogICBpbmtzY2FwZTp3aW5kb3cteD0iMTkxMiIKICAgaW5rc2NhcGU6d2luZG93LXk9Ii04IgogICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmczMzU1IiAvPgogIDxnCiAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywxMDEuMzkzMzMsNjcuNTg5MzMyKSIKICAgaWQ9ImczMzY1Ij4KICAgICAgPHBhdGgKICAgaWQ9InBhdGgzMzY3IgogICBzdHlsZT0iZmlsbDojNjQ0MWE1O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTpub25lIgogICBkPSJtIDAsMCAtMTMuNjUyLC0xMy42NTEgaCAtMjEuNDQ1IGwgLTExLjY5OSwtMTEuNjk3IHYgMTEuNjk3IEggLTY0LjM0NCBWIDQyLjg5MyBIIDAgWiBtIC03Mi4xNDYsNTAuNjkyIC0zLjg5OSwtMTUuNTk5IHYgLTcwLjE5IGggMTcuNTUgdiAtOS43NTEgaCA5Ljc0NiBsIDkuNzUyLDkuNzUxIGggMTUuNTk2IEwgNy43OTUsLTMuOTA1IHYgNTQuNTk3IHoiIC8+CiAgICA8L2c+PHBhdGgKICAgaWQ9InBhdGgzMzY5IgogICBzdHlsZT0iZmlsbDojNjQ0MWE1O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxLjMzMzMzIgogICBkPSJtIDQ0LjE5NzMzMSw2Mi4zOTQyNjYgaCAxMC4zOTg2NyBWIDMxLjE5MjkzMyBoIC0xMC4zOTg2NyB6IG0gMjguNTk0NjcsMCBoIDEwLjM5ODY2IFYgMzEuMTkyOTMzIGggLTEwLjM5ODY2IHoiIC8+Cjwvc3ZnPgo=";
 export const discordIconUri =
   "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBpZD0iZGlzY29yZCI+PHBhdGggZmlsbD0iIzY2NjVkMiIgZD0iTTg1LjIyLDI0Ljk1OGMtMTEuNDU5LTguNTc1LTIyLjQzOC04LjMzNC0yMi40MzgtOC4zMzRsLTEuMTIyLDEuMjgyCgkJCQljMTMuNjIzLDQuMDg3LDE5Ljk1NCwxMC4wOTcsMTkuOTU0LDEwLjA5N2MtMTkuNDkxLTEwLjczMS00NC4zMTctMTAuNjU0LTY0LjU5LDBjMCwwLDYuNTcxLTYuMzMxLDIwLjk5Ni0xMC40MThsLTAuODAxLTAuOTYyCgkJCQljMCwwLTEwLjg5OS0wLjI0LTIyLjQzOCw4LjMzNGMwLDAtMTEuNTQsMjAuNzU1LTExLjU0LDQ2LjMxOWMwLDAsNi43MzIsMTEuNTQsMjQuNDQyLDEyLjEwMWMwLDAsMi45NjUtMy41MjYsNS4zNjktNi41NzEKCQkJCWMtMTAuMTc3LTMuMDQ1LTE0LjAyNC05LjM3Ni0xNC4wMjQtOS4zNzZjNi4zOTQsNC4wMDEsMTIuODU5LDYuNTA1LDIwLjkxNiw4LjA5NGMxMy4xMDgsMi42OTgsMjkuNDEzLTAuMDc2LDQxLjU5MS04LjA5NAoJCQkJYzAsMC00LjAwNyw2LjQ5MS0xNC41MDUsOS40NTZjMi40MDQsMi45NjUsNS4yODksNi40MTEsNS4yODksNi40MTFjMTcuNzEtMC41NjEsMjQuNDQxLTEyLjEwMSwyNC40NDEtMTIuMDIKCQkJCUM5Ni43NTksNDUuNzEzLDg1LjIyLDI0Ljk1OCw4NS4yMiwyNC45NTh6IE0zNS4wNTUsNjMuODI0Yy00LjQ4OCwwLTguMTc0LTMuOTI3LTguMTc0LTguODE1CgkJCQljMC4zMjgtMTEuNzA3LDE2LjEwMi0xMS42NzEsMTYuMzQ4LDBDNDMuMjI5LDU5Ljg5NywzOS42MjIsNjMuODI0LDM1LjA1NSw2My44MjR6IE02NC4zMDQsNjMuODI0CgkJCQljLTQuNDg4LDAtOC4xNzQtMy45MjctOC4xNzQtOC44MTVjMC4zNi0xMS42ODQsMTUuOTM3LTExLjY4OSwxNi4zNDgsMEM3Mi40NzgsNTkuODk3LDY4Ljg3Miw2My44MjQsNjQuMzA0LDYzLjgyNHoiPjwvcGF0aD48L3N2Zz4=";
+export const farcasterIconUri =
+  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIiB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cmVjdCB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIiByeD0iMjAwIiBmaWxsPSIjODU1RENEIi8+CjxwYXRoIGQ9Ik0yNTcuNzc4IDE1NS41NTZINzQyLjIyMlY4NDQuNDQ0SDY3MS4xMTFWNTI4Ljg4OUg2NzAuNDE0QzY2Mi41NTQgNDQxLjY3NyA1ODkuMjU4IDM3My4zMzMgNTAwIDM3My4zMzNDNDEwLjc0MiAzNzMuMzMzIDMzNy40NDYgNDQxLjY3NyAzMjkuNTg2IDUyOC44ODlIMzI4Ljg4OVY4NDQuNDQ0SDI1Ny43NzhWMTU1LjU1NloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0xMjguODg5IDI1My4zMzNMMTU3Ljc3OCAzNTEuMTExSDE4Mi4yMjJWNzQ2LjY2N0MxNjkuOTQ5IDc0Ni42NjcgMTYwIDc1Ni42MTYgMTYwIDc2OC44ODlWNzk1LjU1NkgxNTUuNTU2QzE0My4yODMgNzk1LjU1NiAxMzMuMzMzIDgwNS41MDUgMTMzLjMzMyA4MTcuNzc4Vjg0NC40NDRIMzgyLjIyMlY4MTcuNzc4QzM4Mi4yMjIgODA1LjUwNSAzNzIuMjczIDc5NS41NTYgMzYwIDc5NS41NTZIMzU1LjU1NlY3NjguODg5QzM1NS41NTYgNzU2LjYxNiAzNDUuNjA2IDc0Ni42NjcgMzMzLjMzMyA3NDYuNjY3SDMwNi42NjdWMjUzLjMzM0gxMjguODg5WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTY3NS41NTYgNzQ2LjY2N0M2NjMuMjgzIDc0Ni42NjcgNjUzLjMzMyA3NTYuNjE2IDY1My4zMzMgNzY4Ljg4OVY3OTUuNTU2SDY0OC44ODlDNjM2LjYxNiA3OTUuNTU2IDYyNi42NjcgODA1LjUwNSA2MjYuNjY3IDgxNy43NzhWODQ0LjQ0NEg4NzUuNTU2VjgxNy43NzhDODc1LjU1NiA4MDUuNTA1IDg2NS42MDYgNzk1LjU1NiA4NTMuMzMzIDc5NS41NTZIODQ4Ljg4OVY3NjguODg5Qzg0OC44ODkgNzU2LjYxNiA4MzguOTQgNzQ2LjY2NyA4MjYuNjY3IDc0Ni42NjdWMzUxLjExMUg4NTEuMTExTDg4MCAyNTMuMzMzSDcwMi4yMjJWNzQ2LjY2N0g2NzUuNTU2WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==";
 export const microsoftIconUri =
   "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgNDggNDgiIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiPjxwYXRoIGZpbGw9IiNmZjU3MjIiIGQ9Ik02IDZIMjJWMjJINnoiIHRyYW5zZm9ybT0icm90YXRlKC0xODAgMTQgMTQpIi8+PHBhdGggZmlsbD0iIzRjYWY1MCIgZD0iTTI2IDZINDJWMjJIMjZ6IiB0cmFuc2Zvcm09InJvdGF0ZSgtMTgwIDM0IDE0KSIvPjxwYXRoIGZpbGw9IiNmZmMxMDciIGQ9Ik0yNiAyNkg0MlY0MkgyNnoiIHRyYW5zZm9ybT0icm90YXRlKC0xODAgMzQgMzQpIi8+PHBhdGggZmlsbD0iIzAzYTlmNCIgZD0iTTYgMjZIMjJWNDJINnoiIHRyYW5zZm9ybT0icm90YXRlKC0xODAgMTQgMzQpIi8+PC9zdmc+";
 
@@ -48,4 +50,5 @@ export const socialIcons = {
   apple: appleIconUri,
   facebook: facebookIconUri,
   discord: discordIconUri,
+  farcaster: farcasterIconUri,
 };

packages/thirdweb/src/react/native/ui/components/WalletImage.tsx

@@ -10,6 +10,7 @@ import {
   DISCORD_ICON,
   EMAIL_ICON,
   FACEBOOK_ICON,
+  FARCASTER_ICON,
   GOOGLE_ICON,
   PHONE_ICON,
   WALLET_ICON,
@@ -76,6 +77,8 @@ export function getAuthProviderImage(lastAuthProvider: string | null): string {
       return FACEBOOK_ICON;
     case "discord":
       return DISCORD_ICON;
+    case "farcaster":
+      return FARCASTER_ICON;
     default:
       return WALLET_ICON;
   }

packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx

@@ -13,6 +13,10 @@ import type {
 } from "../../../../wallets/in-app/core/wallet/types.js";
 import { preAuthenticate } from "../../../../wallets/in-app/native/auth/index.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import {
+  type SocialAuthOption,
+  socialAuthOptions,
+} from "../../../../wallets/types.js";
 import type { Theme } from "../../../core/design-system/index.js";
 import { setLastAuthProvider } from "../../../core/utils/storage.js";
 import { radius, spacing } from "../../design-system/index.js";
@@ -26,6 +30,7 @@ import {
   DISCORD_ICON,
   EMAIL_ICON,
   FACEBOOK_ICON,
+  FARCASTER_ICON,
   GOOGLE_ICON,
   PHONE_ICON,
 } from "../icons/svgs.js";
@@ -44,6 +49,7 @@ const socialIcons = {
   facebook: FACEBOOK_ICON,
   apple: APPLE_ICON,
   discord: DISCORD_ICON,
+  farcaster: FARCASTER_ICON,
 };
 
 type InAppWalletFormUIProps = {
@@ -62,9 +68,8 @@ export function InAppWalletUI(props: InAppWalletFormUIProps) {
   const { wallet, theme } = props;
   const config = wallet.getConfig();
   const authOptions = config?.auth?.options || defaultAuthOptions;
-  const socialLogins = authOptions.filter(
-    (x) =>
-      x === "google" || x === "apple" || x === "facebook" || x === "discord",
+  const socialLogins = authOptions.filter((x) =>
+    socialAuthOptions.includes(x as SocialAuthOption),
   ) as InAppWalletSocialAuth[];
 
   const [inputMode, setInputMode] = useState<"email" | "phone">("email");

packages/thirdweb/src/react/native/ui/icons/svgs.ts

@@ -37,6 +37,13 @@ export const DISCORD_ICON = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink
 </g>
 </svg>`;
 
+export const FARCASTER_ICON = `<svg width={width} height={height} viewBox="0 0 1000 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1000" height="1000" rx="200" fill="#855DCD"/>
+<path d="M257.778 155.556H742.222V844.444H671.111V528.889H670.414C662.554 441.677 589.258 373.333 500 373.333C410.742 373.333 337.446 441.677 329.586 528.889H328.889V844.444H257.778V155.556Z" fill="white"/>
+<path d="M128.889 253.333L157.778 351.111H182.222V746.667C169.949 746.667 160 756.616 160 768.889V795.556H155.556C143.283 795.556 133.333 805.505 133.333 817.778V844.444H382.222V817.778C382.222 805.505 372.273 795.556 360 795.556H355.556V768.889C355.556 756.616 345.606 746.667 333.333 746.667H306.667V253.333H128.889Z" fill="white"/>
+<path d="M675.556 746.667C663.283 746.667 653.333 756.616 653.333 768.889V795.556H648.889C636.616 795.556 626.667 805.505 626.667 817.778V844.444H875.556V817.778C875.556 805.505 865.606 795.556 853.333 795.556H848.889V768.889C848.889 756.616 838.94 746.667 826.667 746.667V351.111H851.111L880 253.333H702.222V746.667H675.556Z" fill="white"/>
+</svg>`;
+
 export const EMAIL_ICON = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M13.3335 2.6665H2.66683C1.93045 2.6665 1.3335 3.26346 1.3335 3.99984V11.9998C1.3335 12.7362 1.93045 13.3332 2.66683 13.3332H13.3335C14.0699 13.3332 14.6668 12.7362 14.6668 11.9998V3.99984C14.6668 3.26346 14.0699 2.6665 13.3335 2.6665Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M14.6668 4.6665L8.68683 8.4665C8.48101 8.59545 8.24304 8.66384 8.00016 8.66384C7.75728 8.66384 7.51931 8.59545 7.3135 8.4665L1.3335 4.6665" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>

packages/thirdweb/src/react/web/ui/components/WalletImage.tsx

@@ -13,6 +13,7 @@ import {
   discordIconUri,
   emailIcon,
   facebookIconUri,
+  farcasterIconUri,
   genericWalletIcon,
   googleIconUri,
   passkeyIcon,
@@ -77,6 +78,9 @@ export function WalletImage(props: {
           case "discord":
             image = discordIconUri;
             break;
+          case "farcaster":
+            image = farcasterIconUri;
+            break;
         }
       } else {
         const mipdImage = getInstalledWalletProviders().find(

packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx

@@ -91,6 +91,7 @@ export const ConnectWalletSocialOptions = (
     facebook: locale.signInWithFacebook,
     apple: locale.signInWithApple,
     discord: locale.signInWithDiscord,
+    farcaster: "Farcaster",
   };
 
   const { data: ecosystemAuthOptions, isLoading } = useQuery({

packages/thirdweb/src/react/web/wallets/shared/oauthSignIn.ts

@@ -33,8 +33,9 @@ function getOauthLoginPath(
     case "apple":
     case "facebook":
     case "google":
+    case "farcaster":
     case "discord":
-      return getSocialAuthLoginPath(authOption, client, ecosystem);
+      return getSocialAuthLoginPath({ authOption, client, ecosystem });
     default:
       return "";
   }

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

@@ -3,17 +3,30 @@ import { getThirdwebBaseUrl } from "../../../../utils/domains.js";
 import type { SocialAuthOption } from "../../../../wallets/types.js";
 import type { Ecosystem } from "../../web/types.js";
 
-export const getSocialAuthLoginPath = (
-  authOption: SocialAuthOption,
-  client: ThirdwebClient,
-  ecosystem?: Ecosystem,
-) => {
-  const baseUrl = `${getThirdwebBaseUrl("inAppWallet")}/api/2024-05-05/login/${authOption}?clientId=${client.clientId}`;
+export const getSocialAuthLoginPath = ({
+  authOption,
+  client,
+  ecosystem,
+  mode = "popup",
+}: {
+  authOption: SocialAuthOption;
+  client: ThirdwebClient;
+  ecosystem?: Ecosystem;
+  mode?: "popup" | "redirect";
+}) => {
+  let baseUrl = `${getThirdwebBaseUrl("inAppWallet")}/api/2024-05-05/login/${authOption}?clientId=${client.clientId}`;
   if (ecosystem?.partnerId) {
-    return `${baseUrl}&ecosystemId=${ecosystem.id}&ecosystemPartnerId=${ecosystem.partnerId}`;
+    baseUrl = `${baseUrl}&ecosystemId=${ecosystem.id}&ecosystemPartnerId=${ecosystem.partnerId}`;
+  } else if (ecosystem) {
+    baseUrl = `${baseUrl}&ecosystemId=${ecosystem.id}`;
   }
-  if (ecosystem) {
-    return `${baseUrl}&ecosystemId=${ecosystem.id}`;
+
+  if (mode === "redirect") {
+    const redirectUrl = new URL(window.location.href);
+    redirectUrl.searchParams.set("walletId", ecosystem?.id || "inApp");
+    redirectUrl.searchParams.set("authProvider", authOption);
+    baseUrl = `${baseUrl}&redirectUrl=${encodeURIComponent(redirectUrl.toString())}`;
   }
+
   return baseUrl;
 };

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

@@ -62,6 +62,7 @@ export enum AuthProvider {
   APPLE = "Apple",
   PASSKEY = "Passkey",
   DISCORD = "Discord",
+  FARCASTER = "Farcaster",
 }
 
 export type OauthOption = {

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

@@ -208,7 +208,11 @@ export async function socialLogin(
   auth: OauthOption,
   client: ThirdwebClient,
 ): Promise<AuthStoredTokenWithCookieReturnType> {
-  const loginUrl = `${getSocialAuthLoginPath(auth.strategy, client)}&redirectUrl=${encodeURIComponent(auth.redirectUrl)}`;
+  const loginUrl = getSocialAuthLoginPath({
+    authOption: auth.strategy,
+    client,
+    mode: "popup",
+  });
 
   const result = await WebBrowser.openAuthSessionAsync(
     loginUrl,

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

@@ -109,6 +109,7 @@ export class InAppNativeConnector implements InAppConnector {
       case "google":
       case "facebook":
       case "discord":
+      case "farcaster":
       case "apple": {
         const ExpoLinking = require("expo-linking");
         const redirectUrl =

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

@@ -2,6 +2,7 @@ import type { ThirdwebClient } from "../../../../../client/client.js";
 import { getThirdwebBaseUrl } from "../../../../../utils/domains.js";
 import type { AuthStoredTokenWithCookieReturnType } from "../../../../../wallets/in-app/core/authentication/type.js";
 import type { SocialAuthOption } from "../../../../../wallets/types.js";
+import { getSocialAuthLoginPath } from "../../../core/authentication/getLoginPath.js";
 import type { Ecosystem } from "../../types.js";
 import { DEFAULT_POP_UP_SIZE } from "./constants.js";
 
@@ -25,30 +26,15 @@ const closeWindow = ({
   }
 };
 
-export const getSocialAuthLoginPath = (
-  authOption: SocialAuthOption,
-  client: ThirdwebClient,
-  ecosystem?: Ecosystem,
-) => {
-  const baseUrl = `${getThirdwebBaseUrl("inAppWallet")}/api/2024-05-05/login/${authOption}?clientId=${client.clientId}`;
-  if (ecosystem?.partnerId) {
-    return `${baseUrl}&ecosystemId=${ecosystem.id}&ecosystemPartnerId=${ecosystem.partnerId}`;
-  }
-  if (ecosystem) {
-    return `${baseUrl}&ecosystemId=${ecosystem.id}`;
-  }
-  return baseUrl;
-};
-
 export const loginWithOauthRedirect = (options: {
   authOption: SocialAuthOption;
   client: ThirdwebClient;
   ecosystem?: Ecosystem;
 }): void => {
-  const redirectUrl = new URL(window.location.href);
-  redirectUrl.searchParams.set("walletId", options.ecosystem?.id || "inApp");
-  redirectUrl.searchParams.set("authProvider", options.authOption);
-  const loginUrl = `${getSocialAuthLoginPath(options.authOption, options.client, options.ecosystem)}&redirectUrl=${encodeURIComponent(redirectUrl.toString())}`;
+  const loginUrl = getSocialAuthLoginPath({
+    ...options,
+    mode: "redirect",
+  });
   window.location.href = loginUrl;
 };
 
@@ -63,11 +49,7 @@ export const loginWithOauth = async (options: {
   let isWindowOpenedByFn = false;
   if (!win) {
     win = window.open(
-      getSocialAuthLoginPath(
-        options.authOption,
-        options.client,
-        options.ecosystem,
-      ),
+      getSocialAuthLoginPath({ ...options, mode: "popup" }),
       `Login to ${options.authOption}`,
       DEFAULT_POP_UP_SIZE,
     );

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

@@ -222,6 +222,7 @@ export class InAppWebConnector implements InAppConnector {
       case "apple":
       case "facebook":
       case "google":
+      case "farcaster":
       case "discord": {
         const authToken = await loginWithOauth({
           authOption: strategy,

packages/thirdweb/src/wallets/types.ts

@@ -24,6 +24,7 @@ export const socialAuthOptions = [
   "apple",
   "facebook",
   "discord",
+  "farcaster",
 ] as const;
 export type SocialAuthOption = (typeof socialAuthOptions)[number];