fix: update sponsored signer question

Merge branch 'main' into veganbeef/fix-siwn
Merge pull request #15 from neynarxyz/shreyas-formatting
2025-12-11 11:52:35 -05:00 · 2025-07-15 10:59:45 -07:00 · 2025-07-15 09:29:35 -07:00 · 2025-07-15 09:25:35 -07:00 · 2025-07-15 09:25:08 -07:00 · 2025-07-14 13:24:55 -07:00
4 changed files with 234 additions and 196 deletions
--- a/bin/init.js
+++ b/bin/init.js
@@ -354,15 +354,7 @@ export async function init(
      {
        type: 'confirm',
        name: 'useSponsoredSigner',
-        message:
-          'Would you like to use Neynar Sponsored Signers and/or Sign In With Neynar (SIWN)?\n' +
-          'This enables the simplest, most secure, and most user-friendly Farcaster authentication for your app.\n\n' +
-          'Benefits of using Neynar Sponsored Signers/SIWN:\n' +
-          '- No auth buildout or signer management required for developers\n' +
-          '- Cost-effective for users (no gas for signers)\n' +
-          '- Users can revoke signers at any time\n' +
-          '- Plug-and-play for web and React Native\n' +
-          '- Recommended for most developers\n' +
+        message: 'Do you want to write data to Farcaster?\n\nThis feature uses Neynar Sponsored Signers to sign messages on behalf of users.' + 
          '\n⚠️ A seed phrase is required for this option.\n',
        default: false,
      },
@@ -460,7 +452,6 @@ export async function init(
  // Add dependencies
  packageJson.dependencies = {
    '@farcaster/auth-client': '>=0.3.0 <1.0.0',
-    '@farcaster/auth-kit': '>=0.6.0 <1.0.0',
    '@farcaster/miniapp-node': '>=0.1.5 <1.0.0',
    '@farcaster/miniapp-sdk': '>=0.1.6 <1.0.0',
    '@farcaster/miniapp-wagmi-connector': '^1.0.0',
@@ -487,6 +478,12 @@ export async function init(
    siwe: '^3.0.0',
  };

+  // Add auth-kit and quick-auth dependencies if useSponsoredSigner is true
+  if (answers.useSponsoredSigner) {
+    packageJson.dependencies['@farcaster/auth-kit'] = '>=0.6.0 <1.0.0';
+    packageJson.dependencies['next-auth'] = '^4.24.11';
+  }
+
  packageJson.devDependencies = {
    '@types/inquirer': '^9.0.8',
    '@types/node': '^20',
@@ -699,6 +696,15 @@ export async function init(
    fs.rmSync(binPath, { recursive: true, force: true });
  }

+  // Remove NeynarAuthButton directory if useSponsoredSigner is false
+  if (!answers.useSponsoredSigner) {
+    console.log('\nRemoving NeynarAuthButton directory (useSponsoredSigner is false)...');
+    const neynarAuthButtonPath = path.join(projectPath, 'src', 'components', 'ui', 'NeynarAuthButton');
+    if (fs.existsSync(neynarAuthButtonPath)) {
+      fs.rmSync(neynarAuthButtonPath, { recursive: true, force: true });
+    }
+  }
+
  // Initialize git repository
  console.log('\nInitializing git repository...');
  execSync('git init', { cwd: projectPath });
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@neynar/create-farcaster-mini-app",
-  "version": "1.7.2",
+  "version": "1.7.3",
  "type": "module",
  "private": false,
  "access": "public",
--- a/src/components/ui/NeynarAuthButton/index.tsx
+++ b/src/components/ui/NeynarAuthButton/index.tsx
@@ -1,13 +1,21 @@
 'use client';

-import { useCallback, useEffect, useState, useRef } from 'react';
-import sdk, { SignIn as SignInCore } from '@farcaster/frame-sdk';
-import { useMiniApp } from '@neynar/react';
+import '@farcaster/auth-kit/styles.css';
+import { useSignIn } from '@farcaster/auth-kit';
+import { useCallback, useEffect, useState } from 'react';
+import { cn } from '~/lib/utils';
 import { Button } from '~/components/ui/Button';
 import { AuthDialog } from '~/components/ui/NeynarAuthButton/AuthDialog';
 import { ProfileButton } from '~/components/ui/NeynarAuthButton/ProfileButton';
-import { useQuickAuth } from '~/hooks/useQuickAuth';
-import { cn } from '~/lib/utils';
+import { AuthDialog } from '~/components/ui/NeynarAuthButton/AuthDialog';
+import { getItem, removeItem, setItem } from '~/lib/localStorage';
+import { useMiniApp } from '@neynar/react';
+import {
+  signIn as backendSignIn,
+  signOut as backendSignOut,
+  useSession,
+} from 'next-auth/react';
+import sdk, { SignIn as SignInCore } from '@farcaster/miniapp-sdk';

 type User = {
  fid: number;
@@ -17,6 +25,7 @@ type User = {
  // Add other user properties as needed
 };

+const STORAGE_KEY = 'neynar_authenticated_user';
 const FARCASTER_FID = 9152;

 interface StoredAuthState {
@@ -90,12 +99,7 @@ export function NeynarAuthButton() {
  const [storedAuth, setStoredAuth] = useState<StoredAuthState | null>(null);
  const [signersLoading, setSignersLoading] = useState(false);
  const { context } = useMiniApp();
-  const {
-    authenticatedUser: quickAuthUser,
-    signIn: quickAuthSignIn,
-    signOut: quickAuthSignOut,
-  } = useQuickAuth();
-
+  const { data: session } = useSession();
  // New state for unified dialog flow
  const [showDialog, setShowDialog] = useState(false);
  const [dialogStep, setDialogStep] = useState<'signin' | 'access' | 'loading'>(
@@ -109,12 +113,6 @@ export function NeynarAuthButton() {
  );
  const [message, setMessage] = useState<string | null>(null);
  const [signature, setSignature] = useState<string | null>(null);
-  const [isSignerFlowRunning, setIsSignerFlowRunning] = useState(false);
-  const signerFlowStartedRef = useRef(false);
-  const [backendUserProfile, setBackendUserProfile] = useState<{
-    username?: string;
-    pfpUrl?: string;
-  }>({});

  // Determine which flow to use based on context
  const useBackendFlow = context !== undefined;
@@ -147,15 +145,25 @@ export function NeynarAuthButton() {
      if (!useBackendFlow) return;

      try {
-        // For backend flow, use QuickAuth to sign in
-        if (signers && signers.length > 0) {
-          await quickAuthSignIn();
+        // For backend flow, we need to sign in again with the additional data
+        if (message && signature) {
+          const signInData = {
+            message,
+            signature,
+            redirect: false,
+            nonce: nonce || '',
+            fid: user?.fid?.toString() || '',
+            signers: JSON.stringify(signers),
+            user: JSON.stringify(user),
+          };
+
+          await backendSignIn('neynar', signInData);
        }
      } catch (error) {
        console.error('❌ Error updating session with signers:', error);
      }
    },
-    [useBackendFlow, quickAuthSignIn],
+    [useBackendFlow, message, signature, nonce]
  );

  // Helper function to fetch user data from Neynar API
@@ -237,18 +245,14 @@ export function NeynarAuthButton() {
          if (useBackendFlow) {
            // For backend flow, update session with signers
            if (signerData.signers && signerData.signers.length > 0) {
-              // Get user data for the first signer
-              let user: StoredAuthState['user'] | null = null;
-              if (signerData.signers[0].fid) {
-                user = (await fetchUserData(
-                  signerData.signers[0].fid,
-                )) as StoredAuthState['user'];
-              }
+              const user =
+                signerData.user ||
+                (await fetchUserData(signerData.signers[0].fid));
              await updateSessionWithSigners(signerData.signers, user);
            }
            return signerData.signers;
          } else {
-            // For frontend flow, store in memory only
+            // For frontend flow, store in localStorage
            let user: StoredAuthState['user'] | null = null;

            if (signerData.signers && signerData.signers.length > 0) {
@@ -258,12 +262,13 @@ export function NeynarAuthButton() {
              user = fetchedUser;
            }

-            // Store signers in memory only
+            // Store signers in localStorage, preserving existing auth data
            const updatedState: StoredAuthState = {
              isAuthenticated: !!user,
              signers: signerData.signers || [],
              user,
            };
+            setItem<StoredAuthState>(STORAGE_KEY, updatedState);
            setStoredAuth(updatedState);

            return signerData.signers;
@@ -285,46 +290,14 @@ export function NeynarAuthButton() {
  // Helper function to poll signer status
  const startPolling = useCallback(
    (signerUuid: string, message: string, signature: string) => {
-      // Clear any existing polling interval before starting a new one
-      if (pollingInterval) {
-        clearInterval(pollingInterval);
-      }
-
-      let retryCount = 0;
-      const maxRetries = 10; // Maximum 10 retries (20 seconds total)
-      const maxPollingTime = 60000; // Maximum 60 seconds of polling
-      const startTime = Date.now();
-
      const interval = setInterval(async () => {
-        // Check if we've been polling too long
-        if (Date.now() - startTime > maxPollingTime) {
-          clearInterval(interval);
-          setPollingInterval(null);
-          return;
-        }
-
        try {
          const response = await fetch(
            `/api/auth/signer?signerUuid=${signerUuid}`,
          );

          if (!response.ok) {
-            // Check if it's a rate limit error
-            if (response.status === 429) {
-              clearInterval(interval);
-              setPollingInterval(null);
-              return;
-            }
-
-            // Increment retry count for other errors
-            retryCount++;
-            if (retryCount >= maxRetries) {
-              clearInterval(interval);
-              setPollingInterval(null);
-              return;
-            }
-
-            throw new Error(`Failed to poll signer status: ${response.status}`);
+            throw new Error('Failed to poll signer status');
          }

          const signerData = await response.json();
@@ -346,7 +319,7 @@ export function NeynarAuthButton() {

      setPollingInterval(interval);
    },
-    [fetchAllSigners, pollingInterval],
+    [fetchAllSigners]
  );

  // Cleanup polling on unmount
@@ -355,7 +328,6 @@ export function NeynarAuthButton() {
      if (pollingInterval) {
        clearInterval(pollingInterval);
      }
-      signerFlowStartedRef.current = false;
    };
  }, [pollingInterval]);

@@ -378,118 +350,78 @@ export function NeynarAuthButton() {
    generateNonce();
  }, []);

-  // Backend flow using QuickAuth
-  const handleBackendSignIn = useCallback(async () => {
-    if (!nonce) {
-      console.error('❌ No nonce available for backend sign-in');
-      return;
-    }
-
-    try {
-      setSignersLoading(true);
-      const result = await sdk.actions.signIn({ nonce });
-
-      setMessage(result.message);
-      setSignature(result.signature);
-      // Use QuickAuth to sign in
-      await quickAuthSignIn();
-      // Fetch user profile after sign in
-      if (quickAuthUser?.fid) {
-        const user = await fetchUserData(quickAuthUser.fid);
-        setBackendUserProfile({
-          username: user?.username || '',
-          pfpUrl: user?.pfp_url || '',
-        });
-      }
-    } catch (e) {
-      if (e instanceof SignInCore.RejectedByUser) {
-        console.log('ℹ️ Sign-in rejected by user');
-      } else {
-        console.error('❌ Backend sign-in error:', e);
-      }
-    }
-  }, [nonce, quickAuthSignIn, quickAuthUser, fetchUserData]);
-
-  // Fetch user profile when quickAuthUser.fid changes (for backend flow)
+  // Load stored auth state on mount (only for frontend flow)
  useEffect(() => {
-    if (useBackendFlow && quickAuthUser?.fid) {
-      (async () => {
-        const user = await fetchUserData(quickAuthUser.fid);
-        setBackendUserProfile({
-          username: user?.username || '',
-          pfpUrl: user?.pfp_url || '',
-        });
-      })();
-    }
-  }, [useBackendFlow, quickAuthUser?.fid, fetchUserData]);
-
-  const handleFrontEndSignIn = useCallback(async () => {
-    try {
-      setSignersLoading(true);
-      const result = await sdk.actions.signIn({ nonce: nonce || '' });
-
-      setMessage(result.message);
-      setSignature(result.signature);
-
-      // For frontend flow, we'll handle the signer flow in the useEffect
-    } catch (e) {
-      if (e instanceof SignInCore.RejectedByUser) {
-        console.log('ℹ️ Sign-in rejected by user');
-      } else {
-        console.error('❌ Frontend sign-in error:', e);
+    if (!useBackendFlow) {
+      const stored = getItem<StoredAuthState>(STORAGE_KEY);
+      if (stored && stored.isAuthenticated) {
+        setStoredAuth(stored);
      }
-    } finally {
-      setSignersLoading(false);
    }
-  }, [nonce]);
+  }, [useBackendFlow]);

-  const handleSignOut = useCallback(async () => {
-    try {
-      setSignersLoading(true);
-
-      if (useBackendFlow) {
-        // Use QuickAuth sign out
-        await quickAuthSignOut();
-      } else {
-        // Frontend flow sign out
-        setStoredAuth(null);
+  // Success callback - this is critical!
+  const onSuccessCallback = useCallback(
+    async (res: unknown) => {
+      if (!useBackendFlow) {
+        // Only handle localStorage for frontend flow
+        const existingAuth = getItem<StoredAuthState>(STORAGE_KEY);
+        const user = await fetchUserData(res.fid);
+        const authState: StoredAuthState = {
+          ...existingAuth,
+          isAuthenticated: true,
+          user: user as StoredAuthState['user'],
+          signers: existingAuth?.signers || [], // Preserve existing signers
+        };
+        setItem<StoredAuthState>(STORAGE_KEY, authState);
+        setStoredAuth(authState);
      }
+      // For backend flow, the session will be handled by NextAuth
+    },
+    [useBackendFlow, fetchUserData]
+  );

-      // Common cleanup for both flows
-      setShowDialog(false);
-      setDialogStep('signin');
-      setSignerApprovalUrl(null);
-      setMessage(null);
-      setSignature(null);
+  // Error callback
+  const onErrorCallback = useCallback((error?: Error | null) => {
+    console.error('❌ Sign in error:', error);
+  }, []);

-      // Reset polling interval
-      if (pollingInterval) {
-        clearInterval(pollingInterval);
-        setPollingInterval(null);
-      }
+  const signInState = useSignIn({
+    nonce: nonce || undefined,
+    onSuccess: onSuccessCallback,
+    onError: onErrorCallback,
+  });

-      // Reset signer flow flag
-      signerFlowStartedRef.current = false;
-    } catch (error) {
-      console.error('❌ Error during sign out:', error);
-      // Optionally handle error state
-    } finally {
-      setSignersLoading(false);
+  const {
+    signIn: frontendSignIn,
+    signOut: frontendSignOut,
+    connect,
+    reconnect,
+    isSuccess,
+    isError,
+    error,
+    channelToken,
+    url,
+    data,
+    validSignature,
+  } = signInState;
+
+  useEffect(() => {
+    setMessage(data?.message || null);
+    setSignature(data?.signature || null);
+  }, [data?.message, data?.signature]);
+
+  // Connect for frontend flow when nonce is available
+  useEffect(() => {
+    if (!useBackendFlow && nonce && !channelToken) {
+      connect();
    }
-  }, [useBackendFlow, pollingInterval, quickAuthSignOut]);
+  }, [useBackendFlow, nonce, channelToken, connect]);

  // Handle fetching signers after successful authentication
  useEffect(() => {
-    if (
-      message &&
-      signature &&
-      !isSignerFlowRunning &&
-      !signerFlowStartedRef.current
-    ) {
-      signerFlowStartedRef.current = true;
-
+    if (message && signature) {
      const handleSignerFlow = async () => {
-        setIsSignerFlowRunning(true);
        try {
          const clientContext = context?.client as Record<string, unknown>;
          const isMobileContext =
@@ -505,7 +437,6 @@ export function NeynarAuthButton() {

          // First, fetch existing signers
          const signers = await fetchAllSigners(message, signature);
-
          if (useBackendFlow && isMobileContext) setSignersLoading(true);

          // Check if no signers exist or if we have empty signers
@@ -526,9 +457,9 @@ export function NeynarAuthButton() {
              setShowDialog(false);
              await sdk.actions.openUrl(
                signedKeyData.signer_approval_url.replace(
-                  'https://client.farcaster.xyz/deeplinks/signed-key-request',
-                  'https://farcaster.xyz/~/connect',
-                ),
+                  'https://client.farcaster.xyz/deeplinks/',
+                  'farcaster://'
+                )
              );
            } else {
              setShowDialog(true); // Ensure dialog is shown during loading
@@ -550,25 +481,116 @@ export function NeynarAuthButton() {
          setSignersLoading(false);
          setShowDialog(false);
          setSignerApprovalUrl(null);
-        } finally {
-          setIsSignerFlowRunning(false);
        }
      };

      handleSignerFlow();
    }
-  }, [message, signature]); // Simplified dependencies
+  }, [
+    message,
+    signature,
+    fetchAllSigners,
+    createSigner,
+    generateSignedKeyRequest,
+    startPolling,
+    context,
+    useBackendFlow,
+  ]);
+
+  // Backend flow using NextAuth
+  const handleBackendSignIn = useCallback(async () => {
+    if (!nonce) {
+      console.error('❌ No nonce available for backend sign-in');
+      return;
+    }
+
+    try {
+      setSignersLoading(true);
+      const result = await sdk.actions.signIn({ nonce });
+
+      const signInData = {
+        message: result.message,
+        signature: result.signature,
+        redirect: false,
+        nonce: nonce,
+      };
+
+      const nextAuthResult = await backendSignIn('neynar', signInData);
+      if (nextAuthResult?.ok) {
+        setMessage(result.message);
+        setSignature(result.signature);
+      } else {
+        console.error('❌ NextAuth sign-in failed:', nextAuthResult);
+      }
+    } catch (e) {
+      if (e instanceof SignInCore.RejectedByUser) {
+        console.log('ℹ️ Sign-in rejected by user');
+      } else {
+        console.error('❌ Backend sign-in error:', e);
+      }
+    }
+  }, [nonce]);
+
+  const handleFrontEndSignIn = useCallback(() => {
+    if (isError) {
+      reconnect();
+    }
+    setDialogStep('signin');
+    setShowDialog(true);
+    frontendSignIn();
+  }, [isError, reconnect, frontendSignIn]);
+
+  const handleSignOut = useCallback(async () => {
+    try {
+      setSignersLoading(true);
+
+      if (useBackendFlow) {
+        // Only sign out from NextAuth if the current session is from Neynar provider
+        if (session?.provider === 'neynar') {
+          await backendSignOut({ redirect: false });
+        }
+      } else {
+        // Frontend flow sign out
+        frontendSignOut();
+        removeItem(STORAGE_KEY);
+        setStoredAuth(null);
+      }
+
+      // Common cleanup for both flows
+      setShowDialog(false);
+      setDialogStep('signin');
+      setSignerApprovalUrl(null);
+      setMessage(null);
+      setSignature(null);
+
+      // Reset polling interval
+      if (pollingInterval) {
+        clearInterval(pollingInterval);
+        setPollingInterval(null);
+      }
+    } catch (error) {
+      console.error('❌ Error during sign out:', error);
+      // Optionally handle error state
+    } finally {
+      setSignersLoading(false);
+    }
+  }, [useBackendFlow, frontendSignOut, pollingInterval, session]);

  const authenticated = useBackendFlow
-    ? !!quickAuthUser?.fid
-    : storedAuth?.isAuthenticated &&
+    ? !!(
+        session?.provider === 'neynar' &&
+        session?.user?.fid &&
+        session?.signers &&
+        session.signers.length > 0
+      )
+    : ((isSuccess && validSignature) || storedAuth?.isAuthenticated) &&
      !!(storedAuth?.signers && storedAuth.signers.length > 0);

  const userData = useBackendFlow
    ? {
-        fid: quickAuthUser?.fid,
-        username: backendUserProfile.username ?? '',
-        pfpUrl: backendUserProfile.pfpUrl ?? '',
+        fid: session?.user?.fid,
+        username: session?.user?.username || '',
+        pfpUrl: session?.user?.pfp_url || '',
      }
    : {
        fid: storedAuth?.user?.fid,
@@ -597,17 +619,18 @@ export function NeynarAuthButton() {
      ) : (
        <Button
          onClick={useBackendFlow ? handleBackendSignIn : handleFrontEndSignIn}
-          disabled={signersLoading}
+          disabled={!useBackendFlow && !url}
          className={cn(
            'btn btn-primary flex items-center gap-3',
            'disabled:opacity-50 disabled:cursor-not-allowed',
            'transform transition-all duration-200 active:scale-[0.98]',
+            !url && !useBackendFlow && 'cursor-not-allowed'
          )}
        >
-          {signersLoading ? (
+          {!useBackendFlow && !url ? (
            <>
              <div className="spinner-primary w-5 h-5" />
-              <span>Loading...</span>
+              <span>Initializing...</span>
            </>
          ) : (
            <>
@@ -630,9 +653,9 @@ export function NeynarAuthButton() {
              setPollingInterval(null);
            }
          }}
-          url={undefined}
-          isError={false}
-          error={null}
+          url={url}
+          isError={isError}
+          error={error}
          step={dialogStep}
          isLoading={signersLoading}
          signerApprovalUrl={signerApprovalUrl}
@@ -640,4 +663,4 @@ export function NeynarAuthButton() {
      }
    </>
  );
-}
+}
--- a/src/components/ui/tabs/ActionsTab.tsx
+++ b/src/components/ui/tabs/ActionsTab.tsx
@@ -5,10 +5,19 @@ import { type Haptics } from '@farcaster/miniapp-sdk';
 import { useMiniApp } from '@neynar/react';
 import { APP_URL } from '~/lib/constants';
 import { Button } from '../Button';
-import { NeynarAuthButton } from '../NeynarAuthButton/index';
 import { ShareButton } from '../Share';
 import { SignIn } from '../wallet/SignIn';

+// Optional import for NeynarAuthButton - may not exist in all templates
+let NeynarAuthButton: React.ComponentType | null = null;
+try {
+  const module = require('../NeynarAuthButton/index');
+  NeynarAuthButton = module.NeynarAuthButton;
+} catch (error) {
+  // Component doesn't exist, that's okay
+  console.log('NeynarAuthButton not available in this template');
+}
+
 /**
 * ActionsTab component handles mini app actions like sharing, notifications, and haptic feedback.
 *
@@ -140,7 +149,7 @@ export function ActionsTab() {
      <SignIn />

      {/* Neynar Authentication */}
-      <NeynarAuthButton />
+      {NeynarAuthButton && <NeynarAuthButton />}

      {/* Mini app actions */}
      <Button
Author	SHA1	Message	Date
veganbeef	cc15507841	fix: update sponsored signer question	2025-07-15 10:59:45 -07:00
veganbeef	b72198575a	Merge branch 'main' into veganbeef/fix-siwn	2025-07-15 09:29:35 -07:00
Lucas Myers	b1fdfc19a9	Merge pull request #15 from neynarxyz/shreyas-formatting Formatting	2025-07-15 09:25:35 -07:00
veganbeef	4ba9480832	fix: SIWN dependencies	2025-07-15 09:25:08 -07:00
veganbeef	16c433a13c	fix: add back auth-kit	2025-07-14 13:24:55 -07:00