mirror of
https://github.com/neynarxyz/create-farcaster-mini-app.git
synced 2025-11-16 08:08:56 -05:00
Add signer creation
This commit is contained in:
Shreyaschorge
parent
02146b4ff5
commit
8563812b4f
259
bin/init.js
259
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,7 +82,8 @@ 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:
|
||||
`🪐 ${purple}${bright}${italic}Neynar is an API that makes it easy to build on Farcaster.${reset}\n\n` +
|
||||
'Benefits of using Neynar in your mini app:\n' +
|
||||
'- Pre-configured webhook handling (no setup required)\n' +
|
||||
'- Automatic mini app analytics in your dev portal\n' +
|
||||
@ -88,8 +91,8 @@ export async function init(projectName = null, autoAcceptDefaults = false) {
|
||||
'- Built-in rate limiting and error handling\n\n' +
|
||||
`${purple}${bright}${italic}A demo API key is included if you would like to try out Neynar before signing up!${reset}\n\n` +
|
||||
'Would you like to use Neynar in your mini app?',
|
||||
default: true
|
||||
}
|
||||
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.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}`);
|
||||
console.warn(
|
||||
'\n⚠️ Note: the demo key is for development purposes only and is aggressively rate limited.'
|
||||
);
|
||||
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?',
|
||||
default: true
|
||||
}
|
||||
message:
|
||||
'⚠️ 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())
|
||||
.filter(tag => tag.length > 0);
|
||||
}
|
||||
.map((tag) => tag.trim())
|
||||
.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?',
|
||||
default: true
|
||||
}
|
||||
message:
|
||||
'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-kit": ">=0.6.0 <1.0.0",
|
||||
"@farcaster/frame-core": ">=0.0.29 <1.0.0",
|
||||
"@farcaster/frame-node": ">=0.0.18 <1.0.0",
|
||||
"@farcaster/frame-sdk": ">=0.0.31 <1.0.0",
|
||||
"@farcaster/frame-wagmi-connector": ">=0.0.19 <1.0.0",
|
||||
"@farcaster/mini-app-solana": ">=0.0.17 <1.0.0",
|
||||
"@neynar/react": "^1.2.5",
|
||||
"@radix-ui/react-label": "^2.1.1",
|
||||
"@solana/wallet-adapter-react": "^0.15.38",
|
||||
"@tanstack/react-query": "^5.61.0",
|
||||
"@upstash/redis": "^1.34.3",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"dotenv": "^16.4.7",
|
||||
"lucide-react": "^0.469.0",
|
||||
"mipd": "^0.0.7",
|
||||
"next": "^15",
|
||||
"next-auth": "^4.24.11",
|
||||
"react": "^19",
|
||||
"react-dom": "^19",
|
||||
"tailwind-merge": "^2.6.0",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"viem": "^2.23.6",
|
||||
"wagmi": "^2.14.12",
|
||||
"zod": "^3.24.2"
|
||||
'@farcaster/auth-client': '>=0.3.0 <1.0.0',
|
||||
'@farcaster/auth-kit': '>=0.6.0 <1.0.0',
|
||||
'@farcaster/frame-core': '>=0.0.29 <1.0.0',
|
||||
'@farcaster/frame-node': '>=0.0.18 <1.0.0',
|
||||
'@farcaster/frame-sdk': '>=0.0.31 <1.0.0',
|
||||
'@farcaster/frame-wagmi-connector': '>=0.0.19 <1.0.0',
|
||||
'@farcaster/mini-app-solana': '>=0.0.17 <1.0.0',
|
||||
'@neynar/react': '^1.2.5',
|
||||
'@radix-ui/react-label': '^2.1.1',
|
||||
'@solana/wallet-adapter-react': '^0.15.38',
|
||||
'@tanstack/react-query': '^5.61.0',
|
||||
'@upstash/redis': '^1.34.3',
|
||||
'class-variance-authority': '^0.7.1',
|
||||
clsx: '^2.1.1',
|
||||
dotenv: '^16.4.7',
|
||||
'lucide-react': '^0.469.0',
|
||||
mipd: '^0.0.7',
|
||||
next: '^15',
|
||||
'next-auth': '^4.24.11',
|
||||
react: '^19',
|
||||
'react-dom': '^19',
|
||||
'tailwind-merge': '^2.6.0',
|
||||
'tailwindcss-animate': '^1.0.7',
|
||||
viem: '^2.23.6',
|
||||
wagmi: '^2.14.12',
|
||||
zod: '^3.24.2',
|
||||
siwe: '^3.0.0',
|
||||
};
|
||||
|
||||
packageJson.devDependencies = {
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"@vercel/sdk": "^1.9.0",
|
||||
"crypto": "^1.0.1",
|
||||
"eslint": "^8",
|
||||
"eslint-config-next": "15.0.3",
|
||||
"localtunnel": "^2.0.2",
|
||||
"pino-pretty": "^13.0.0",
|
||||
"postcss": "^8",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"typescript": "^5"
|
||||
'@types/node': '^20',
|
||||
'@types/react': '^19',
|
||||
'@types/react-dom': '^19',
|
||||
'@vercel/sdk': '^1.9.0',
|
||||
crypto: '^1.0.1',
|
||||
eslint: '^8',
|
||||
'eslint-config-next': '15.0.3',
|
||||
localtunnel: '^2.0.2',
|
||||
'pino-pretty': '^13.0.0',
|
||||
postcss: '^8',
|
||||
tailwindcss: '^3.4.1',
|
||||
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_PRIMARY_CATEGORY: /^export const APP_PRIMARY_CATEGORY\s*=\s*['"`][^'"`]*['"`];$/m,
|
||||
APP_DESCRIPTION:
|
||||
/^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,13 +537,16 @@ 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
|
||||
? `['${answers.tags.map(tag => escapeString(tag)).join("', '")}']`
|
||||
const tagsString =
|
||||
answers.tags.length > 0
|
||||
? `['${answers.tags.map((tag) => escapeString(tag)).join("', '")}']`
|
||||
: "['neynar', 'starter-kit', 'demo']";
|
||||
constantsContent = safeReplace(
|
||||
constantsContent,
|
||||
@ -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}`);
|
||||
|
||||
@ -2,9 +2,15 @@ import { NextResponse } from 'next/server';
|
||||
import { getNeynarClient } from '~/lib/neynar';
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
const client = getNeynarClient();
|
||||
|
||||
const response = await client.fetchNonce();
|
||||
|
||||
return NextResponse.json(response);
|
||||
} catch (error) {
|
||||
console.error('Error fetching nonce:', error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to fetch nonce' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 signature = searchParams.get('signature');
|
||||
const signerUuid = searchParams.get('signerUuid');
|
||||
|
||||
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 });
|
||||
signers = data.signers;
|
||||
} catch (error) {
|
||||
console.error('Error fetching signers:', error?.response?.data);
|
||||
throw new Error('Failed to fetch signers');
|
||||
}
|
||||
console.log('signers =>', signers);
|
||||
|
||||
return NextResponse.json({
|
||||
signers,
|
||||
const neynarClient = getNeynarClient();
|
||||
const signer = await neynarClient.lookupSigner({
|
||||
signerUuid,
|
||||
});
|
||||
return NextResponse.json(signer);
|
||||
} catch (error) {
|
||||
console.error('Error fetching signed key:', error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to fetch signed key' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
101
src/app/api/auth/signer/signed_key/route.ts
Normal file
101
src/app/api/auth/signer/signed_key/route.ts
Normal file
@ -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 }
|
||||
);
|
||||
}
|
||||
}
|
||||
38
src/app/api/auth/signers/route.ts
Normal file
38
src/app/api/auth/signers/route.ts
Normal file
@ -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 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -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 QRCodeDialog({
|
||||
function updateSignersInAuthState(
|
||||
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,26 +281,45 @@ function QRCodeDialog({
|
||||
</div>
|
||||
) : (
|
||||
<div className='text-center'>
|
||||
<p className='text-gray-600 dark:text-gray-400 mb-6'>
|
||||
To sign in with Farcaster, scan the code below with your
|
||||
phone's camera.
|
||||
<div className='mb-6'>
|
||||
{typeof content.description === 'string' ? (
|
||||
<p className='text-gray-600 dark:text-gray-400'>
|
||||
{content.description}
|
||||
</p>
|
||||
) : (
|
||||
content.description
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='mb-6 flex justify-center'>
|
||||
{content.showQR && content.qrUrl ? (
|
||||
<div className='p-4 bg-white rounded-lg'>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(
|
||||
url
|
||||
content.qrUrl
|
||||
)}`}
|
||||
alt='QR Code for Farcaster sign in'
|
||||
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(url, '_blank')}
|
||||
onClick={() => window.open(content.qrUrl, '_blank')}
|
||||
className='btn btn-outline flex items-center justify-center gap-2 w-full'
|
||||
>
|
||||
<svg
|
||||
@ -176,13 +330,16 @@ function QRCodeDialog({
|
||||
>
|
||||
<path
|
||||
fill='currentColor'
|
||||
fillRule='evenodd'
|
||||
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'
|
||||
clipRule='evenodd'
|
||||
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'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 fetchSigners = async () => {
|
||||
const handleSignerFlow = async () => {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/auth/signer?message=${encodeURIComponent(
|
||||
data.message || ''
|
||||
)}&signature=${data.signature}`
|
||||
// Ensure we have message and signature
|
||||
if (!data.message || !data.signature) {
|
||||
console.error('❌ Missing message or signature');
|
||||
return;
|
||||
}
|
||||
|
||||
// Step 1: Change to loading state
|
||||
setDialogStep('loading');
|
||||
setSignersLoading(true);
|
||||
|
||||
// First, fetch existing 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
|
||||
);
|
||||
|
||||
const signerData = await response.json();
|
||||
console.log('🔐 Signer response:', signerData);
|
||||
// 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
|
||||
|
||||
if (response.ok) {
|
||||
console.log('✅ Signers fetched successfully:', signerData.signers);
|
||||
// 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
|
||||
if (!nonce) {
|
||||
// Show loading state while nonce is being fetched or signers are loading
|
||||
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}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user