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

apps/demo-identity-app/index.html

@@ -10,4 +10,4 @@
     <div id="app"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
-</html>
+</html>

apps/demo-identity-app/package.json

@@ -52,4 +52,4 @@
     "typescript": "^5.8.2",
     "vite": "6.3.5"
   }
-}
+}

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

@@ -14,11 +14,13 @@ import { config } from "@tamagui/config/v3"
 import { useLocation } from "react-router-dom"
 import { useAccount } from "wagmi"
 import { useIdentitySDK } from "@goodsdks/react-hooks"
+import { handleVerificationResponse, handleVerificationResponseSync, isInFarcasterMiniApp, isInFarcasterMiniAppSync } from "@goodsdks/citizen-sdk"
 
 import { VerifyButton } from "./components/VerifyButton"
 import { IdentityCard } from "./components/IdentityCard"
 import { SigningModal } from "./components/SigningModal"
 import { ClaimButton } from "./components/ClaimButton"
+import { sdk } from '@farcaster/miniapp-sdk'
 
 const tamaguiConfig = createTamagui(config)
 
@@ -31,6 +33,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,14 +43,166 @@ const App: React.FC = () => {
   const { sdk: identitySDK } = useIdentitySDK("development")
 
   useEffect(() => {
-    const urlParams = new URLSearchParams(location.search)
-    const verified = urlParams.get("verified")
+    // Initialize Farcaster SDK
+    const initializeFarcasterSDK = async () => {
+      try {
+        await sdk.actions.ready()
+        //console.log('Farcaster SDK initialized successfully')
+
+        // Enable back navigation for Farcaster miniapp
+        try {
+          await sdk.back.enableWebNavigation()
+          //console.log('Farcaster back navigation enabled')
+        } catch (backError) {
+          //console.warn('Failed to enable Farcaster back navigation:', backError)
+        }
+      } catch (error) {
+        //console.warn('Failed to initialize Farcaster SDK:', error)
+      }
+    }
+
+    // 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())
+      }
+    }
+
+    // Handle verification response with proper async support and error handling
+    const handleVerification = async () => {
+      try {
+        const result = await handleVerificationResponse(
+          window.location.href,
+          address,
+          identitySDK?.publicClient,
+          42220,
+          "development"
+        );
+
+        if (result.isVerified) {
+          setIsVerified(true);
+          // Clean up URL parameters
+          window.history.replaceState({}, document.title, window.location.pathname);
+        }
+
+        // Log additional verification parameters for debugging
+        if (result.params.size > 0) {
+          //console.log("Verification response parameters:", Object.fromEntries(result.params));
+        }
+
+        // Log verification details for debugging
+        // console.log("Verification result:", {
+        //   isVerified: result.isVerified,
+        //   verified: result.verified,
+        //   onChainVerified: result.onChainVerified
+        // });
+      } catch (error) {
+        //console.error('Verification response error:', error);
+        // Fallback to sync version if async fails
+        try {
+          const syncResult = handleVerificationResponseSync();
+          if (syncResult.isVerified) {
+            setIsVerified(true);
+            window.history.replaceState({}, document.title, window.location.pathname);
+          }
+        } catch (syncError) {
+          //console.error('Sync verification fallback failed:', syncError);
+        }
+      }
+    };
+
+    initializeFarcasterSDK()
+    checkFarcasterMode()
+    handleVerification()
+  }, [location.search, address, identitySDK])
+
+  // Add custom back navigation handler for Farcaster
+  useEffect(() => {
+    const handleBackNavigation = () => {
+      if (isFarcasterMode) {
+        //console.log('Back navigation triggered in Farcaster mode')
+        // Handle back navigation logic here if needed
+        // For now, just log the event
+      }
+    }
 
-    if (verified === "true") {
-      setIsVerified(true)
-      window.history.replaceState({}, document.title, window.location.pathname)
+    // Listen for back navigation events
+    window.addEventListener('popstate', handleBackNavigation)
+
+    return () => {
+      window.removeEventListener('popstate', handleBackNavigation)
     }
-  }, [location.search])
+  }, [isFarcasterMode])
+
+  // Handle verification callback for Farcaster Universal Links
+  useEffect(() => {
+    const handleVerificationCallback = () => {
+      // Check for verification parameters in URL (Farcaster appends these to homeUrl)
+      const urlParams = new URLSearchParams(window.location.search);
+      const hasVerificationParams = urlParams.has('verified') || 
+                                   urlParams.has('account') || 
+                                   urlParams.has('nonce') || 
+                                   urlParams.has('fvsig');
+
+      if (hasVerificationParams) {
+        //console.log('Verification parameters detected in URL:', Object.fromEntries(urlParams));
+
+        // Process verification response
+        const handleCallback = async () => {
+          try {
+            const result = await handleVerificationResponse(
+              window.location.href,
+              address,
+              identitySDK?.publicClient,
+              42220,
+              "development"
+            );
+
+            //console.log('Verification result:', result);
+
+            if (result.isVerified) {
+              setIsVerified(true);
+              //console.log('Verification successful via Farcaster Universal Link');
+
+              // Clean up URL parameters but keep the path
+              const cleanUrl = window.location.origin + window.location.pathname;
+              window.history.replaceState({}, document.title, cleanUrl);
+
+              // If in Farcaster, show back navigation
+              if (isFarcasterMode) {
+                try {
+                  // Set up back navigation handler
+                  sdk.back.onback = () => {
+                    //console.log('Back navigation triggered - returning to Farcaster');
+                    // Farcaster will handle the actual navigation
+                  }
+
+                  // Show the back control
+                  await sdk.back.show()
+                  //console.log('Back control shown in Farcaster');
+                } catch (navError) {
+                  //console.warn('Failed to show back control in Farcaster:', navError)
+                }
+              }
+            } else {
+              //console.log('Verification failed or not completed');
+            }
+          } catch (error) {
+            //console.error('Verification callback error:', error)
+          }
+        };
+
+        handleCallback();
+      }
+    };
+
+    handleVerificationCallback();
+  }, [location.search, address, identitySDK, isFarcasterMode])
 
   //ref: https://github.com/wevm/wagmi/discussions/1806#discussioncomment-12130996
   // does not react to switch account when triggered from metamask.
