Add signer creation

bin/init.js

@@ -12,7 +12,9 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
 const REPO_URL = 'https://github.com/neynarxyz/create-farcaster-mini-app.git';
-const SCRIPT_VERSION = JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json'), 'utf8')).version;
+const SCRIPT_VERSION = JSON.parse(
+  fs.readFileSync(path.join(__dirname, '..', 'package.json'), 'utf8')
+).version;
 
 // ANSI color codes
 const purple = '\x1b[35m';
@@ -48,8 +50,8 @@ async function queryNeynarApp(apiKey) {
       `https://api.neynar.com/portal/app_by_api_key?starter_kit=true`,
       {
         headers: {
-          'x-api-key': apiKey
+          'x-api-key': apiKey,
-        }
+        },
       }
     );
     const data = await response.json();
@@ -80,16 +82,17 @@ export async function init(projectName = null, autoAcceptDefaults = false) {
         {
           type: 'confirm',
           name: 'useNeynar',
-          message: `🪐 ${purple}${bright}${italic}Neynar is an API that makes it easy to build on Farcaster.${reset}\n\n` +
+          message:
-          'Benefits of using Neynar in your mini app:\n' +
+            `🪐 ${purple}${bright}${italic}Neynar is an API that makes it easy to build on Farcaster.${reset}\n\n` +
-          '- Pre-configured webhook handling (no setup required)\n' +
+            'Benefits of using Neynar in your mini app:\n' +
-          '- Automatic mini app analytics in your dev portal\n' +
+            '- Pre-configured webhook handling (no setup required)\n' +
-          '- Send manual notifications from dev.neynar.com\n' +
+            '- Automatic mini app analytics in your dev portal\n' +
-          '- Built-in rate limiting and error handling\n\n' +
+            '- Send manual notifications from dev.neynar.com\n' +
-          `${purple}${bright}${italic}A demo API key is included if you would like to try out Neynar before signing up!${reset}\n\n` +
+            '- Built-in rate limiting and error handling\n\n' +
-          'Would you like to use Neynar in your mini app?',
+            `${purple}${bright}${italic}A demo API key is included if you would like to try out Neynar before signing up!${reset}\n\n` +
-          default: true
+            'Would you like to use Neynar in your mini app?',
-        }
+          default: true,
+        },
       ]);
     }
 
@@ -98,7 +101,9 @@ export async function init(projectName = null, autoAcceptDefaults = false) {
       break;
     }
 
-    console.log('\n🪐 Find your Neynar API key at: https://dev.neynar.com/app\n');
+    console.log(
+      '\n🪐 Find your Neynar API key at: https://dev.neynar.com/app\n'
+    );
 
     let neynarKeyAnswer;
     if (autoAcceptDefaults) {
@@ -109,8 +114,8 @@ export async function init(projectName = null, autoAcceptDefaults = false) {
           type: 'password',
           name: 'neynarApiKey',
           message: 'Enter your Neynar API key (or press enter to skip):',
-          default: null
+          default: null,
-        }
+        },
       ]);
     }
 
@@ -126,15 +131,21 @@ export async function init(projectName = null, autoAcceptDefaults = false) {
             type: 'confirm',
             name: 'useDemo',
             message: 'Would you like to try the demo Neynar API key?',
-            default: true
+            default: true,
-          }
+          },
         ]);
       }
 
       if (useDemoKey.useDemo) {
-        console.warn('\n⚠️ Note: the demo key is for development purposes only and is aggressively rate limited.');
+        console.warn(
-        console.log('For production, please sign up for a Neynar account at https://neynar.com/ and configure the API key in your .env or .env.local file with NEYNAR_API_KEY.');
+          '\n⚠️ Note: the demo key is for development purposes only and is aggressively rate limited.'
-        console.log(`\n${purple}${bright}${italic}Neynar now has a free tier! See https://neynar.com/#pricing for details.\n${reset}`);
+        );
+        console.log(
+          'For production, please sign up for a Neynar account at https://neynar.com/ and configure the API key in your .env or .env.local file with NEYNAR_API_KEY.'
+        );
+        console.log(
+          `\n${purple}${bright}${italic}Neynar now has a free tier! See https://neynar.com/#pricing for details.\n${reset}`
+        );
         neynarApiKey = 'FARCASTER_V2_FRAMES_DEMO';
       }
     }
@@ -144,14 +155,16 @@ export async function init(projectName = null, autoAcceptDefaults = false) {
         useNeynar = false;
         break;
       }
