feat: Add Farcaster miniapp support for identity verification flow #10

apps/demo-identity-app/package.json

@@ -11,6 +11,7 @@
     "format": "prettier --write ."
   },
   "dependencies": {
+    "@farcaster/miniapp-sdk": "^0.1.8",
     "@goodsdks/citizen-sdk": "*",
     "@goodsdks/react-hooks": "*",
     "@reown/appkit": "^1.7.2",

apps/demo-identity-app/src/App.tsx

@@ -14,6 +14,7 @@ import { config } from "@tamagui/config/v3"
 import { useLocation } from "react-router-dom"
 import { useAccount } from "wagmi"
 import { useIdentitySDK } from "@goodsdks/react-hooks"
+import { handleVerificationResponse, isInFarcasterMiniApp, isInFarcasterMiniAppSync } from "@goodsdks/citizen-sdk"
 
 import { VerifyButton } from "./components/VerifyButton"
 import { IdentityCard } from "./components/IdentityCard"
@@ -31,6 +32,7 @@ const App: React.FC = () => {
   const [loadingWhitelist, setLoadingWhitelist] = useState<boolean | undefined>(
     undefined,
   )
+  const [isFarcasterMode, setIsFarcasterMode] = useState<boolean>(false)
 
   const location = useLocation()
   const { address, isConnected } = useAccount()
@@ -40,13 +42,33 @@ const App: React.FC = () => {
   const { sdk: identitySDK } = useIdentitySDK("development")
 
   useEffect(() => {
-    const urlParams = new URLSearchParams(location.search)
-    const verified = urlParams.get("verified")
-
-    if (verified === "true") {
+    // Check if running in Farcaster miniapp mode (async)
+    const checkFarcasterMode = async () => {
+      try {
+        const isFarcaster = await isInFarcasterMiniApp()
+        setIsFarcasterMode(isFarcaster)
+      } catch (error) {
+        // Fallback to sync version if async fails
+        console.warn('Async Farcaster detection failed, using sync fallback:', error)
+        setIsFarcasterMode(isInFarcasterMiniAppSync())
+      }
+    }
+
+    checkFarcasterMode()
+
+    // Use the new verification response handler
+    const verificationResult = handleVerificationResponse()
+
+    if (verificationResult.isVerified) {
       setIsVerified(true)
+      // Clean up URL parameters
       window.history.replaceState({}, document.title, window.location.pathname)
     }
+
+    // Log additional verification parameters for debugging
+    if (verificationResult.params.size > 0) {
+      console.log("Verification response parameters:", Object.fromEntries(verificationResult.params))
+    }
   }, [location.search])
 
   //ref: https://github.com/wevm/wagmi/discussions/1806#discussioncomment-12130996
@@ -108,6 +130,22 @@ const App: React.FC = () => {
           >
             GoodDollar Identity Verification
           </Text>
+
+          {isFarcasterMode && (
+            <YStack
+              padding="$2"
+              backgroundColor="#E3F2FD"
+              borderRadius="$3"
+              borderWidth={1}
+              borderColor="#2196F3"
+              marginVertical={8}
+            >
+              <Text fontSize={12} color="#1976D2" textAlign="center" fontWeight="bold">
+                Farcaster MiniApp Mode Detected
+              </Text>
+
+            </YStack>
+          )}
 
           {/* Disclaimer Section */}
           <YStack
@@ -263,4 +301,4 @@ const App: React.FC = () => {
   )
 }
 
-export default App
+export default App

apps/demo-identity-app/src/components/VerifyButton.tsx

@@ -4,7 +4,7 @@ import { useIdentitySDK } from "@goodsdks/react-hooks"
 import { useAccount } from "wagmi"
 
 interface VerifyButtonProps {
-  onVerificationSuccess: () => void
+  onVerificationSuccess?: () => void
 }
 
 export const VerifyButton: React.FC<VerifyButtonProps> = ({
@@ -17,13 +17,13 @@ export const VerifyButton: React.FC<VerifyButtonProps> = ({
     if (!identitySDK || !address) return
 
     try {
-      const fvLink = await identitySDK.generateFVLink(
+      // Use the SDK's navigation method which now uses the shared utility
+      await identitySDK.navigateToFaceVerification(
         false,
         window.location.href,
-        42220,
+        42220
       )
-
-      window.location.href = fvLink
+      onVerificationSuccess?.()
     } catch (error) {
       console.error("Verification failed:", error)
       // Handle error (e.g., show toast)
@@ -42,4 +42,4 @@ export const VerifyButton: React.FC<VerifyButtonProps> = ({
       Verify Me
     </Button>
   )
-}
+}

apps/demo-identity-app/src/globals.d.ts

@@ -1,3 +1,5 @@
+import React from "react"
+
 declare namespace JSX {
   interface IntrinsicElements {
     "claim-button": React.DetailedHTMLProps<

apps/demo-identity-app/vite.config.mts

@@ -2,6 +2,7 @@ import { defineConfig } from "vite";
 import path from "path";
 import react from "@vitejs/plugin-react";
 import fs from "fs";
+import { builtinModules } from "module";
 
 let https: any;
 if (process.env.HTTPS === "true") {
@@ -13,6 +14,19 @@ if (process.env.HTTPS === "true") {
   https = false;
 }
 
+const nodeBuiltins = [
+  ...builtinModules,
+  ...builtinModules.map((m) => `node:${m}`)
+];
+
+const nodeBuiltinGlobals = nodeBuiltins.reduce((acc, name) => {
+  // Strip the `node:` prefix for the global key if present
+  const key = name.startsWith('node:') ? name.slice(5) : name
+  // Map both `foo` and `node:foo` → global `foo`
+  acc[name] = key
+  return acc
+}, {} as Record<string, string>);
+
 export default defineConfig({
   resolve: {
     dedupe: ["react", "react-dom", "wagmi", "viem"],
@@ -29,6 +43,15 @@ export default defineConfig({
   plugins: [react()],
   define: {
     "process.browser": true,
-    "process.env": process.env,
+    // Only define specific env vars instead of the entire process.env object
+    "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || "development"),
   },
+  build: {
+    rollupOptions: {
+      external: nodeBuiltins,
+      output: {
+        globals: nodeBuiltinGlobals
+      }
+    }
+  }
 });

apps/demo-webcomponents/vite.config.mts

@@ -1,6 +1,7 @@
 import { defineConfig } from "vite"
 import path from "path"
 import fs from "fs"
+import { builtinModules } from "module"
 
 let https: any
 if (process.env.HTTPS === "true") {
@@ -12,6 +13,19 @@ if (process.env.HTTPS === "true") {
   https = false
 }
 
+const nodeBuiltins = [
+  ...builtinModules,
+  ...builtinModules.map((m) => `node:${m}`)
+]
+
+const nodeBuiltinGlobals = nodeBuiltins.reduce((acc, name) => {
+  // Strip the `node:` prefix for the global key if present
+  const key = name.startsWith('node:') ? name.slice(5) : name
+  // Map both `foo` and `node:foo` → global `foo`
+  acc[name] = key
+  return acc
+}, {} as Record<string, string>)
+
 export default defineConfig({
   resolve: {
     alias: {
@@ -23,6 +37,15 @@ export default defineConfig({
   },
   define: {
     "process.browser": true,
-    "process.env": process.env,
+    // Only define specific env vars instead of the entire process.env object
+    "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || "development"),
   },
+  build: {
+    rollupOptions: {
+      external: nodeBuiltins,
+      output: {
+        globals: nodeBuiltinGlobals
+      }
+    }
+  }
 })

packages/build-config/index.ts

@@ -0,0 +1,41 @@
+import { builtinModules } from "module"
+
+/**
+ * Generate list of Node.js built-in modules for external configuration
+ * Includes both standard names and node: prefixed versions
+ */
+export function getNodeBuiltins(): string[] {
+  return [
+    ...builtinModules,
+    ...builtinModules.map((m) => `node:${m}`)
+  ]
+}
+
+/**
+ * Generate globals mapping for Node.js built-ins
+ * Maps both `foo` and `node:foo` to global `foo`
+ */
+export function getNodeBuiltinGlobals(): Record<string, string> {
+  const builtins = getNodeBuiltins()
+  return builtins.reduce((acc, name) => {
+    // Strip the `node:` prefix for the global key if present
+    const key = name.startsWith('node:') ? name.slice(5) : name
+    // Map both `foo` and `node:foo` → global `foo`
+    acc[name] = key
+    return acc
+  }, {} as Record<string, string>)
+}
+
+/**
+ * Common external dependencies for browser builds
+ */
+export const COMMON_EXTERNALS = [
+  "@goodsdks/citizen-sdk",
+  "viem",
+  ...getNodeBuiltins()
+]
+
+/**
+ * Regex pattern to match all node: imports
+ */
+export const NODE_MODULES_REGEX = /^node:/

packages/build-config/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@repo/build-config",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "main": "./index.ts",
+  "exports": {
+    ".": "./index.ts"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "typescript": "^5.0.0"
+  }
+}

packages/citizen-sdk/src/index.ts

@@ -1,2 +1,4 @@
 export * from "./sdks"
 export * from "./constants"
+export * from "./utils/auth"
+export * from "./utils/farcaster-navigation"

packages/citizen-sdk/src/sdks/viem-claim-sdk.ts

@@ -266,18 +266,12 @@ export class ClaimSDK {
   }
 
   /**
-   * Redirects the user through the face-verification flow.
+   * Redirects the user through the face-verification flow with Farcaster support.
    * @throws If face verification redirect fails.
    */
   private async fvRedirect(): Promise<void> {
-    const fvLink = await this.identitySDK.generateFVLink(false, this.rdu, 42220)
-    if (typeof window !== "undefined") {
-      window.location.href = fvLink
-    } else {
-      throw new Error(
-        "Face verification redirect is only supported in browser environments.",
-      )
-    }
+    // Use the new navigation method that handles Farcaster automatically
+    await this.identitySDK.navigateToFaceVerification(false, this.rdu, 42220)
   }
 
   /**

packages/citizen-sdk/src/sdks/viem-custodial-claim-sdk.ts

@@ -12,7 +12,7 @@ import {
 
 import { waitForTransactionReceipt } from "viem/actions"
 import { ClaimSDK, type ClaimSDKOptions } from "./viem-claim-sdk" // Import the base ClaimSDK
-import type { WalletClaimStatus } from "../types"
+import type { WalletClaimStatus } from "./viem-claim-sdk"
 
 interface ClaimCustodialSDKOptions extends Omit<ClaimSDKOptions, 'account'> {
     // Remove account from the options since we'll get it from walletClient

packages/citizen-sdk/src/sdks/viem-custodial-identity-sdk.ts

@@ -58,6 +58,7 @@ export class IdentityCustodialSDK extends IdentitySDK {
         popupMode: boolean = false,
         callbackUrl?: string,
         chainId?: number,
+        useFarcasterNavigation?: boolean,
     ): Promise<string> {
         try {
             const account = this.walletClient.account
@@ -108,7 +109,15 @@ export class IdentityCustodialSDK extends IdentitySDK {
             }
 
             if (callbackUrl) {
-                params[popupMode ? "cbu" : "rdu"] = callbackUrl
+                // Import utility functions for universal link support
+                const { createUniversalLinkCallback } = await import("../utils/auth")
+
+                // Create universal link compatible callback for mobile/native support
+                const universalCallbackUrl = createUniversalLinkCallback(callbackUrl, {
+                    source: "gooddollar_identity_verification"
+                })
+
+                params[popupMode ? "cbu" : "rdu"] = universalCallbackUrl
             }
 
             url.searchParams.append(