@@ -72,7 +227,7 @@ const App: React.FC = () => {
           setIsWhitelisted(isWhitelisted)
           setIsVerified(isWhitelisted ?? false)
         } catch (error) {
-          console.error("Error checking whitelist:", error)
+          //console.error("Error checking whitelist:", error)
         } finally {
           setLoadingWhitelist(false)
         }
@@ -108,6 +263,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 +434,4 @@ const App: React.FC = () => {
   )
 }
 
-export default App
+export default App

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

@@ -1,45 +1,79 @@
-import React from "react"
-import { Button } from "tamagui"
+import React, { useState } from "react"
+import { Button, Spinner } from "tamagui"
 import { useIdentitySDK } from "@goodsdks/react-hooks"
 import { useAccount } from "wagmi"
 
 interface VerifyButtonProps {
-  onVerificationSuccess: () => void
+  // No props needed - verification success is handled by URL callback detection
 }
 
-export const VerifyButton: React.FC<VerifyButtonProps> = ({
-  onVerificationSuccess,
-}) => {
+export const VerifyButton: React.FC<VerifyButtonProps> = () => {
   const { address } = useAccount()
   const { sdk: identitySDK } = useIdentitySDK("development")
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
 
   const handleVerify = async () => {
-    if (!identitySDK || !address) return
+    if (!identitySDK || !address) {
+      setError("Wallet not connected. Please connect your wallet first.")
+      return
+    }
+
+    setIsLoading(true)
+    setError(null)
 
     try {
-      const fvLink = await identitySDK.generateFVLink(
-        false,
+      console.log("Starting face verification process...")
+      console.log("Address:", address)
+      console.log("Callback URL:", window.location.href)
+
+      // Navigate to face verification - this will open in external browser in Farcaster
+      await identitySDK.navigateToFaceVerification(
+        false, // Use redirect mode for proper callback handling
         window.location.href,
-        42220,
+        42220
       )
-
-      window.location.href = fvLink
-    } catch (error) {
-      console.error("Verification failed:", error)
-      // Handle error (e.g., show toast)
+
+      console.log("Face verification navigation initiated successfully")
+      // Note: Verification success will be handled by URL callback detection in App.tsx
+      // when the user returns from the external verification process
+
+    } catch (error: any) {
+      console.error("Face verification navigation failed:", error)
+
+      // Provide specific error messages based on error type
+      if (error.message?.includes("Navigation not supported")) {
+        setError("Navigation is not supported in this environment. Please try in a different browser.")
+      } else if (error.message?.includes("openUrl")) {
+        setError("Failed to open verification page. Please check your browser settings and try again.")
+      } else if (error.message?.includes("signature")) {
+        setError("Failed to sign verification message. Please try again.")
+      } else {
+        setError(error.message || "Verification failed. Please try again.")
+      }
+    } finally {
+      setIsLoading(false)
     }
   }
 
   return (
-    <Button
-      onPress={handleVerify}
-      color="white"
-      backgroundColor="#00AEFF"
-      hoverStyle={{
-        backgroundColor: "black",
-      }}
-    >
-      Verify Me
-    </Button>
+    <div>
+      <Button
+        onPress={handleVerify}
+        disabled={isLoading}
+        color="white"
+        backgroundColor="#00AEFF"
+        hoverStyle={{
+          backgroundColor: "black",
+        }}
+      >
+        {isLoading ? <Spinner size="small" color="white" /> : "Verify Me"}
+      </Button>
+      {error && (
+        <div style={{ color: "red", fontSize: "14px", marginTop: "8px" }}>
+          {error}
+        </div>
+      )}
+    </div>
   )
-}
+}

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

@@ -7,12 +7,11 @@ import React, { ReactNode } from "react"
 
 const queryClient = new QueryClient()
 
-const projectId = "71dd03d057d89d0af68a4c627ec59694"
-
+const projectId = "71dd03d057d89d0af68a4c627ec59694" 
 const metadata = {
   name: "AppKit",
   description: "AppKit Example",
-  url: "https://example.com", // origin must match your domain & subdomain
+  url: "http://localhost:3000",
   icons: ["https://avatars.githubusercontent.com/u/179229932"],
 }
 
@@ -38,6 +37,11 @@ createAppKit({
     "--w3m-color-mix-strength": 40,
     "--w3m-accent": "#00BB7F",
   },
+  allowUnsupportedChain: false,
+  enableWalletConnect: true,
+  enableInjected: true,
+  enableEIP6963: true,
+  enableCoinbase: true,
 })
 
 type ComponentProps = {

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

@@ -31,4 +31,4 @@ export default defineConfig({
     "process.browser": true,
     "process.env": process.env,
   },
-});
+});