-      console.log('\n⚠️  No valid API key provided. Would you like to try again?');
+      console.log(
+        '\n⚠️  No valid API key provided. Would you like to try again?'
+      );
       const { retry } = await inquirer.prompt([
         {
           type: 'confirm',
           name: 'retry',
           message: 'Try configuring Neynar again?',
-          default: true
+          default: true,
-        }
+        },
       ]);
       if (!retry) {
         useNeynar = false;
@@ -176,9 +189,10 @@ export async function init(projectName = null, autoAcceptDefaults = false) {
         {
           type: 'confirm',
           name: 'retry',
-          message: '⚠️  Could not find a client ID for this API key. Would you like to try configuring Neynar again?',
+          message:
-          default: true
+            '⚠️  Could not find a client ID for this API key. Would you like to try configuring Neynar again?',
-        }
+          default: true,
+        },
       ]);
       if (!retry) {
         useNeynar = false;
@@ -191,7 +205,10 @@ export async function init(projectName = null, autoAcceptDefaults = false) {
     break;
   }
 
-  const defaultMiniAppName = (neynarAppName && !neynarAppName.toLowerCase().includes('demo')) ? neynarAppName : undefined;
+  const defaultMiniAppName =
+    neynarAppName && !neynarAppName.toLowerCase().includes('demo')
+      ? neynarAppName
+      : undefined;
 
   let answers;
   if (autoAcceptDefaults) {
@@ -203,7 +220,7 @@ export async function init(projectName = null, autoAcceptDefaults = false) {
       buttonText: 'Launch Mini App',
       useWallet: true,
       useTunnel: true,
-      enableAnalytics: true
+      enableAnalytics: true,
     };
   } else {
     // If autoAcceptDefaults is false but we have a projectName, we still need to ask for other options
@@ -218,8 +235,8 @@ export async function init(projectName = null, autoAcceptDefaults = false) {
             return 'Project name cannot be empty';
           }
           return true;
-        }
+        },
-      }
+      },
     ]);
 
     answers = await inquirer.prompt([
@@ -227,12 +244,13 @@ export async function init(projectName = null, autoAcceptDefaults = false) {
         type: 'input',
         name: 'description',
         message: 'Give a one-line description of your mini app (optional):',
-        default: 'A Farcaster mini app created with Neynar'
+        default: 'A Farcaster mini app created with Neynar',
       },
       {
         type: 'list',
         name: 'primaryCategory',
-        message: 'It is strongly recommended to choose a primary category and tags to help users discover your mini app.\n\nSelect a primary category:',
+        message:
+          'It is strongly recommended to choose a primary category and tags to help users discover your mini app.\n\nSelect a primary category:',
         choices: [
           new inquirer.Separator(),
           { name: 'Skip (not recommended)', value: null },
@@ -249,23 +267,24 @@ export async function init(projectName = null, autoAcceptDefaults = false) {
           { name: 'Education', value: 'education' },
           { name: 'Developer Tools', value: 'developer-tools' },
           { name: 'Entertainment', value: 'entertainment' },
-          { name: 'Art & Creativity', value: 'art-creativity' }
+          { name: 'Art & Creativity', value: 'art-creativity' },
         ],
-        default: null
+        default: null,
       },
       {
         type: 'input',
         name: 'tags',
-        message: 'Enter tags for your mini app (separate with spaces or commas, optional):',
+        message:
+          'Enter tags for your mini app (separate with spaces or commas, optional):',
         default: '',
         filter: (input) => {
           if (!input.trim()) return [];
           // Split by both spaces and commas, trim whitespace, and filter out empty strings
           return input
             .split(/[,\s]+/)
-            .map(tag => tag.trim())
+            .map((tag) => tag.trim())
-            .filter(tag => tag.length > 0);
+            .filter((tag) => tag.length > 0);
-        }
+        },
       },
       {
         type: 'input',
@@ -277,8 +296,8 @@ export async function init(projectName = null, autoAcceptDefaults = false) {
             return 'Button text cannot be empty';
           }
           return true;
-        }
+        },
-      }
+      },
     ]);
 
     // Merge project name from the first prompt
@@ -289,7 +308,8 @@ export async function init(projectName = null, autoAcceptDefaults = false) {
       {
         type: 'confirm',
         name: 'useWallet',
-        message: 'Would you like to include wallet and transaction tooling in your mini app?\n' +
+        message:
+          'Would you like to include wallet and transaction tooling in your mini app?\n' +
           'This includes:\n' +
           '- EVM wallet connection\n' +
           '- Transaction signing\n' +
@@ -297,8 +317,8 @@ export async function init(projectName = null, autoAcceptDefaults = false) {
           '- Chain switching\n' +
           '- Solana support\n\n' +
           'Include wallet and transaction features?',
-        default: true
+        default: true,
-      }
+      },
     ]);
     answers.useWallet = walletAnswer.useWallet;
 
@@ -307,11 +327,12 @@ export async function init(projectName = null, autoAcceptDefaults = false) {
       {
         type: 'confirm',
         name: 'useTunnel',
-        message: 'Would you like to test on mobile and/or test the app with Warpcast developer tools?\n' +
+        message:
+          'Would you like to test on mobile and/or test the app with Warpcast developer tools?\n' +
           `⚠️ ${yellow}${italic}Both mobile testing and the Warpcast debugger require setting up a tunnel to serve your app from localhost to the broader internet.\n${reset}` +
           'Configure a tunnel for mobile testing and/or Warpcast developer tools?',
-        default: true
+        default: true,
-      }
+      },
     ]);
     answers.useTunnel = hostingAnswer.useTunnel;
 
@@ -320,9 +341,10 @@ export async function init(projectName = null, autoAcceptDefaults = false) {
       {
         type: 'confirm',
         name: 'enableAnalytics',
-        message: 'Would you like to help improve Neynar products by sharing usage data from your mini app?',
+        message:
-        default: true
+          'Would you like to help improve Neynar products by sharing usage data from your mini app?',
-      }
+        default: true,
+      },
     ]);
     answers.enableAnalytics = analyticsAnswer.enableAnalytics;
   }
