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

@@ -51,5 +51,8 @@
     "sass": "^1.85.1",
     "typescript": "^5.8.2",
     "vite": "6.3.5"
+  },
+  "peerDependencies": {
+    "@farcaster/miniapp-sdk": "^0.1.8"
   }
 }

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

@@ -72,6 +72,7 @@ const App: React.FC = () => {
           setIsVerified(isWhitelisted ?? false)
         } catch (error) {
           console.error("Error checking whitelist:", error)
+          setIsWhitelisted(false)
         } finally {
           setLoadingWhitelist(false)
         }
@@ -87,10 +88,6 @@ const App: React.FC = () => {
     }
   }, [address, identitySDK, isWhitelisted, connectedAccount])
 
-  const handleVerificationSuccess = () => {
-    setIsVerified(true)
-  }
-
   return (
     <TamaguiProvider config={tamaguiConfig}>
       <ScrollView
@@ -180,9 +177,7 @@ const App: React.FC = () => {
             !isWhitelisted &&
             !error ? (
               <YStack alignItems="center" gap={12}>
-                <VerifyButton
-                  onVerificationSuccess={handleVerificationSuccess}
-                />
+                <VerifyButton />
                 <Text fontSize={14} color="$gray10">
                   You need to verify your identity via GoodDollar to continue.
                 </Text>

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

@@ -72,25 +72,21 @@ export const ClaimButton: React.FC = () => {
       setError("ClaimSDK is not initialized.")
       return
     }
-    console.log("handleClaim called")
 
     setIsClaiming(true)
     setError(null)
     setTxHash(null)
 
     try {
-      const callBackExample = async () => {
-        console.log("waiting for claim for 2 seconds...")
-        await new Promise((resolve) => setTimeout(resolve, 2000)) // wait 2 seconds
-        console.log("tx start")
+      const txConfirm = async () => {
+        await new Promise((resolve) => setTimeout(resolve, 2000))
       }
 
-      const tx = await sdk.claim(callBackExample)
+      const tx = await sdk.claim(txConfirm)
       if (!tx) return
 
       setTxHash(tx.transactionHash)
     } catch (err: any) {
-      console.error("Claim failed:", err)
       setError(err.message || "An unexpected error occurred.")
     } finally {
       setIsClaiming(false)

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

@@ -17,16 +17,12 @@ export const VerifyButton: React.FC<VerifyButtonProps> = ({
     if (!identitySDK || !address) return
 
     try {
-      const fvLink = await identitySDK.generateFVLink(
-        false,
+      await identitySDK.navigateToFaceVerification(
         window.location.href,
         42220,
       )
-
-      window.location.href = fvLink
     } catch (error) {
       console.error("Verification failed:", error)
-      // Handle error (e.g., show toast)
     }
   }
 

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"],
 }
 
@@ -43,6 +42,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,
   },
-});
+});

apps/demo-webcomponents/vite.config.mts

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

packages/citizen-sdk/README.md

@@ -103,6 +103,32 @@ For Wagmi-based React projects, use the hooks exposed from `@goodsdks/react-hook
 
 Explore the generated TypeScript definitions in `dist/` for the complete surface, including helper enums (`contractEnv`, `SupportedChains`, etc.).
 
+## Farcaster MiniApp Support
+
+The SDK includes support for Farcaster miniapps, which enables proper navigation and callback handling when running inside a Farcaster miniapp environment.
+
+### Configuration
+
+**Important**: The `FarcasterAppConfigs` in `constants.ts` are placeholder values. If you're integrating the SDK into a Farcaster miniapp, you must provide your Farcaster app ID and slug when initializing the SDK.
+
+1. Go to the [Farcaster Developer Portal](https://warpcast.com/~/developers)
+2. Register your Mini App and obtain your `appId` and `appSlug`
+3. Pass these values to `IdentitySDK.init`:
+
+```ts
+const identitySDK = await IdentitySDK.init({
+  publicClient,
+  walletClient,
+  env: "production",
+  farcasterConfig: {
+    appId: "YOUR_APP_ID",
+    appSlug: "YOUR_APP_SLUG"
+  }
+})
+```
+
+The SDK will automatically detect if it's running in a Farcaster miniapp and use Universal Links for callbacks, which ensures proper navigation back to your miniapp after face verification.
+
 ## References
 
 - [Demo Identity App](https://demo-identity-app.vercel.app/)

packages/citizen-sdk/package.json

@@ -25,12 +25,14 @@
     "src"
   ],
   "devDependencies": {
+    "@farcaster/miniapp-sdk": "^0.1.8",
     "@repo/typescript-config": "workspace:*",
     "typescript": "latest",
     "viem": "latest",
     "wagmi": "latest"
   },
   "peerDependencies": {
+    "@farcaster/miniapp-sdk": "^0.1.8",
     "viem": "*",
     "wagmi": "*"
   },

packages/citizen-sdk/src/constants.ts

@@ -27,6 +27,7 @@ export const Envs: Record<string, Record<string, string>> = {
   },
 }
 
+
 export interface ContractAddresses {
   identityContract: `0x${string}`
   ubiContract: `0x${string}`

packages/citizen-sdk/src/index.ts

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

packages/citizen-sdk/src/sdks/index.ts

@@ -1,4 +1,3 @@
 export * from "./viem-identity-sdk"
 export * from "./viem-claim-sdk"
 export * from "./viem-custodial-claim-sdk"
-export * from "./viem-custodial-identity-sdk"

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

@@ -7,6 +7,7 @@ import {
   type WalletClient,
   ContractFunctionExecutionError,
   TransactionReceipt,
+  zeroAddress,
 } from "viem"
 
 import { waitForTransactionReceipt } from "viem/actions"
@@ -82,7 +83,7 @@ export class ClaimSDK {
   private readonly faucetAddress: Address
   private readonly account: Address
   private readonly env: contractEnv
-  public readonly rdu: string
+  public rdu: string
 
   constructor({
     account,
@@ -99,9 +100,12 @@ export class ClaimSDK {
     this.walletClient = walletClient
     this.identitySDK = identitySDK
     this.account = account ?? walletClient.account.address
+    this.env = env
 
     this.rdu = rdu
-    this.env = env
+    this.identitySDK.resolveCallbackUrl(rdu, 'claim').then(
+      (resolvedUrl) => { this.rdu = resolvedUrl },
+    ).catch(() => {})
 
     const { chainId, contractEnvAddresses } = resolveChainAndContract(
       walletClient,
@@ -142,6 +146,7 @@ export class ClaimSDK {
     this.faucetAddress = contractEnvAddresses.faucetContract as Address
   }
 
+
   private getContractsForChain(chainId: SupportedChains): ContractAddresses {
     const contracts = this.chainContracts.get(chainId)
 
@@ -451,22 +456,13 @@ export class ClaimSDK {
 
   /**
    * Redirects the user through the face-verification flow.
-   * @throws If face verification redirect fails.
+   * Delegates to IdentitySDK for Farcaster-aware navigation.
    */
   private async fvRedirect(): Promise<void> {
-    const fvChainId = this.fvDefaultChain ?? this.chainId
-    const fvLink = await this.identitySDK.generateFVLink(
-      false,
+    await this.identitySDK.navigateToFaceVerification(
       this.rdu,
-      fvChainId,
+      this.chainId,
     )
-    if (typeof window !== "undefined") {
-      window.location.href = fvLink
-    } else {
-      throw new Error(
-        "Face verification redirect is only supported in browser environments.",
-      )
-    }
   }
 
   /**