fix: resolve Web3Auth social login failure caused by unreliable default RPCs

.changeset/fix-web3auth-social-login.md

@@ -0,0 +1,11 @@
+---
+"@everipedia/iq-login": patch
+---
+
+Fix Web3Auth social login by replacing unreliable viem default RPCs with PublicNode RPCs
+
+Viem's default RPCs (eth.merkle.io, polygon-rpc.com) fail for the RPC methods Web3Auth
+calls during provider setup after OAuth, causing social login to silently fail and return
+to the modal. This replaces them with reliable PublicNode RPCs for known chains and fixes
+the blockExplorerUrl bug where string indexing returned a single character instead of the
+full URL.

src/config/iq-login.config.ts

@@ -35,6 +35,11 @@ export interface IqLoginConfig {
 	chains: [Chain, ...Chain[]];
 }
 
+export const WEB3AUTH_RPC_TARGETS: Record<number, string> = {
+	1: "https://ethereum-rpc.publicnode.com",
+	137: "https://polygon-bor-rpc.publicnode.com",
+};
+
 export function createIqLoginConfig(
 	chains: [Chain, ...Chain[]] = [mainnet],
 ): IqLoginConfig {
@@ -85,16 +90,19 @@ function createWeb3AuthInstance(defaultChain: Chain) {
 	const chainConfig = {
 		chainNamespace: Web3AuthBase.CHAIN_NAMESPACES.EIP155,
 		chainId: `0x${defaultChain.id.toString(16)}`,
-		rpcTarget: defaultChain.rpcUrls.default.http[0],
+		rpcTarget:
+			WEB3AUTH_RPC_TARGETS[defaultChain.id] ??
+			defaultChain.rpcUrls.default.http[0],
 		displayName: defaultChain.name,
 		tickerName: defaultChain.nativeCurrency?.name,
 		ticker: defaultChain.nativeCurrency?.symbol,
-		blockExplorerUrl: defaultChain.blockExplorers?.default.url[0] as string,
+		blockExplorerUrl: defaultChain.blockExplorers?.default.url,
 	};
 
-	// Initialize Web3Auth with only the default chain
+	// Initialize Web3Auth with the default chain
 	return new Web3AuthModal.Web3Auth({
 		clientId: WEB_3_AUTH_CLIENT_ID,
+		chainConfig,
 		privateKeyProvider: new Web3AuthEthereumProvider.EthereumPrivateKeyProvider(
 			{
 				config: { chainConfig },

src/hooks/use-web-3-auth.tsx

@@ -3,6 +3,7 @@ import { CHAIN_NAMESPACES } from "@web3auth/base";
 import type { Web3Auth } from "@web3auth/modal";
 import { createContext, useContext, useEffect, useState } from "react";
 import type { Chain } from "viem/chains";
+import { WEB3AUTH_RPC_TARGETS } from "../config/iq-login.config";
 
 export interface Web3AuthContextType {
 	web3Auth: Web3Auth | null;
@@ -45,11 +46,12 @@ export function Web3AuthProvider({
 						const chainConfig = {
 							chainNamespace: CHAIN_NAMESPACES.EIP155,
 							chainId: `0x${chain.id.toString(16)}`,
-							rpcTarget: chain.rpcUrls.default.http[0],
+							rpcTarget:
+								WEB3AUTH_RPC_TARGETS[chain.id] ?? chain.rpcUrls.default.http[0],
 							displayName: chain.name,
 							tickerName: chain.nativeCurrency?.name,
 							ticker: chain.nativeCurrency?.symbol,
-							blockExplorerUrl: chain.blockExplorers?.default.url[0] as string,
+							blockExplorerUrl: chain.blockExplorers?.default.url,
 						};
 
 						await web3AuthInstance.addChain(chainConfig);