@@ -339,17 +361,17 @@ export async function init(projectName = null, autoAcceptDefaults = false) {
     // Use separate commands for better cross-platform compatibility
     execSync(`git clone ${REPO_URL} "${projectPath}"`, {
       stdio: 'inherit',
-      shell: process.platform === 'win32'
+      shell: process.platform === 'win32',
     });
     execSync('git fetch origin main', {
       cwd: projectPath,
       stdio: 'inherit',
-      shell: process.platform === 'win32'
+      shell: process.platform === 'win32',
     });
     execSync('git reset --hard origin/main', {
       cwd: projectPath,
       stdio: 'inherit',
-      shell: process.platform === 'win32'
+      shell: process.platform === 'win32',
     });
   } catch (error) {
     console.error('\n❌ Error: Failed to create project directory.');
@@ -386,47 +408,48 @@ export async function init(projectName = null, autoAcceptDefaults = false) {
 
   // Add dependencies
   packageJson.dependencies = {
-    "@farcaster/auth-client": ">=0.3.0 <1.0.0",
+    '@farcaster/auth-client': '>=0.3.0 <1.0.0',
-    "@farcaster/auth-kit": ">=0.6.0 <1.0.0",
+    '@farcaster/auth-kit': '>=0.6.0 <1.0.0',
-    "@farcaster/frame-core": ">=0.0.29 <1.0.0",
+    '@farcaster/frame-core': '>=0.0.29 <1.0.0',
-    "@farcaster/frame-node": ">=0.0.18 <1.0.0",
+    '@farcaster/frame-node': '>=0.0.18 <1.0.0',
-    "@farcaster/frame-sdk": ">=0.0.31 <1.0.0",
+    '@farcaster/frame-sdk': '>=0.0.31 <1.0.0',
-    "@farcaster/frame-wagmi-connector": ">=0.0.19 <1.0.0",
+    '@farcaster/frame-wagmi-connector': '>=0.0.19 <1.0.0',
-    "@farcaster/mini-app-solana": ">=0.0.17 <1.0.0",
+    '@farcaster/mini-app-solana': '>=0.0.17 <1.0.0',
-    "@neynar/react": "^1.2.5",
+    '@neynar/react': '^1.2.5',
-    "@radix-ui/react-label": "^2.1.1",
+    '@radix-ui/react-label': '^2.1.1',
-    "@solana/wallet-adapter-react": "^0.15.38",
+    '@solana/wallet-adapter-react': '^0.15.38',
-    "@tanstack/react-query": "^5.61.0",
+    '@tanstack/react-query': '^5.61.0',
-    "@upstash/redis": "^1.34.3",
+    '@upstash/redis': '^1.34.3',
-    "class-variance-authority": "^0.7.1",
+    'class-variance-authority': '^0.7.1',
-    "clsx": "^2.1.1",
+    clsx: '^2.1.1',
-    "dotenv": "^16.4.7",
+    dotenv: '^16.4.7',
-    "lucide-react": "^0.469.0",
+    'lucide-react': '^0.469.0',
-    "mipd": "^0.0.7",
+    mipd: '^0.0.7',
-    "next": "^15",
+    next: '^15',
-    "next-auth": "^4.24.11",
+    'next-auth': '^4.24.11',
-    "react": "^19",
+    react: '^19',
-    "react-dom": "^19",
+    'react-dom': '^19',
-    "tailwind-merge": "^2.6.0",
+    'tailwind-merge': '^2.6.0',
-    "tailwindcss-animate": "^1.0.7",
+    'tailwindcss-animate': '^1.0.7',
-    "viem": "^2.23.6",
+    viem: '^2.23.6',
-    "wagmi": "^2.14.12",
+    wagmi: '^2.14.12',
-    "zod": "^3.24.2"
+    zod: '^3.24.2',
+    siwe: '^3.0.0',
   };
 
   packageJson.devDependencies = {
-    "@types/node": "^20",
+    '@types/node': '^20',
-    "@types/react": "^19",
+    '@types/react': '^19',
-    "@types/react-dom": "^19",
+    '@types/react-dom': '^19',
-    "@vercel/sdk": "^1.9.0",
+    '@vercel/sdk': '^1.9.0',
-    "crypto": "^1.0.1",
+    crypto: '^1.0.1',
-    "eslint": "^8",
+    eslint: '^8',
-    "eslint-config-next": "15.0.3",
+    'eslint-config-next': '15.0.3',
-    "localtunnel": "^2.0.2",
+    localtunnel: '^2.0.2',
-    "pino-pretty": "^13.0.0",
+    'pino-pretty': '^13.0.0',
-    "postcss": "^8",
+    postcss: '^8',
-    "tailwindcss": "^3.4.1",
+    tailwindcss: '^3.4.1',
-    "typescript": "^5"
+    typescript: '^5',
   };
 
   // Add Neynar SDK if selected
@@ -460,9 +483,16 @@ export async function init(projectName = null, autoAcceptDefaults = false) {
       const safeReplace = (content, pattern, replacement, constantName) => {
         const match = content.match(pattern);
         if (!match) {
-          console.log(`⚠️  Warning: Could not update ${constantName} in constants.ts. Pattern not found.`);
+          console.log(
+            `⚠️  Warning: Could not update ${constantName} in constants.ts. Pattern not found.`
+          );
           console.log(`Pattern: ${pattern}`);
-          console.log(`Expected to match in: ${content.split('\n').find(line => line.includes(constantName)) || 'Not found'}`);
+          console.log(
+            `Expected to match in: ${
+              content.split('\n').find((line) => line.includes(constantName)) ||
+              'Not found'
+            }`
+          );
         } else {
           const newContent = content.replace(pattern, replacement);
           return newContent;
@@ -473,12 +503,16 @@ export async function init(projectName = null, autoAcceptDefaults = false) {
       // Regex patterns that match whole lines with export const
       const patterns = {
         APP_NAME: /^export const APP_NAME\s*=\s*['"`][^'"`]*['"`];$/m,
-        APP_DESCRIPTION: /^export const APP_DESCRIPTION\s*=\s*['"`][^'"`]*['"`];$/m,
+        APP_DESCRIPTION:
-        APP_PRIMARY_CATEGORY: /^export const APP_PRIMARY_CATEGORY\s*=\s*['"`][^'"`]*['"`];$/m,
+          /^export const APP_DESCRIPTION\s*=\s*['"`][^'"`]*['"`];$/m,
+        APP_PRIMARY_CATEGORY:
+          /^export const APP_PRIMARY_CATEGORY\s*=\s*['"`][^'"`]*['"`];$/m,
         APP_TAGS: /^export const APP_TAGS\s*=\s*\[[^\]]*\];$/m,
-        APP_BUTTON_TEXT: /^export const APP_BUTTON_TEXT\s*=\s*['"`][^'"`]*['"`];$/m,
+        APP_BUTTON_TEXT:
+          /^export const APP_BUTTON_TEXT\s*=\s*['"`][^'"`]*['"`];$/m,
         USE_WALLET: /^export const USE_WALLET\s*=\s*(true|false);$/m,
-        ANALYTICS_ENABLED: /^export const ANALYTICS_ENABLED\s*=\s*(true|false);$/m
+        ANALYTICS_ENABLED:
+          /^export const ANALYTICS_ENABLED\s*=\s*(true|false);$/m,
       };
 
       // Update APP_NAME
@@ -493,7 +527,9 @@ export async function init(projectName = null, autoAcceptDefaults = false) {
       constantsContent = safeReplace(
         constantsContent,
         patterns.APP_DESCRIPTION,
-        `export const APP_DESCRIPTION = '${escapeString(answers.description)}';`,
+        `export const APP_DESCRIPTION = '${escapeString(
+          answers.description
+        )}';`,
         'APP_DESCRIPTION'
       );
 
@@ -501,14 +537,17 @@ export async function init(projectName = null, autoAcceptDefaults = false) {
       constantsContent = safeReplace(
         constantsContent,
         patterns.APP_PRIMARY_CATEGORY,
-        `export const APP_PRIMARY_CATEGORY = '${escapeString(answers.primaryCategory || '')}';`,
+        `export const APP_PRIMARY_CATEGORY = '${escapeString(
+          answers.primaryCategory || ''
+        )}';`,
         'APP_PRIMARY_CATEGORY'
       );
 
       // Update APP_TAGS
-      const tagsString = answers.tags.length > 0 
+      const tagsString =
-        ? `['${answers.tags.map(tag => escapeString(tag)).join("', '")}']` 
+        answers.tags.length > 0
-        : "['neynar', 'starter-kit', 'demo']";
+          ? `['${answers.tags.map((tag) => escapeString(tag)).join("', '")}']`
+          : "['neynar', 'starter-kit', 'demo']";
       constantsContent = safeReplace(
         constantsContent,
         patterns.APP_TAGS,
@@ -520,7 +559,9 @@ export async function init(projectName = null, autoAcceptDefaults = false) {
       constantsContent = safeReplace(
         constantsContent,
         patterns.APP_BUTTON_TEXT,
-        `export const APP_BUTTON_TEXT = '${escapeString(answers.buttonText || '')}';`,
+        `export const APP_BUTTON_TEXT = '${escapeString(
+          answers.buttonText || ''
+        )}';`,
         'APP_BUTTON_TEXT'
       );
 
@@ -545,18 +586,25 @@ export async function init(projectName = null, autoAcceptDefaults = false) {
       console.log('⚠️  constants.ts not found, skipping constants update');
     }
 
-    fs.appendFileSync(envPath, `\nNEXTAUTH_SECRET="${crypto.randomBytes(32).toString('hex')}"`);
+    fs.appendFileSync(
+      envPath,
+      `\nNEXTAUTH_SECRET="${crypto.randomBytes(32).toString('hex')}"`
+    );
     if (useNeynar && neynarApiKey && neynarClientId) {
       fs.appendFileSync(envPath, `\nNEYNAR_API_KEY="${neynarApiKey}"`);
       fs.appendFileSync(envPath, `\nNEYNAR_CLIENT_ID="${neynarClientId}"`);
     } else if (useNeynar) {
-      console.log('\n⚠️  Could not find a Neynar client ID and/or API key. Please configure Neynar manually in .env.local with NEYNAR_API_KEY and NEYNAR_CLIENT_ID');
+      console.log(
+        '\n⚠️  Could not find a Neynar client ID and/or API key. Please configure Neynar manually in .env.local with NEYNAR_API_KEY and NEYNAR_CLIENT_ID'
+      );
     }
     fs.appendFileSync(envPath, `\nUSE_TUNNEL="${answers.useTunnel}"`);
 
     fs.unlinkSync(envExamplePath);
   } else {
-    console.log('\n.env.example does not exist, skipping copy and remove operations');
+    console.log(
+      '\n.env.example does not exist, skipping copy and remove operations'
+    );
   }
 
   // Update README
@@ -564,7 +612,9 @@ export async function init(projectName = null, autoAcceptDefaults = false) {
   const readmePath = path.join(projectPath, 'README.md');
   const prependText = `<!-- generated by @neynar/create-farcaster-mini-app version ${SCRIPT_VERSION} -->\n\n`;
   if (fs.existsSync(readmePath)) {
-    const originalReadmeContent = fs.readFileSync(readmePath, { encoding: 'utf8' });
+    const originalReadmeContent = fs.readFileSync(readmePath, {
+      encoding: 'utf8',
+    });
     const updatedReadmeContent = prependText + originalReadmeContent;
     fs.writeFileSync(readmePath, updatedReadmeContent);
   } else {
@@ -577,12 +627,12 @@ export async function init(projectName = null, autoAcceptDefaults = false) {
   execSync('npm cache clean --force', {
     cwd: projectPath,
     stdio: 'inherit',
-    shell: process.platform === 'win32'
+    shell: process.platform === 'win32',
   });
   execSync('npm install', {
     cwd: projectPath,
     stdio: 'inherit',
-    shell: process.platform === 'win32'
+    shell: process.platform === 'win32',
   });
 
   // Remove the bin directory
@@ -596,12 +646,15 @@ export async function init(projectName = null, autoAcceptDefaults = false) {
   console.log('\nInitializing git repository...');
   execSync('git init', { cwd: projectPath });
   execSync('git add .', { cwd: projectPath });
-  execSync('git commit -m "initial commit from @neynar/create-farcaster-mini-app"', { cwd: projectPath });
+  execSync(
+    'git commit -m "initial commit from @neynar/create-farcaster-mini-app"',
+    { cwd: projectPath }
+  );
 
   // Calculate border length based on message length
   const message = `✨🪐 Successfully created mini app ${finalProjectName} with git and dependencies installed! 🪐✨`;
   const borderLength = message.length;
-  const borderStars = '✨'.repeat((borderLength / 2) + 1);
+  const borderStars = '✨'.repeat(borderLength / 2 + 1);
 
   console.log(`\n${borderStars}`);
   console.log(`${message}`);

src/app/api/auth/nonce/route.ts

@@ -2,9 +2,15 @@ import { NextResponse } from 'next/server';
 import { getNeynarClient } from '~/lib/neynar';
 
 export async function GET() {
-  const client = getNeynarClient();
+  try {
-
+    const client = getNeynarClient();
-  const response = await client.fetchNonce();
+    const response = await client.fetchNonce();
-
+    return NextResponse.json(response);
-  return NextResponse.json(response);
+  } catch (error) {
+    console.error('Error fetching nonce:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch nonce' },
+      { status: 500 }
+    );
+  }
 }

src/app/api/auth/signer/route.ts

@@ -1,39 +1,42 @@
 import { NextResponse } from 'next/server';
 import { getNeynarClient } from '~/lib/neynar';
 
+export async function POST() {
+  try {
+    const neynarClient = getNeynarClient();
+    const signer = await neynarClient.createSigner();
+    return NextResponse.json(signer);
+  } catch (error) {
+    console.error('Error fetching signer:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch signer' },
+      { status: 500 }
+    );
+  }
+}
+
 export async function GET(request: Request) {
   const { searchParams } = new URL(request.url);
-  const message = searchParams.get('message');
+  const signerUuid = searchParams.get('signerUuid');
-  const signature = searchParams.get('signature');
 
-  if (!message) {
+  if (!signerUuid) {
     return NextResponse.json(
-      { error: 'Message parameter is required' },
+      { error: 'signerUuid is required' },
       { status: 400 }
     );
   }
 
-  if (!signature) {
-    return NextResponse.json(
-      { error: 'Signature parameter is required' },
-      { status: 400 }
-    );
-  }
-
-  const client = getNeynarClient();
-
-  let signers;
-
   try {
-    const data = await client.fetchSigners({ message, signature });
+    const neynarClient = getNeynarClient();
-    signers = data.signers;
+    const signer = await neynarClient.lookupSigner({
+      signerUuid,
+    });
+    return NextResponse.json(signer);
   } catch (error) {
-    console.error('Error fetching signers:', error?.response?.data);
+    console.error('Error fetching signed key:', error);
-    throw new Error('Failed to fetch signers');
+    return NextResponse.json(
+      { error: 'Failed to fetch signed key' },
+      { status: 500 }
+    );
   }
-  console.log('signers =>', signers);
-
-  return NextResponse.json({
-    signers,
-  });
 }

src/app/api/auth/signer/signed_key/route.ts

@@ -0,0 +1,101 @@
+import { NextResponse } from 'next/server';
+import { getNeynarClient } from '~/lib/neynar';
+import { mnemonicToAccount } from 'viem/accounts';
+
+const postRequiredFields = ['signerUuid', 'publicKey'];
+
+const SIGNED_KEY_REQUEST_VALIDATOR_EIP_712_DOMAIN = {
+  name: 'Farcaster SignedKeyRequestValidator',
+  version: '1',
+  chainId: 10,
+  verifyingContract:
+    '0x00000000fc700472606ed4fa22623acf62c60553' as `0x${string}`,
+};
+
+const SIGNED_KEY_REQUEST_TYPE = [
+  { name: 'requestFid', type: 'uint256' },
+  { name: 'key', type: 'bytes' },
+  { name: 'deadline', type: 'uint256' },
+];
+
+export async function POST(request: Request) {
+  const body = await request.json();
+
+  // Validate required fields
+  for (const field of postRequiredFields) {
+    if (!body[field]) {
+      return NextResponse.json(
+        { error: `${field} is required` },
+        { status: 400 }
+      );
+    }
+  }
+
+  const { signerUuid, publicKey, redirectUrl } = body;
+
+  if (redirectUrl && typeof redirectUrl !== 'string') {
+    return NextResponse.json(
+      { error: 'redirectUrl must be a string' },
+      { status: 400 }
+    );
+  }
+
+  try {
+    // Get the app's account from seed phrase
+    const seedPhrase = process.env.SEED_PHRASE;
+    const shouldSponsor = process.env.SPONSOR_SIGNER === 'true';
+
+    if (!seedPhrase) {
+      return NextResponse.json(
+        { error: 'App configuration missing (SEED_PHRASE or FID)' },
+        { status: 500 }
+      );
+    }
+
+    const neynarClient = getNeynarClient();
+
+    const account = mnemonicToAccount(seedPhrase);
+
+    const {
+      user: { fid },
+    } = await neynarClient.lookupUserByCustodyAddress({
+      custodyAddress: account.address,
+    });
+
+    const appFid = fid;
+
+    // Generate deadline (24 hours from now)
+    const deadline = Math.floor(Date.now() / 1000) + 86400;
+
+    // Generate EIP-712 signature
+    const signature = await account.signTypedData({
+      domain: SIGNED_KEY_REQUEST_VALIDATOR_EIP_712_DOMAIN,
+      types: {
+        SignedKeyRequest: SIGNED_KEY_REQUEST_TYPE,
+      },
+      primaryType: 'SignedKeyRequest',
+      message: {
+        requestFid: BigInt(appFid),
+        key: publicKey,
+        deadline: BigInt(deadline),
+      },
+    });
+
+    const signer = await neynarClient.registerSignedKey({
+      appFid,
+      deadline,
+      signature,
+      signerUuid,
+      ...(redirectUrl && { redirectUrl }),
+      ...(shouldSponsor && { sponsor: { sponsored_by_neynar: true } }),
+    });
+
+    return NextResponse.json(signer);
+  } catch (error) {
+    console.error('Error registering signed key:', error);
+    return NextResponse.json(
+      { error: 'Failed to register signed key' },
+      { status: 500 }
+    );
+  }
+}

src/app/api/auth/signers/route.ts

@@ -0,0 +1,38 @@
+import { NextResponse } from 'next/server';
+import { getNeynarClient } from '~/lib/neynar';
+
+const requiredParams = ['message', 'signature'];
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const params: Record<string, string | null> = {};
+  for (const param of requiredParams) {
+    params[param] = searchParams.get(param);
+    if (!params[param]) {
+      return NextResponse.json(
+        {
+          error: `${param} parameter is required`,
+        },
+        { status: 400 }
+      );
+    }
+  }
+
+  const message = params.message as string;
+  const signature = params.signature as string;
+
+  try {
+    const client = getNeynarClient();
+    const data = await client.fetchSigners({ message, signature });
+    const signers = data.signers;
+    return NextResponse.json({
+      signers,
+    });
+  } catch (error) {
+    console.error('Error fetching signers:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch signers' },
+      { status: 500 }
+    );
+  }
+}

src/components/ui/NeynarAuthButton.tsx

@@ -64,6 +64,13 @@ interface StoredAuthState {
     username?: string;
   };
   lastSignInTime?: number;
+  signers?: {
+    object: 'signer';
+    signer_uuid: string;
+    public_key: string;
+    status: 'approved';
+    fid: number;
+  }[]; // Store the list of signers
 }
 
 function saveAuthState(state: StoredAuthState) {
@@ -92,28 +99,156 @@ function clearAuthState() {
   }
 }
 
-// QR Code Dialog Component
+function updateSignersInAuthState(
-function QRCodeDialog({
+  signers: StoredAuthState['signers']
+): StoredAuthState | null {
+  try {
+    const stored = loadAuthState();
+    if (stored) {
+      const updatedState = { ...stored, signers };
+      saveAuthState(updatedState);
+      return updatedState;
+    }
+  } catch (error) {
+    console.warn('Failed to update signers in auth state:', error);
+  }
+  return null;
+}
+
+export function getStoredSigners(): unknown[] {
+  try {
+    const stored = loadAuthState();
+    return stored?.signers || [];
+  } catch (error) {
+    console.warn('Failed to get stored signers:', error);
+    return [];
+  }
+}
+
+// Enhanced QR Code Dialog Component with multiple steps
+function AuthDialog({
   open,
   onClose,
   url,
   isError,
   error,
+  step,
+  isLoading,
+  signerApprovalUrl,
 }: {
   open: boolean;
   onClose: () => void;
   url: string;
   isError: boolean;
   error?: Error | null;
+  step: 'signin' | 'access' | 'loading';
+  isLoading?: boolean;
+  signerApprovalUrl?: string | null;
 }) {
   if (!open) return null;
 
+  const getStepContent = () => {
+    switch (step) {
+      case 'signin':
+        return {
+          title: 'Signin',
+          description:
+            "To signin, scan the code below with your phone's camera.",
+          showQR: true,
+          qrUrl: url,
+          showOpenButton: true,
+        };
+
+      case 'loading':
+        return {
+          title: 'Setting up access...',
+          description:
+            'Checking your account permissions and setting up secure access.',
+          showQR: false,
+          qrUrl: '',
+          showOpenButton: false,
+        };
+
+      case 'access':
+        return {
+          title: 'Grant Access',
+          description: (
+            <div className='space-y-3'>
+              <p className='text-gray-600 dark:text-gray-400'>
+                Allow this app to access your Farcaster account:
+              </p>
+              <div className='space-y-2 text-sm'>
+                <div className='flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg'>
+                  <div className='w-6 h-6 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center'>
+                    <svg
+                      className='w-3 h-3 text-green-600 dark:text-green-400'
+                      fill='currentColor'
+                      viewBox='0 0 20 20'
+                    >
+                      <path
+                        fillRule='evenodd'
+                        d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'
+                        clipRule='evenodd'
+                      />
+                    </svg>
+                  </div>
+                  <div>
+                    <div className='font-medium text-gray-900 dark:text-gray-100'>
+                      Read Access
+                    </div>
+                    <div className='text-gray-500 dark:text-gray-400'>
+                      View your profile and public information
+                    </div>
+                  </div>
+                </div>
+                <div className='flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg'>
+                  <div className='w-6 h-6 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center'>
+                    <svg
+                      className='w-3 h-3 text-blue-600 dark:text-blue-400'
+                      fill='currentColor'
+                      viewBox='0 0 20 20'
+                    >
+                      <path d='M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z' />
+                    </svg>
+                  </div>
+                  <div>
+                    <div className='font-medium text-gray-900 dark:text-gray-100'>
+                      Write Access
+                    </div>
+                    <div className='text-gray-500 dark:text-gray-400'>
+                      Post casts, likes, and update your profile
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ),
+          // Show QR code if we have signer approval URL, otherwise show loading
+          showQR: !!signerApprovalUrl,
+          qrUrl: signerApprovalUrl || '',
+          showOpenButton: !!signerApprovalUrl,
+        };
+
+      default:
+        return {
+          title: 'Sign in',
+          description:
+            "To signin, scan the code below with your phone's camera.",
+          showQR: true,
+          qrUrl: url,
+          showOpenButton: true,
+        };
+    }
+  };
+
+  const content = getStepContent();
+
   return (
     <div className='fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm'>
-      <div className='bg-white dark:bg-gray-800 rounded-xl p-6 max-w-sm mx-4 shadow-2xl border border-gray-200 dark:border-gray-700'>
+      <div className='bg-white dark:bg-gray-800 rounded-xl p-6 max-w-md mx-4 shadow-2xl border border-gray-200 dark:border-gray-700'>
         <div className='flex justify-between items-center mb-4'>
           <h2 className='text-lg font-semibold text-gray-900 dark:text-gray-100'>
-            {isError ? 'Error' : 'Sign in with Farcaster'}
+            {isError ? 'Error' : content.title}
           </h2>
           <button
             onClick={onClose}
@@ -146,43 +281,65 @@ function QRCodeDialog({
           </div>
         ) : (
           <div className='text-center'>
-            <p className='text-gray-600 dark:text-gray-400 mb-6'>
+            <div className='mb-6'>
-              To sign in with Farcaster, scan the code below with your
+              {typeof content.description === 'string' ? (
-              phone&apos;s camera.
+                <p className='text-gray-600 dark:text-gray-400'>
-            </p>
+                  {content.description}
-
+                </p>
-            <div className='mb-6 flex justify-center'>
+              ) : (
-              <div className='p-4 bg-white rounded-lg'>
+                content.description
-                {/* eslint-disable-next-line @next/next/no-img-element */}
+              )}
-                <img
-                  src={`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(
-                    url
-                  )}`}
-                  alt='QR Code for Farcaster sign in'
-                  className='w-48 h-48'
-                />
-              </div>
             </div>
 
-            <button
+            <div className='mb-6 flex justify-center'>
-              onClick={() => window.open(url, '_blank')}
+              {content.showQR && content.qrUrl ? (
-              className='btn btn-outline flex items-center justify-center gap-2 w-full'
+                <div className='p-4 bg-white rounded-lg'>
-            >
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
-              <svg
+                  <img
-                xmlns='http://www.w3.org/2000/svg'
+                    src={`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(
-                width={12}
+                      content.qrUrl
-                height={18}
+                    )}`}
-                fill='none'
+                    alt='QR Code'
+                    className='w-48 h-48'
+                  />
+                </div>
+              ) : step === 'loading' || isLoading ? (
+                <div className='w-48 h-48 flex items-center justify-center bg-gray-50 dark:bg-gray-700 rounded-lg'>
+                  <div className='flex flex-col items-center gap-3'>
+                    <div className='spinner w-8 h-8' />
+                    <span className='text-sm text-gray-500 dark:text-gray-400'>
+                      {step === 'loading'
+                        ? 'Setting up access...'
+                        : 'Loading...'}
+                    </span>
+                  </div>
+                </div>
+              ) : null}
+            </div>
+
+            {content.showOpenButton && content.qrUrl && (
+              <button
+                onClick={() => window.open(content.qrUrl, '_blank')}
+                className='btn btn-outline flex items-center justify-center gap-2 w-full'
               >
-                <path
+                <svg
-                  fill='currentColor'
+                  xmlns='http://www.w3.org/2000/svg'
-                  fillRule='evenodd'
+                  width={12}
-                  d='M0 3a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3Zm4-1.5v.75c0 .414.336.75.75.75h2.5A.75.75 0 0 0 8 2.25V1.5h1A1.5 1.5 0 0 1 10.5 3v12A1.5 1.5 0 0 1 9 16.5H3A1.5 1.5 0 0 1 1.5 15V3A1.5 1.5 0 0 1 3 1.5h1Z'
+                  height={18}
-                  clipRule='evenodd'
+                  fill='none'
-                />
+                >
-              </svg>
+                  <path
-              I&apos;m using my phone →
+                    fill='currentColor'
-            </button>
+                    d='M11.25 8.25H.75a.75.75 0 0 0 0 1.5h10.5a.75.75 0 0 0 0-1.5Z'
+                  />
+                  <path
+                    fill='currentColor'
+                    d='M9.75 6.75a.75.75 0 0 0-1.5 0v3a.75.75 0 0 0 1.5 0v-3Z'
+                  />
+                </svg>
+                I&apos;m using my phone →
+              </button>
+            )}
           </div>
         )}
       </div>
@@ -281,8 +438,176 @@ function ProfileButton({
 // Main Custom SignInButton Component
 export function NeynarAuthButton() {
   const [nonce, setNonce] = useState<string | null>(null);
-  const [showDialog, setShowDialog] = useState(false);
   const [storedAuth, setStoredAuth] = useState<StoredAuthState | null>(null);
+  const [signersLoading, setSignersLoading] = useState(false);
+
+  // New state for unified dialog flow
+  const [showDialog, setShowDialog] = useState(false);
+  const [dialogStep, setDialogStep] = useState<'signin' | 'access' | 'loading'>(
+    'loading'
+  );
+  const [signerApprovalUrl, setSignerApprovalUrl] = useState<string | null>(
+    null
+  );
+  const [pollingInterval, setPollingInterval] = useState<NodeJS.Timeout | null>(
+    null
+  );
+
+  // Helper function to create a signer
+  const createSigner = useCallback(async () => {
+    try {
+      console.log('🔧 Creating new signer...');
+
+      const response = await fetch('/api/auth/signer', {
+        method: 'POST',
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to create signer');
+      }
+
+      const signerData = await response.json();
+      console.log('✅ Signer created:', signerData);
+
+      return signerData;
+    } catch (error) {
+      console.error('❌ Error creating signer:', error);
+      throw error;
+    }
+  }, []);
+
+  // Helper function to generate signed key request
+  const generateSignedKeyRequest = useCallback(
+    async (signerUuid: string, publicKey: string) => {
+      try {
+        console.log('🔑 Generating signed key request...');
+
+        // Prepare request body
+        const requestBody: {
+          signerUuid: string;
+          publicKey: string;
+          sponsor?: { sponsored_by_neynar: boolean };
+        } = {
+          signerUuid,
+          publicKey,
+        };
+
+        const response = await fetch('/api/auth/signer/signed_key', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(requestBody),
+        });
+
+        if (!response.ok) {
+          const errorData = await response.json();
+          throw new Error(
+            `Failed to generate signed key request: ${errorData.error}`
+          );
+        }
+
+        const data = await response.json();
+        console.log('✅ Signed key request generated:', data);
+
+        return data;
+      } catch (error) {
+        console.error('❌ Error generating signed key request:', error);
+        throw error;
+      }
+    },
+    []
+  );
+
+  // Helper function to fetch all signers
+  const fetchAllSigners = useCallback(
+    async (message: string, signature: string) => {
+      try {
+        console.log('<27> Fetching all signers...');
+        setSignersLoading(true);
+
+        const response = await fetch(
+          `/api/auth/signers?message=${encodeURIComponent(
+            message
+          )}&signature=${signature}`
+        );
+
+        const signerData = await response.json();
+        console.log('<27> Signer response:', signerData);
+
+        if (response.ok) {
+          console.log('✅ Signers fetched successfully:', signerData.signers);
+
+          // Store signers in localStorage
+          const updatedState = updateSignersInAuthState(
+            signerData.signers || []
+          );
+          if (updatedState) {
+            setStoredAuth(updatedState);
+          }
+
+          return signerData.signers;
+        } else {
+          console.error('❌ Failed to fetch signers');
+          throw new Error('Failed to fetch signers');
+        }
+      } catch (error) {
+        console.error('❌ Error fetching signers:', error);
+        throw error;
+      } finally {
+        setSignersLoading(false);
+      }
+    },
+    []
+  );
+
+  // Helper function to poll signer status
+  const startPolling = useCallback(
+    (signerUuid: string, message: string, signature: string) => {
+      console.log('<27> Starting polling for signer:', signerUuid);
+
+      const interval = setInterval(async () => {
+        try {
+          const response = await fetch(
+            `/api/auth/signer?signerUuid=${signerUuid}`
+          );
+
+          if (!response.ok) {
+            throw new Error('Failed to poll signer status');
+          }
+
+          const signerData = await response.json();
+          console.log('<27> Signer status:', signerData.status);
+
+          if (signerData.status === 'approved') {
+            console.log('🎉 Signer approved!');
+            clearInterval(interval);
+            setPollingInterval(null);
+            setShowDialog(false);
+            setDialogStep('signin');
+            setSignerApprovalUrl(null);
+
+            // Refetch all signers
+            await fetchAllSigners(message, signature);
+          }
+        } catch (error) {
+          console.error('❌ Error polling signer:', error);
+        }
+      }, 1000); // Poll every 1 second
+
+      setPollingInterval(interval);
+    },
+    [fetchAllSigners]
+  );
+
+  // Cleanup polling on unmount
+  useEffect(() => {
+    return () => {
+      if (pollingInterval) {
+        clearInterval(pollingInterval);
+      }
+    };
+  }, [pollingInterval]);
 
   // Generate nonce
   useEffect(() => {
@@ -308,6 +633,9 @@ export function NeynarAuthButton() {
     const stored = loadAuthState();
     if (stored && stored.isAuthenticated) {
       setStoredAuth(stored);
+      if (stored.signers && stored.signers.length > 0) {
+        console.log('📂 Loaded stored signers:', stored.signers);
+      }
     }
   }, []);
 
@@ -321,7 +649,7 @@ export function NeynarAuthButton() {
     };
     saveAuthState(authState);
     setStoredAuth(authState);
-    setShowDialog(false);
+    // setShowDialog(false);
   }, []);
 
   // Status response callback
@@ -383,31 +711,68 @@ export function NeynarAuthButton() {
         message: data.message,
         signature: data.signature,
       });
-
+      const handleSignerFlow = async () => {
-      const fetchSigners = async () => {
         try {
-          const response = await fetch(
+          // Ensure we have message and signature
-            `/api/auth/signer?message=${encodeURIComponent(
+          if (!data.message || !data.signature) {
-              data.message || ''
+            console.error('❌ Missing message or signature');
-            )}&signature=${data.signature}`
+            return;
-          );
+          }
 
-          const signerData = await response.json();
+          // Step 1: Change to loading state
-          console.log('🔐 Signer response:', signerData);
+          setDialogStep('loading');
+          setSignersLoading(true);
 
-          if (response.ok) {
+          // First, fetch existing signers
-            console.log('✅ Signers fetched successfully:', signerData.signers);
+          const signers = await fetchAllSigners(data.message, data.signature);
+
+          // Check if no signers exist
+          if (!signers || signers.length === 0) {
+            console.log('<27> No signers found, creating new signer...');
+
+            // Step 1: Create a signer
+            const newSigner = await createSigner();
+
+            // Step 2: Generate signed key request
+            const signedKeyData = await generateSignedKeyRequest(
+              newSigner.signer_uuid,
+              newSigner.public_key
+            );
+
+            // Step 3: Show QR code in access dialog for signer approval
+            if (signedKeyData.signer_approval_url) {
+              setSignerApprovalUrl(signedKeyData.signer_approval_url);
+              setSignersLoading(false); // Stop loading, show QR code
+              setDialogStep('access'); // Switch to access step to show QR
+
+              // Step 4: Start polling for signer approval
+              startPolling(newSigner.signer_uuid, data.message, data.signature);
+            }
           } else {
-            console.error('❌ Failed to fetch signers');
+            // If signers exist, close the dialog
+            console.log('✅ Signers already exist, closing dialog');
+            setSignersLoading(false);
+            setShowDialog(false);
+            setDialogStep('signin');
           }
         } catch (error) {
-          console.error('❌ Error fetching signers:', error);
+          console.error('❌ Error in signer flow:', error);
+          // On error, reset to signin step
+          setDialogStep('signin');
+          setSignersLoading(false);
         }
       };
 
-      fetchSigners();
+      handleSignerFlow();
     }
-  }, [data?.message, data?.signature]);
+  }, [
+    data?.message,
+    data?.signature,
+    fetchAllSigners,
+    createSigner,
+    generateSignedKeyRequest,
+    startPolling,
+  ]);
 
   const handleSignIn = useCallback(() => {
     console.log('🚀 Starting sign in flow...');
@@ -415,6 +780,7 @@ export function NeynarAuthButton() {
       console.log('🔄 Reconnecting due to error...');
       reconnect();
     }
+    setDialogStep('signin');
     setShowDialog(true);
     signIn();
 
@@ -435,11 +801,12 @@ export function NeynarAuthButton() {
 
   // The key fix: match the original library's authentication logic exactly
   const authenticated =
-    (isSuccess && validSignature) || storedAuth?.isAuthenticated;
+    ((isSuccess && validSignature) || storedAuth?.isAuthenticated) &&
+    !!(storedAuth?.signers && storedAuth.signers.length > 0);
   const userData = data || storedAuth?.userData;
 
-  // Show loading state while nonce is being fetched
+  // Show loading state while nonce is being fetched or signers are loading
-  if (!nonce) {
+  if (!nonce || signersLoading) {
     return (
       <div className='flex items-center justify-center'>
         <div className='flex items-center gap-3 px-4 py-2 bg-gray-100 dark:bg-gray-800 rounded-lg'>
@@ -463,7 +830,7 @@ export function NeynarAuthButton() {
           className={cn(
             'btn btn-primary flex items-center gap-3',
             'disabled:opacity-50 disabled:cursor-not-allowed',
-            'transform transition-all duration-200 hover:scale-[1.02] active:scale-[0.98]',
+            'transform transition-all duration-200 active:scale-[0.98]',
             !url && 'cursor-not-allowed'
           )}
         >
@@ -480,14 +847,25 @@ export function NeynarAuthButton() {
         </Button>
       )}
 
-      {/* QR Code Dialog for desktop */}
+      {/* Unified Auth Dialog */}
       {url && (
-        <QRCodeDialog
+        <AuthDialog
           open={showDialog && !isMobile()}
-          onClose={() => setShowDialog(false)}
+          onClose={() => {
+            setShowDialog(false);
+            setDialogStep('signin');
+            setSignerApprovalUrl(null);
+            if (pollingInterval) {
+              clearInterval(pollingInterval);
+              setPollingInterval(null);
+            }
+          }}
           url={url}
           isError={isError}
           error={error}
+          step={dialogStep}
+          isLoading={signersLoading}
+          signerApprovalUrl={signerApprovalUrl}
         />
       )}