mirror of
https://github.com/neynarxyz/create-farcaster-mini-app.git
synced 2025-12-11 03:42:32 -05:00
Compare commits
16 Commits
veganbeef/
...
sc/fix-401
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
e115520aa7 | ||
|
|
7dff4cd81a | ||
|
|
d1ec161f47 | ||
|
|
572ab9aa44 | ||
|
|
501bc84512 | ||
|
|
85b39a6397 | ||
|
|
61df6d6a64 | ||
|
|
9ee370628d | ||
|
|
882e4f166f | ||
|
|
e8fa822638 | ||
|
|
bade04b785 | ||
|
|
d9c74f163b | ||
|
|
2edd1bd2ae | ||
|
|
76ad200a22 | ||
|
|
86b79e7f3f | ||
|
|
aac3a739cd |
@@ -1,3 +1,32 @@
|
||||
{
|
||||
"extends": ["next/core-web-vitals", "next/typescript"]
|
||||
"extends": ["next/core-web-vitals", "next/typescript"],
|
||||
"rules": {
|
||||
// Disable img warnings since you're using them intentionally in specific contexts
|
||||
"@next/next/no-img-element": "off",
|
||||
|
||||
// Allow @ts-ignore comments (though @ts-expect-error is preferred)
|
||||
"@typescript-eslint/ban-ts-comment": "off",
|
||||
|
||||
// Allow explicit any types (sometimes necessary for dynamic imports and APIs)
|
||||
"@typescript-eslint/no-explicit-any": "off",
|
||||
|
||||
// Allow unused variables that start with underscore
|
||||
"@typescript-eslint/no-unused-vars": [
|
||||
"warn",
|
||||
{
|
||||
"argsIgnorePattern": "^_",
|
||||
"varsIgnorePattern": "^_",
|
||||
"caughtErrorsIgnorePattern": "^_"
|
||||
}
|
||||
],
|
||||
|
||||
// Make display name warnings instead of errors for dynamic components
|
||||
"react/display-name": "warn",
|
||||
|
||||
// Allow module assignment for dynamic imports
|
||||
"@next/next/no-assign-module-variable": "warn",
|
||||
|
||||
// Make exhaustive deps a warning instead of error for complex hooks
|
||||
"react-hooks/exhaustive-deps": "warn"
|
||||
}
|
||||
}
|
||||
|
||||
31
bin/index.js
31
bin/index.js
@@ -7,6 +7,10 @@ const args = process.argv.slice(2);
|
||||
let projectName = null;
|
||||
let autoAcceptDefaults = false;
|
||||
let apiKey = null;
|
||||
let noWallet = false;
|
||||
let noTunnel = false;
|
||||
let sponsoredSigner = false;
|
||||
let seedPhrase = null;
|
||||
|
||||
// Check for -y flag
|
||||
const yIndex = args.indexOf('-y');
|
||||
@@ -45,6 +49,31 @@ if (yIndex !== -1) {
|
||||
console.error('Error: -k/--api-key requires an API key');
|
||||
process.exit(1);
|
||||
}
|
||||
} else if (arg === '--no-wallet') {
|
||||
noWallet = true;
|
||||
args.splice(i, 1); // Remove the flag
|
||||
i--; // Adjust index since we removed 1 element
|
||||
} else if (arg === '--no-tunnel') {
|
||||
noTunnel = true;
|
||||
args.splice(i, 1); // Remove the flag
|
||||
i--; // Adjust index since we removed 1 element
|
||||
} else if (arg === '--sponsored-signer') {
|
||||
sponsoredSigner = true;
|
||||
args.splice(i, 1); // Remove the flag
|
||||
i--; // Adjust index since we removed 1 element
|
||||
} else if (arg === '--seed-phrase') {
|
||||
if (i + 1 < args.length) {
|
||||
seedPhrase = args[i + 1];
|
||||
if (seedPhrase.startsWith('-')) {
|
||||
console.error('Error: Seed phrase cannot start with a dash (-)');
|
||||
process.exit(1);
|
||||
}
|
||||
args.splice(i, 2); // Remove both the flag and its value
|
||||
i--; // Adjust index since we removed 2 elements
|
||||
} else {
|
||||
console.error('Error: --seed-phrase requires a seed phrase');
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -56,7 +85,7 @@ if (autoAcceptDefaults && !projectName) {
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
init(projectName, autoAcceptDefaults, apiKey).catch((err) => {
|
||||
init(projectName, autoAcceptDefaults, apiKey, noWallet, noTunnel, sponsoredSigner, seedPhrase).catch((err) => {
|
||||
console.error('Error:', err);
|
||||
process.exit(1);
|
||||
});
|
||||
|
||||
207
bin/init.js
207
bin/init.js
@@ -63,7 +63,7 @@ async function queryNeynarApp(apiKey) {
|
||||
}
|
||||
|
||||
// Export the main CLI function for programmatic use
|
||||
export async function init(projectName = null, autoAcceptDefaults = false, apiKey = null) {
|
||||
export async function init(projectName = null, autoAcceptDefaults = false, apiKey = null, noWallet = false, noTunnel = false, sponsoredSigner = false, seedPhrase = null) {
|
||||
printWelcomeMessage();
|
||||
|
||||
// Ask about Neynar usage
|
||||
@@ -219,17 +219,33 @@ export async function init(projectName = null, autoAcceptDefaults = false, apiKe
|
||||
|
||||
let answers;
|
||||
if (autoAcceptDefaults) {
|
||||
// Handle SIWN logic for autoAcceptDefaults
|
||||
let seedPhraseValue = null;
|
||||
let useSponsoredSignerValue = false;
|
||||
|
||||
// Only set seed phrase and sponsored signer if explicitly provided via flags
|
||||
if (seedPhrase) {
|
||||
// Validate the provided seed phrase
|
||||
if (!seedPhrase || seedPhrase.trim().split(' ').length < 12) {
|
||||
console.error('Error: Seed phrase must be at least 12 words');
|
||||
process.exit(1);
|
||||
}
|
||||
seedPhraseValue = seedPhrase;
|
||||
// If sponsoredSigner flag is provided, enable it; otherwise default to false
|
||||
useSponsoredSignerValue = sponsoredSigner;
|
||||
}
|
||||
|
||||
answers = {
|
||||
projectName: projectName || defaultMiniAppName || 'my-farcaster-mini-app',
|
||||
description: 'A Farcaster mini app created with Neynar',
|
||||
primaryCategory: null,
|
||||
tags: [],
|
||||
buttonText: 'Launch Mini App',
|
||||
useWallet: true,
|
||||
useWallet: !noWallet,
|
||||
useTunnel: true,
|
||||
enableAnalytics: true,
|
||||
seedPhrase: null,
|
||||
useSponsoredSigner: false,
|
||||
seedPhrase: seedPhraseValue,
|
||||
useSponsoredSigner: useSponsoredSignerValue,
|
||||
};
|
||||
} else {
|
||||
// If autoAcceptDefaults is false but we have a projectName, we still need to ask for other options
|
||||
@@ -312,67 +328,102 @@ export async function init(projectName = null, autoAcceptDefaults = false, apiKe
|
||||
// Merge project name from the first prompt
|
||||
answers.projectName = projectNamePrompt.projectName;
|
||||
|
||||
// Ask about wallet and transaction tooling
|
||||
const walletAnswer = await inquirer.prompt([
|
||||
{
|
||||
type: 'confirm',
|
||||
name: 'useWallet',
|
||||
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' +
|
||||
'- Message signing\n' +
|
||||
'- Chain switching\n' +
|
||||
'- Solana support\n\n' +
|
||||
'Include wallet and transaction features?',
|
||||
default: true,
|
||||
},
|
||||
]);
|
||||
answers.useWallet = walletAnswer.useWallet;
|
||||
|
||||
// Ask about localhost vs tunnel
|
||||
const hostingAnswer = await inquirer.prompt([
|
||||
{
|
||||
type: 'confirm',
|
||||
name: 'useTunnel',
|
||||
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,
|
||||
},
|
||||
]);
|
||||
answers.useTunnel = hostingAnswer.useTunnel;
|
||||
|
||||
// Ask about Neynar Sponsored Signers / SIWN
|
||||
const sponsoredSignerAnswer = await inquirer.prompt([
|
||||
{
|
||||
type: 'confirm',
|
||||
name: 'useSponsoredSigner',
|
||||
message:
|
||||
'Would you like to write data to Farcaster on behalf of your miniapp users? This involves using Neynar Sponsored Signers and SIWN.\n' +
|
||||
'\n⚠️ A seed phrase is required for this option.\n',
|
||||
default: false,
|
||||
},
|
||||
]);
|
||||
answers.useSponsoredSigner = sponsoredSignerAnswer.useSponsoredSigner;
|
||||
|
||||
if (answers.useSponsoredSigner) {
|
||||
const { seedPhrase } = await inquirer.prompt([
|
||||
// Ask about wallet and transaction tooling (skip if --no-wallet flag is used)
|
||||
if (noWallet) {
|
||||
answers.useWallet = false;
|
||||
} else {
|
||||
const walletAnswer = await inquirer.prompt([
|
||||
{
|
||||
type: 'password',
|
||||
name: 'seedPhrase',
|
||||
message: 'Enter your Farcaster custody account seed phrase (required for Neynar Sponsored Signers/SIWN):',
|
||||
validate: (input) => {
|
||||
if (!input || input.trim().split(' ').length < 12) {
|
||||
return 'Seed phrase must be at least 12 words';
|
||||
}
|
||||
return true;
|
||||
},
|
||||
type: 'confirm',
|
||||
name: 'useWallet',
|
||||
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' +
|
||||
'- Message signing\n' +
|
||||
'- Chain switching\n' +
|
||||
'- Solana support\n\n' +
|
||||
'Include wallet and transaction features?',
|
||||
default: true,
|
||||
},
|
||||
]);
|
||||
answers.useWallet = walletAnswer.useWallet;
|
||||
}
|
||||
|
||||
// Ask about localhost vs tunnel
|
||||
if (noTunnel) {
|
||||
answers.useTunnel = false;
|
||||
} else {
|
||||
const hostingAnswer = await inquirer.prompt([
|
||||
{
|
||||
type: 'confirm',
|
||||
name: 'useTunnel',
|
||||
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,
|
||||
},
|
||||
]);
|
||||
answers.useTunnel = hostingAnswer.useTunnel;
|
||||
}
|
||||
|
||||
// Ask about Sign In With Neynar (SIWN) - requires seed phrase
|
||||
if (seedPhrase) {
|
||||
// If --seed-phrase flag is used, validate it
|
||||
if (!seedPhrase || seedPhrase.trim().split(' ').length < 12) {
|
||||
console.error('Error: Seed phrase must be at least 12 words');
|
||||
process.exit(1);
|
||||
}
|
||||
answers.seedPhrase = seedPhrase;
|
||||
// If --sponsored-signer flag is also provided, enable it
|
||||
answers.useSponsoredSigner = sponsoredSigner;
|
||||
} else {
|
||||
const siwnAnswer = await inquirer.prompt([
|
||||
{
|
||||
type: 'confirm',
|
||||
name: 'useSIWN',
|
||||
message:
|
||||
'Would you like to enable Sign In With Neynar (SIWN)? This allows your mini app to write data to Farcaster on behalf of users.\n' +
|
||||
'\n⚠️ A seed phrase is required for this option.\n',
|
||||
default: false,
|
||||
},
|
||||
]);
|
||||
|
||||
if (siwnAnswer.useSIWN) {
|
||||
const { seedPhrase } = await inquirer.prompt([
|
||||
{
|
||||
type: 'password',
|
||||
name: 'seedPhrase',
|
||||
message: 'Enter your Farcaster custody account seed phrase (required for SIWN):',
|
||||
validate: (input) => {
|
||||
if (!input || input.trim().split(' ').length < 12) {
|
||||
return 'Seed phrase must be at least 12 words';
|
||||
}
|
||||
return true;
|
||||
},
|
||||
},
|
||||
]);
|
||||
answers.seedPhrase = seedPhrase;
|
||||
|
||||
// Ask about sponsor signer if seed phrase is provided
|
||||
const { sponsorSigner } = await inquirer.prompt([
|
||||
{
|
||||
type: 'confirm',
|
||||
name: 'sponsorSigner',
|
||||
message:
|
||||
'You have provided a seed phrase, which enables Sign In With Neynar (SIWN).\n' +
|
||||
'Do you want to sponsor the signer? (This will be used in Sign In With Neynar)\n' +
|
||||
'Note: If you choose to sponsor the signer, Neynar will sponsor it for you and you will be charged in CUs.\n' +
|
||||
'For more information, see https://docs.neynar.com/docs/two-ways-to-sponsor-a-farcaster-signer-via-neynar#sponsor-signers',
|
||||
default: false,
|
||||
},
|
||||
]);
|
||||
answers.useSponsoredSigner = sponsorSigner;
|
||||
} else {
|
||||
answers.useSponsoredSigner = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Ask about analytics opt-out
|
||||
@@ -497,8 +548,8 @@ export async function init(projectName = null, autoAcceptDefaults = false, apiKe
|
||||
packageJson.dependencies['@neynar/nodejs-sdk'] = '^2.19.0';
|
||||
}
|
||||
|
||||
// Add auth-kit and next-auth dependencies if useSponsoredSigner is true
|
||||
if (answers.useSponsoredSigner) {
|
||||
// Add auth-kit and next-auth dependencies if SIWN is enabled (seed phrase is present)
|
||||
if (answers.seedPhrase) {
|
||||
packageJson.dependencies['@farcaster/auth-kit'] = '>=0.6.0 <1.0.0';
|
||||
packageJson.dependencies['next-auth'] = '^4.24.11';
|
||||
}
|
||||
@@ -643,15 +694,16 @@ export async function init(projectName = null, autoAcceptDefaults = false, apiKe
|
||||
}
|
||||
if (answers.seedPhrase) {
|
||||
fs.appendFileSync(envPath, `\nSEED_PHRASE="${answers.seedPhrase}"`);
|
||||
}
|
||||
fs.appendFileSync(envPath, `\nUSE_TUNNEL="${answers.useTunnel}"`);
|
||||
if (answers.useSponsoredSigner) {
|
||||
fs.appendFileSync(envPath, `\nSPONSOR_SIGNER="true"`);
|
||||
// Add NextAuth secret for SIWN
|
||||
fs.appendFileSync(
|
||||
envPath,
|
||||
`\nNEXTAUTH_SECRET="${crypto.randomBytes(32).toString('hex')}"`
|
||||
);
|
||||
}
|
||||
fs.appendFileSync(envPath, `\nUSE_TUNNEL="${answers.useTunnel}"`);
|
||||
if (answers.useSponsoredSigner) {
|
||||
fs.appendFileSync(envPath, `\nSPONSOR_SIGNER="true"`);
|
||||
}
|
||||
|
||||
fs.unlinkSync(envExamplePath);
|
||||
} else {
|
||||
@@ -695,9 +747,9 @@ export async function init(projectName = null, autoAcceptDefaults = false, apiKe
|
||||
fs.rmSync(binPath, { recursive: true, force: true });
|
||||
}
|
||||
|
||||
// Remove NeynarAuthButton directory, NextAuth API routes, and auth directory if useSponsoredSigner is false
|
||||
if (!answers.useSponsoredSigner) {
|
||||
console.log('\nRemoving NeynarAuthButton directory, NextAuth API routes, and auth directory (useSponsoredSigner is false)...');
|
||||
// Remove NeynarAuthButton directory, NextAuth API routes, and auth directory if SIWN is not enabled (no seed phrase)
|
||||
if (!answers.seedPhrase) {
|
||||
console.log('\nRemoving NeynarAuthButton directory, NextAuth API routes, and auth directory (SIWN not enabled)...');
|
||||
const neynarAuthButtonPath = path.join(projectPath, 'src', 'components', 'ui', 'NeynarAuthButton');
|
||||
if (fs.existsSync(neynarAuthButtonPath)) {
|
||||
fs.rmSync(neynarAuthButtonPath, { recursive: true, force: true });
|
||||
@@ -719,6 +771,21 @@ export async function init(projectName = null, autoAcceptDefaults = false, apiKe
|
||||
if (fs.existsSync(authFilePath)) {
|
||||
fs.rmSync(authFilePath, { force: true });
|
||||
}
|
||||
|
||||
// Replace NeynarAuthButton import in ActionsTab.tsx with null component
|
||||
const actionsTabPath = path.join(projectPath, 'src', 'components', 'ui', 'tabs', 'ActionsTab.tsx');
|
||||
if (fs.existsSync(actionsTabPath)) {
|
||||
let actionsTabContent = fs.readFileSync(actionsTabPath, 'utf8');
|
||||
|
||||
// Replace the dynamic import of NeynarAuthButton with a null component
|
||||
actionsTabContent = actionsTabContent.replace(
|
||||
/const NeynarAuthButton = dynamic\([\s\S]*?\);/,
|
||||
'// NeynarAuthButton disabled - SIWN not enabled\nconst NeynarAuthButton = () => {\n return null;\n};'
|
||||
);
|
||||
|
||||
fs.writeFileSync(actionsTabPath, actionsTabContent);
|
||||
console.log('✅ Replaced NeynarAuthButton import in ActionsTab.tsx with null component');
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize git repository
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@neynar/create-farcaster-mini-app",
|
||||
"version": "1.7.6",
|
||||
"version": "1.7.14",
|
||||
"type": "module",
|
||||
"private": false,
|
||||
"access": "public",
|
||||
@@ -35,7 +35,7 @@
|
||||
"build:raw": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint",
|
||||
"deploy:vercel": "ts-node scripts/deploy.ts",
|
||||
"deploy:vercel": "node --loader ts-node/esm scripts/deploy.ts",
|
||||
"deploy:raw": "vercel --prod",
|
||||
"cleanup": "node scripts/cleanup.js"
|
||||
},
|
||||
@@ -52,4 +52,4 @@
|
||||
"@types/node": "^22.13.10",
|
||||
"typescript": "^5.6.3"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -7,7 +7,7 @@ import inquirer from 'inquirer';
|
||||
import dotenv from 'dotenv';
|
||||
import crypto from 'crypto';
|
||||
import { Vercel } from '@vercel/sdk';
|
||||
import { APP_NAME, APP_BUTTON_TEXT } from '../src/lib/constants';
|
||||
import { APP_NAME, APP_BUTTON_TEXT } from '../src/lib/constants.js';
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
const projectRoot = path.join(__dirname, '..');
|
||||
@@ -116,13 +116,14 @@ async function checkRequiredEnvVars(): Promise<void> {
|
||||
);
|
||||
}
|
||||
|
||||
// Ask about sponsor signer if SEED_PHRASE is provided
|
||||
if (!process.env.SPONSOR_SIGNER) {
|
||||
// Ask about SIWN if SEED_PHRASE is provided
|
||||
if (process.env.SEED_PHRASE && !process.env.SPONSOR_SIGNER) {
|
||||
const { sponsorSigner } = await inquirer.prompt([
|
||||
{
|
||||
type: 'confirm',
|
||||
name: 'sponsorSigner',
|
||||
message:
|
||||
'You have provided a seed phrase, which enables Sign In With Neynar (SIWN).\n' +
|
||||
'Do you want to sponsor the signer? (This will be used in Sign In With Neynar)\n' +
|
||||
'Note: If you choose to sponsor the signer, Neynar will sponsor it for you and you will be charged in CUs.\n' +
|
||||
'For more information, see https://docs.neynar.com/docs/two-ways-to-sponsor-a-farcaster-signer-via-neynar#sponsor-signers',
|
||||
@@ -132,13 +133,11 @@ async function checkRequiredEnvVars(): Promise<void> {
|
||||
|
||||
process.env.SPONSOR_SIGNER = sponsorSigner.toString();
|
||||
|
||||
if (process.env.SEED_PHRASE) {
|
||||
fs.appendFileSync(
|
||||
'.env.local',
|
||||
`\nSPONSOR_SIGNER="${sponsorSigner}"`,
|
||||
);
|
||||
console.log('✅ Sponsor signer preference stored in .env.local');
|
||||
}
|
||||
fs.appendFileSync(
|
||||
'.env.local',
|
||||
`\nSPONSOR_SIGNER="${sponsorSigner}"`,
|
||||
);
|
||||
console.log('✅ Sponsor signer preference stored in .env.local');
|
||||
}
|
||||
|
||||
// Ask about required chains
|
||||
@@ -193,7 +192,7 @@ async function checkRequiredEnvVars(): Promise<void> {
|
||||
}
|
||||
}
|
||||
|
||||
// Load SPONSOR_SIGNER from .env.local if SEED_PHRASE exists but SPONSOR_SIGNER doesn't
|
||||
// Load SPONSOR_SIGNER from .env.local if SEED_PHRASE exists (SIWN enabled) but SPONSOR_SIGNER doesn't
|
||||
if (
|
||||
process.env.SEED_PHRASE &&
|
||||
!process.env.SPONSOR_SIGNER &&
|
||||
@@ -732,8 +731,9 @@ async function deployToVercel(useGitHub = false): Promise<void> {
|
||||
SPONSOR_SIGNER: process.env.SPONSOR_SIGNER,
|
||||
}),
|
||||
|
||||
// Include NextAuth environment variables if SEED_PHRASE is present or SPONSOR_SIGNER is true
|
||||
...((process.env.SEED_PHRASE || process.env.SPONSOR_SIGNER === 'true') && {
|
||||
// Include NextAuth environment variables if SEED_PHRASE is present (SIWN enabled)
|
||||
...(process.env.SEED_PHRASE && {
|
||||
SEED_PHRASE: process.env.SEED_PHRASE,
|
||||
NEXTAUTH_SECRET: nextAuthSecret,
|
||||
AUTH_SECRET: nextAuthSecret,
|
||||
NEXTAUTH_URL: `https://${domain}`,
|
||||
@@ -834,8 +834,8 @@ async function deployToVercel(useGitHub = false): Promise<void> {
|
||||
NEXT_PUBLIC_URL: `https://${actualDomain}`,
|
||||
};
|
||||
|
||||
// Include NextAuth URL if SEED_PHRASE is present or SPONSOR_SIGNER is true
|
||||
if (process.env.SEED_PHRASE || process.env.SPONSOR_SIGNER === 'true') {
|
||||
// Include NextAuth URL if SEED_PHRASE is present (SIWN enabled)
|
||||
if (process.env.SEED_PHRASE) {
|
||||
updatedEnv.NEXTAUTH_URL = `https://${actualDomain}`;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import type { Metadata } from "next";
|
||||
import type { Metadata } from 'next';
|
||||
|
||||
import "~/app/globals.css";
|
||||
import { Providers } from "~/app/providers";
|
||||
import { APP_NAME, APP_DESCRIPTION } from "~/lib/constants";
|
||||
import '~/app/globals.css';
|
||||
import { Providers } from '~/app/providers';
|
||||
import { APP_NAME, APP_DESCRIPTION } from '~/lib/constants';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: APP_NAME,
|
||||
@@ -13,15 +13,16 @@ export default async function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
}>) {
|
||||
// Only get session if sponsored signer is enabled or seed phrase is provided
|
||||
const sponsorSigner = process.env.SPONSOR_SIGNER === 'true';
|
||||
const hasSeedPhrase = !!process.env.SEED_PHRASE;
|
||||
|
||||
const shouldUseSession = sponsorSigner || hasSeedPhrase;
|
||||
|
||||
let session = null;
|
||||
if (sponsorSigner || hasSeedPhrase) {
|
||||
if (shouldUseSession) {
|
||||
try {
|
||||
const { getSession } = await import("~/auth");
|
||||
const { getSession } = await import('~/auth');
|
||||
session = await getSession();
|
||||
} catch (error) {
|
||||
console.warn('Failed to get session:', error);
|
||||
@@ -31,7 +32,9 @@ export default async function RootLayout({
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>
|
||||
<Providers session={session}>{children}</Providers>
|
||||
<Providers session={session} shouldUseSession={shouldUseSession}>
|
||||
{children}
|
||||
</Providers>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
'use client';
|
||||
|
||||
import dynamic from 'next/dynamic';
|
||||
import type { Session } from 'next-auth';
|
||||
import { SessionProvider } from 'next-auth/react';
|
||||
import { MiniAppProvider } from '@neynar/react';
|
||||
import { SafeFarcasterSolanaProvider } from '~/components/providers/SafeFarcasterSolanaProvider';
|
||||
import { ANALYTICS_ENABLED } from '~/lib/constants';
|
||||
import { AuthKitProvider } from '@farcaster/auth-kit';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
const WagmiProvider = dynamic(
|
||||
() => import('~/components/providers/WagmiProvider'),
|
||||
@@ -15,35 +13,107 @@ const WagmiProvider = dynamic(
|
||||
}
|
||||
);
|
||||
|
||||
export function Providers({
|
||||
session,
|
||||
// Helper component to conditionally render auth providers
|
||||
function AuthProviders({
|
||||
children,
|
||||
session,
|
||||
shouldUseSession,
|
||||
}: {
|
||||
session: Session | null;
|
||||
children: React.ReactNode;
|
||||
session: any;
|
||||
shouldUseSession: boolean;
|
||||
}) {
|
||||
const solanaEndpoint =
|
||||
process.env.SOLANA_RPC_ENDPOINT || 'https://solana-rpc.publicnode.com';
|
||||
|
||||
// Only wrap with SessionProvider if session is provided
|
||||
if (session) {
|
||||
const [authComponents, setAuthComponents] = useState<{
|
||||
SessionProvider: React.ComponentType<any> | null;
|
||||
AuthKitProvider: React.ComponentType<any> | null;
|
||||
loaded: boolean;
|
||||
}>({
|
||||
SessionProvider: null,
|
||||
AuthKitProvider: null,
|
||||
loaded: false,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!shouldUseSession) {
|
||||
setAuthComponents({
|
||||
SessionProvider: null,
|
||||
AuthKitProvider: null,
|
||||
loaded: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const loadAuthComponents = async () => {
|
||||
try {
|
||||
// Dynamic imports for auth modules
|
||||
let SessionProvider = null;
|
||||
let AuthKitProvider = null;
|
||||
|
||||
try {
|
||||
const nextAuth = await import('next-auth/react');
|
||||
SessionProvider = nextAuth.SessionProvider;
|
||||
} catch (error) {
|
||||
console.warn('NextAuth not available:', error);
|
||||
}
|
||||
|
||||
try {
|
||||
const authKit = await import('@farcaster/auth-kit');
|
||||
AuthKitProvider = authKit.AuthKitProvider;
|
||||
} catch (error) {
|
||||
console.warn('Farcaster AuthKit not available:', error);
|
||||
}
|
||||
|
||||
setAuthComponents({
|
||||
SessionProvider,
|
||||
AuthKitProvider,
|
||||
loaded: true,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error loading auth components:', error);
|
||||
setAuthComponents({
|
||||
SessionProvider: null,
|
||||
AuthKitProvider: null,
|
||||
loaded: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
loadAuthComponents();
|
||||
}, [shouldUseSession]);
|
||||
|
||||
if (!authComponents.loaded) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
if (!shouldUseSession || !authComponents.SessionProvider) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
const { SessionProvider, AuthKitProvider } = authComponents;
|
||||
|
||||
if (AuthKitProvider) {
|
||||
return (
|
||||
<SessionProvider session={session}>
|
||||
<WagmiProvider>
|
||||
<MiniAppProvider
|
||||
analyticsEnabled={ANALYTICS_ENABLED}
|
||||
backButtonEnabled={true}
|
||||
>
|
||||
<SafeFarcasterSolanaProvider endpoint={solanaEndpoint}>
|
||||
<AuthKitProvider config={{}}>{children}</AuthKitProvider>
|
||||
</SafeFarcasterSolanaProvider>
|
||||
</MiniAppProvider>
|
||||
</WagmiProvider>
|
||||
<AuthKitProvider config={{}}>{children}</AuthKitProvider>
|
||||
</SessionProvider>
|
||||
);
|
||||
}
|
||||
|
||||
// Return without SessionProvider if no session
|
||||
|
||||
return <SessionProvider session={session}>{children}</SessionProvider>;
|
||||
}
|
||||
|
||||
export function Providers({
|
||||
session,
|
||||
children,
|
||||
shouldUseSession = false,
|
||||
}: {
|
||||
session: any | null;
|
||||
children: React.ReactNode;
|
||||
shouldUseSession?: boolean;
|
||||
}) {
|
||||
const solanaEndpoint =
|
||||
process.env.SOLANA_RPC_ENDPOINT || 'https://solana-rpc.publicnode.com';
|
||||
|
||||
return (
|
||||
<WagmiProvider>
|
||||
<MiniAppProvider
|
||||
@@ -51,7 +121,9 @@ export function Providers({
|
||||
backButtonEnabled={true}
|
||||
>
|
||||
<SafeFarcasterSolanaProvider endpoint={solanaEndpoint}>
|
||||
<AuthKitProvider config={{}}>{children}</AuthKitProvider>
|
||||
<AuthProviders session={session} shouldUseSession={shouldUseSession}>
|
||||
{children}
|
||||
</AuthProviders>
|
||||
</SafeFarcasterSolanaProvider>
|
||||
</MiniAppProvider>
|
||||
</WagmiProvider>
|
||||
|
||||
85
src/auth.ts
85
src/auth.ts
@@ -217,74 +217,6 @@ function getDomainFromUrl(urlString: string | undefined): string {
|
||||
export const authOptions: AuthOptions = {
|
||||
// Configure one or more authentication providers
|
||||
providers: [
|
||||
CredentialsProvider({
|
||||
id: 'farcaster',
|
||||
name: 'Sign in with Farcaster',
|
||||
credentials: {
|
||||
message: {
|
||||
label: 'Message',
|
||||
type: 'text',
|
||||
placeholder: '0x0',
|
||||
},
|
||||
signature: {
|
||||
label: 'Signature',
|
||||
type: 'text',
|
||||
placeholder: '0x0',
|
||||
},
|
||||
nonce: {
|
||||
label: 'Nonce',
|
||||
type: 'text',
|
||||
placeholder: 'Custom nonce (optional)',
|
||||
},
|
||||
// In a production app with a server, these should be fetched from
|
||||
// your Farcaster data indexer rather than have them accepted as part
|
||||
// of credentials.
|
||||
// question: should these natively use the Neynar API?
|
||||
name: {
|
||||
label: 'Name',
|
||||
type: 'text',
|
||||
placeholder: '0x0',
|
||||
},
|
||||
pfp: {
|
||||
label: 'Pfp',
|
||||
type: 'text',
|
||||
placeholder: '0x0',
|
||||
},
|
||||
},
|
||||
async authorize(credentials, req) {
|
||||
const nonce = req?.body?.csrfToken;
|
||||
|
||||
if (!nonce) {
|
||||
console.error('No nonce or CSRF token provided');
|
||||
return null;
|
||||
}
|
||||
const appClient = createAppClient({
|
||||
ethereum: viemConnector(),
|
||||
});
|
||||
|
||||
const domain = getDomainFromUrl(process.env.NEXTAUTH_URL);
|
||||
|
||||
const verifyResponse = await appClient.verifySignInMessage({
|
||||
message: credentials?.message as string,
|
||||
signature: credentials?.signature as `0x${string}`,
|
||||
domain,
|
||||
nonce,
|
||||
});
|
||||
|
||||
const { success, fid } = verifyResponse;
|
||||
|
||||
if (!success) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
id: fid.toString(),
|
||||
name: credentials?.name || `User ${fid}`,
|
||||
image: credentials?.pfp || null,
|
||||
provider: 'farcaster',
|
||||
};
|
||||
},
|
||||
}),
|
||||
CredentialsProvider({
|
||||
id: 'neynar',
|
||||
name: 'Sign in with Neynar',
|
||||
@@ -333,10 +265,18 @@ export const authOptions: AuthOptions = {
|
||||
try {
|
||||
// Validate the signature using Farcaster's auth client (same as Farcaster provider)
|
||||
const appClient = createAppClient({
|
||||
// USE your own RPC URL or else you might get 401 error
|
||||
ethereum: viemConnector(),
|
||||
});
|
||||
|
||||
const domain = getDomainFromUrl(process.env.NEXTAUTH_URL);
|
||||
const baseUrl =
|
||||
process.env.VERCEL_ENV === 'production'
|
||||
? `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`
|
||||
: process.env.VERCEL_URL
|
||||
? `https://${process.env.VERCEL_URL}`
|
||||
: `http://localhost:${process.env.PORT ?? 3000}`;
|
||||
|
||||
const domain = getDomainFromUrl(baseUrl);
|
||||
|
||||
const verifyResponse = await appClient.verifySignInMessage({
|
||||
message: credentials?.message as string,
|
||||
@@ -377,12 +317,7 @@ export const authOptions: AuthOptions = {
|
||||
// Set provider at the root level
|
||||
session.provider = token.provider as string;
|
||||
|
||||
if (token.provider === 'farcaster') {
|
||||
// For Farcaster, simple structure
|
||||
session.user = {
|
||||
fid: parseInt(token.sub ?? ''),
|
||||
};
|
||||
} else if (token.provider === 'neynar') {
|
||||
if (token.provider === 'neynar') {
|
||||
// For Neynar, use full user data structure from user
|
||||
session.user = token.user as typeof session.user;
|
||||
session.signers = token.signers as typeof session.signers;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { useCallback, useState, type ComponentType } from 'react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { useCallback, useState } from 'react';
|
||||
import { useMiniApp } from '@neynar/react';
|
||||
import { ShareButton } from '../Share';
|
||||
import { Button } from '../Button';
|
||||
@@ -8,16 +9,14 @@ import { SignIn } from '../wallet/SignIn';
|
||||
import { type Haptics } from '@farcaster/miniapp-sdk';
|
||||
import { APP_URL } from '~/lib/constants';
|
||||
|
||||
// Optional import for NeynarAuthButton - may not exist in all templates
|
||||
let NeynarAuthButton: ComponentType | null = null;
|
||||
try {
|
||||
const module = require('../NeynarAuthButton/index');
|
||||
NeynarAuthButton = module.NeynarAuthButton;
|
||||
} catch (error) {
|
||||
// Component doesn't exist, that's okay
|
||||
console.log('NeynarAuthButton not available in this template');
|
||||
}
|
||||
|
||||
// Import NeynarAuthButton
|
||||
const NeynarAuthButton = dynamic(
|
||||
() =>
|
||||
import('../NeynarAuthButton').then((module) => ({
|
||||
default: module.NeynarAuthButton,
|
||||
})),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
/**
|
||||
* ActionsTab component handles mini app actions like sharing, notifications, and haptic feedback.
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { type AccountAssociation } from '@farcaster/miniapp-node';
|
||||
import { type AccountAssociation } from '@farcaster/miniapp-core/src/manifest';
|
||||
|
||||
/**
|
||||
* Application constants and configuration values.
|
||||
@@ -65,21 +65,22 @@ export const APP_SPLASH_URL: string = `${APP_URL}/splash.png`;
|
||||
* Background color for the splash screen.
|
||||
* Used as fallback when splash image is loading.
|
||||
*/
|
||||
export const APP_SPLASH_BACKGROUND_COLOR: string = "#f7f7f7";
|
||||
export const APP_SPLASH_BACKGROUND_COLOR: string = '#f7f7f7';
|
||||
|
||||
/**
|
||||
* Account association for the mini app.
|
||||
* Used to associate the mini app with a Farcaster account.
|
||||
* If not provided, the mini app will be unsigned and have limited capabilities.
|
||||
*/
|
||||
export const APP_ACCOUNT_ASSOCIATION: AccountAssociation | undefined = undefined;
|
||||
export const APP_ACCOUNT_ASSOCIATION: AccountAssociation | undefined =
|
||||
undefined;
|
||||
|
||||
// --- UI Configuration ---
|
||||
/**
|
||||
* Text displayed on the main action button.
|
||||
* Used for the primary call-to-action in the mini app.
|
||||
*/
|
||||
export const APP_BUTTON_TEXT: string = 'Launch NSK';
|
||||
export const APP_BUTTON_TEXT = 'Launch Mini App';
|
||||
|
||||
// --- Integration Configuration ---
|
||||
/**
|
||||
@@ -89,7 +90,8 @@ export const APP_BUTTON_TEXT: string = 'Launch NSK';
|
||||
* Neynar webhook endpoint. Otherwise, falls back to a local webhook
|
||||
* endpoint for development and testing.
|
||||
*/
|
||||
export const APP_WEBHOOK_URL: string = process.env.NEYNAR_API_KEY && process.env.NEYNAR_CLIENT_ID
|
||||
export const APP_WEBHOOK_URL: string =
|
||||
process.env.NEYNAR_API_KEY && process.env.NEYNAR_CLIENT_ID
|
||||
? `https://api.neynar.com/f/app/${process.env.NEYNAR_CLIENT_ID}/event`
|
||||
: `${APP_URL}/api/webhook`;
|
||||
|
||||
@@ -100,7 +102,7 @@ export const APP_WEBHOOK_URL: string = process.env.NEYNAR_API_KEY && process.env
|
||||
* When false, wallet functionality is completely hidden from the UI.
|
||||
* Useful for mini apps that don't require wallet integration.
|
||||
*/
|
||||
export const USE_WALLET: boolean = true;
|
||||
export const USE_WALLET = false;
|
||||
|
||||
/**
|
||||
* Flag to enable/disable analytics tracking.
|
||||
@@ -109,7 +111,7 @@ export const USE_WALLET: boolean = true;
|
||||
* When false, analytics collection is disabled.
|
||||
* Useful for privacy-conscious users or development environments.
|
||||
*/
|
||||
export const ANALYTICS_ENABLED: boolean = true;
|
||||
export const ANALYTICS_ENABLED = true;
|
||||
|
||||
/**
|
||||
* Required chains for the mini app.
|
||||
@@ -117,7 +119,7 @@ export const ANALYTICS_ENABLED: boolean = true;
|
||||
* Contains an array of CAIP-2 identifiers for blockchains that the mini app requires.
|
||||
* If the host does not support all chains listed here, it will not render the mini app.
|
||||
* If empty or undefined, the mini app will be rendered regardless of chain support.
|
||||
*
|
||||
*
|
||||
* Supported chains: eip155:1, eip155:137, eip155:42161, eip155:10, eip155:8453,
|
||||
* solana:mainnet, solana:devnet
|
||||
*/
|
||||
|
||||
@@ -1,16 +1,18 @@
|
||||
import { FrameNotificationDetails } from "@farcaster/miniapp-sdk";
|
||||
import { Redis } from "@upstash/redis";
|
||||
import { APP_NAME } from "./constants";
|
||||
import { MiniAppNotificationDetails } from '@farcaster/miniapp-sdk';
|
||||
import { Redis } from '@upstash/redis';
|
||||
import { APP_NAME } from './constants';
|
||||
|
||||
// In-memory fallback storage
|
||||
const localStore = new Map<string, FrameNotificationDetails>();
|
||||
const localStore = new Map<string, MiniAppNotificationDetails>();
|
||||
|
||||
// Use Redis if KV env vars are present, otherwise use in-memory
|
||||
const useRedis = process.env.KV_REST_API_URL && process.env.KV_REST_API_TOKEN;
|
||||
const redis = useRedis ? new Redis({
|
||||
url: process.env.KV_REST_API_URL!,
|
||||
token: process.env.KV_REST_API_TOKEN!,
|
||||
}) : null;
|
||||
const redis = useRedis
|
||||
? new Redis({
|
||||
url: process.env.KV_REST_API_URL!,
|
||||
token: process.env.KV_REST_API_TOKEN!,
|
||||
})
|
||||
: null;
|
||||
|
||||
function getUserNotificationDetailsKey(fid: number): string {
|
||||
return `${APP_NAME}:user:${fid}`;
|
||||
@@ -18,17 +20,17 @@ function getUserNotificationDetailsKey(fid: number): string {
|
||||
|
||||
export async function getUserNotificationDetails(
|
||||
fid: number
|
||||
): Promise<FrameNotificationDetails | null> {
|
||||
): Promise<MiniAppNotificationDetails | null> {
|
||||
const key = getUserNotificationDetailsKey(fid);
|
||||
if (redis) {
|
||||
return await redis.get<FrameNotificationDetails>(key);
|
||||
return await redis.get<MiniAppNotificationDetails>(key);
|
||||
}
|
||||
return localStore.get(key) || null;
|
||||
}
|
||||
|
||||
export async function setUserNotificationDetails(
|
||||
fid: number,
|
||||
notificationDetails: FrameNotificationDetails
|
||||
notificationDetails: MiniAppNotificationDetails
|
||||
): Promise<void> {
|
||||
const key = getUserNotificationDetailsKey(fid);
|
||||
if (redis) {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { type ClassValue, clsx } from 'clsx';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
import { type Manifest } from '@farcaster/miniapp-node';
|
||||
import { Manifest } from '@farcaster/miniapp-core/src/manifest';
|
||||
import {
|
||||
APP_BUTTON_TEXT,
|
||||
APP_DESCRIPTION,
|
||||
@@ -10,10 +10,10 @@ import {
|
||||
APP_PRIMARY_CATEGORY,
|
||||
APP_SPLASH_BACKGROUND_COLOR,
|
||||
APP_SPLASH_URL,
|
||||
APP_TAGS, APP_URL,
|
||||
APP_TAGS,
|
||||
APP_URL,
|
||||
APP_WEBHOOK_URL,
|
||||
APP_ACCOUNT_ASSOCIATION,
|
||||
APP_REQUIRED_CHAINS,
|
||||
} from './constants';
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
@@ -22,7 +22,7 @@ export function cn(...inputs: ClassValue[]) {
|
||||
|
||||
export function getMiniAppEmbedMetadata(ogImageUrl?: string) {
|
||||
return {
|
||||
version: "next",
|
||||
version: 'next',
|
||||
imageUrl: ogImageUrl ?? APP_OG_IMAGE_URL,
|
||||
ogTitle: APP_NAME,
|
||||
ogDescription: APP_DESCRIPTION,
|
||||
@@ -30,7 +30,7 @@ export function getMiniAppEmbedMetadata(ogImageUrl?: string) {
|
||||
button: {
|
||||
title: APP_BUTTON_TEXT,
|
||||
action: {
|
||||
type: "launch_frame",
|
||||
type: 'launch_frame',
|
||||
name: APP_NAME,
|
||||
url: APP_URL,
|
||||
splashImageUrl: APP_SPLASH_URL,
|
||||
@@ -46,24 +46,17 @@ export function getMiniAppEmbedMetadata(ogImageUrl?: string) {
|
||||
|
||||
export async function getFarcasterDomainManifest(): Promise<Manifest> {
|
||||
return {
|
||||
accountAssociation: APP_ACCOUNT_ASSOCIATION,
|
||||
accountAssociation: APP_ACCOUNT_ASSOCIATION!,
|
||||
miniapp: {
|
||||
version: "1",
|
||||
name: APP_NAME ?? "Neynar Starter Kit",
|
||||
iconUrl: APP_ICON_URL,
|
||||
version: '1',
|
||||
name: APP_NAME ?? 'Neynar Starter Kit',
|
||||
homeUrl: APP_URL,
|
||||
iconUrl: APP_ICON_URL,
|
||||
imageUrl: APP_OG_IMAGE_URL,
|
||||
buttonTitle: APP_BUTTON_TEXT ?? "Launch Mini App",
|
||||
buttonTitle: APP_BUTTON_TEXT ?? 'Launch Mini App',
|
||||
splashImageUrl: APP_SPLASH_URL,
|
||||
splashBackgroundColor: APP_SPLASH_BACKGROUND_COLOR,
|
||||
webhookUrl: APP_WEBHOOK_URL,
|
||||
description: APP_DESCRIPTION,
|
||||
primaryCategory: APP_PRIMARY_CATEGORY,
|
||||
tags: APP_TAGS,
|
||||
requiredChains: APP_REQUIRED_CHAINS.length > 0 ? APP_REQUIRED_CHAINS : undefined,
|
||||
ogTitle: APP_NAME,
|
||||
ogDescription: APP_DESCRIPTION,
|
||||
ogImageUrl: APP_OG_IMAGE_URL,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@@ -22,6 +22,13 @@
|
||||
"~/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"ts-node": {
|
||||
"esm": true,
|
||||
"compilerOptions": {
|
||||
"module": "ES2020",
|
||||
"moduleResolution": "node"
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user