mirror of
https://github.com/neynarxyz/create-farcaster-mini-app.git
synced 2025-11-16 08:08:56 -05:00
Merge branch 'main' into shreyas-formatting
This commit is contained in:
Shreyaschorge
commit
b366d97b53
21
bin/init.js
21
bin/init.js
@ -1,12 +1,12 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
import { execSync } from 'child_process';
|
||||
import crypto from 'crypto';
|
||||
import fs from 'fs';
|
||||
import { dirname } from 'path';
|
||||
import path from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
import inquirer from 'inquirer';
|
||||
import { fileURLToPath } from 'url';
|
||||
import { dirname } from 'path';
|
||||
import { execSync } from 'child_process';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import crypto from 'crypto';
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = dirname(__filename);
|
||||
@ -47,7 +47,7 @@ async function queryNeynarApp(apiKey) {
|
||||
}
|
||||
try {
|
||||
const response = await fetch(
|
||||
'https://api.neynar.com/portal/app_by_api_key?starter_kit=true',
|
||||
`https://api.neynar.com/portal/app_by_api_key?starter_kit=true`,
|
||||
{
|
||||
headers: {
|
||||
'x-api-key': apiKey,
|
||||
@ -444,7 +444,7 @@ export async function init(
|
||||
// Update package.json
|
||||
console.log('\nUpdating package.json...');
|
||||
const packageJsonPath = path.join(projectPath, 'package.json');
|
||||
const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
|
||||
let packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
|
||||
|
||||
packageJson.name = finalProjectName;
|
||||
packageJson.version = '0.1.0';
|
||||
@ -465,6 +465,7 @@ export async function init(
|
||||
'@farcaster/miniapp-sdk': '>=0.1.6 <1.0.0',
|
||||
'@farcaster/miniapp-wagmi-connector': '^1.0.0',
|
||||
'@farcaster/mini-app-solana': '>=0.0.17 <1.0.0',
|
||||
'@farcaster/quick-auth': '>=0.0.7 <1.0.0',
|
||||
'@neynar/react': '^1.2.5',
|
||||
'@radix-ui/react-label': '^2.1.1',
|
||||
'@solana/wallet-adapter-react': '^0.15.38',
|
||||
@ -476,7 +477,6 @@ export async function init(
|
||||
'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',
|
||||
@ -488,6 +488,7 @@ export async function init(
|
||||
};
|
||||
|
||||
packageJson.devDependencies = {
|
||||
'@types/inquirer': '^9.0.8',
|
||||
'@types/node': '^20',
|
||||
'@types/react': '^19',
|
||||
'@types/react-dom': '^19',
|
||||
@ -499,8 +500,8 @@ export async function init(
|
||||
'pino-pretty': '^13.0.0',
|
||||
postcss: '^8',
|
||||
tailwindcss: '^3.4.1',
|
||||
typescript: '^5',
|
||||
'ts-node': '^10.9.2',
|
||||
typescript: '^5',
|
||||
};
|
||||
|
||||
// Add Neynar SDK if selected
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@neynar/create-farcaster-mini-app",
|
||||
"version": "1.6.3",
|
||||
"version": "1.7.2",
|
||||
"type": "module",
|
||||
"private": false,
|
||||
"access": "public",
|
||||
|
||||
@ -5,7 +5,6 @@ import os from 'os';
|
||||
import { fileURLToPath } from 'url';
|
||||
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';
|
||||
|
||||
@ -132,7 +131,7 @@ async function checkRequiredEnvVars(): Promise<void> {
|
||||
|
||||
process.env.SPONSOR_SIGNER = sponsorSigner.toString();
|
||||
|
||||
if (storeSeedPhrase) {
|
||||
if (process.env.SEED_PHRASE) {
|
||||
fs.appendFileSync(
|
||||
'.env.local',
|
||||
`\nSPONSOR_SIGNER="${sponsorSigner}"`,
|
||||
@ -299,17 +298,26 @@ async function setVercelEnvVarSDK(
|
||||
}
|
||||
|
||||
// Get existing environment variables
|
||||
const existingVars = await vercelClient.projects.getEnvironmentVariables({
|
||||
const existingVars = await vercelClient.projects.filterProjectEnvs({
|
||||
idOrName: projectId,
|
||||
});
|
||||
|
||||
const existingVar = existingVars.envs?.find(
|
||||
// Handle different response types
|
||||
let envs: any[] = [];
|
||||
if ('envs' in existingVars && Array.isArray(existingVars.envs)) {
|
||||
envs = existingVars.envs;
|
||||
} else if ('target' in existingVars && 'key' in existingVars) {
|
||||
// Single environment variable response
|
||||
envs = [existingVars];
|
||||
}
|
||||
|
||||
const existingVar = envs.find(
|
||||
(env: any) => env.key === key && env.target?.includes('production'),
|
||||
);
|
||||
|
||||
if (existingVar) {
|
||||
if (existingVar && existingVar.id) {
|
||||
// Update existing variable
|
||||
await vercelClient.projects.editEnvironmentVariable({
|
||||
await vercelClient.projects.editProjectEnv({
|
||||
idOrName: projectId,
|
||||
id: existingVar.id,
|
||||
requestBody: {
|
||||
@ -320,7 +328,7 @@ async function setVercelEnvVarSDK(
|
||||
console.log(`✅ Updated environment variable: ${key}`);
|
||||
} else {
|
||||
// Create new variable
|
||||
await vercelClient.projects.createEnvironmentVariable({
|
||||
await vercelClient.projects.createProjectEnv({
|
||||
idOrName: projectId,
|
||||
requestBody: {
|
||||
key: key,
|
||||
@ -458,7 +466,7 @@ async function waitForDeployment(
|
||||
|
||||
while (Date.now() - startTime < maxWaitTime) {
|
||||
try {
|
||||
const deployments = await vercelClient?.deployments.list({
|
||||
const deployments = await vercelClient?.deployments.getDeployments({
|
||||
projectId: projectId,
|
||||
limit: 1,
|
||||
});
|
||||
@ -594,12 +602,17 @@ async function deployToVercel(useGitHub = false): Promise<void> {
|
||||
|
||||
if (vercelClient) {
|
||||
try {
|
||||
const project = await vercelClient.projects.get({
|
||||
idOrName: projectId,
|
||||
});
|
||||
const projects = await vercelClient.projects.getProjects({});
|
||||
const project = projects.projects.find(
|
||||
p => p.id === projectId || p.name === projectId,
|
||||
);
|
||||
if (project) {
|
||||
projectName = project.name;
|
||||
domain = `${projectName}.vercel.app`;
|
||||
console.log('🌐 Using project name for domain:', domain);
|
||||
} else {
|
||||
throw new Error('Project not found');
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
if (error instanceof Error) {
|
||||
console.warn(
|
||||
@ -653,12 +666,7 @@ async function deployToVercel(useGitHub = false): Promise<void> {
|
||||
}
|
||||
|
||||
// Prepare environment variables
|
||||
const nextAuthSecret =
|
||||
process.env.NEXTAUTH_SECRET || crypto.randomBytes(32).toString('hex');
|
||||
const vercelEnv = {
|
||||
NEXTAUTH_SECRET: nextAuthSecret,
|
||||
AUTH_SECRET: nextAuthSecret,
|
||||
NEXTAUTH_URL: `https://${domain}`,
|
||||
NEXT_PUBLIC_URL: `https://${domain}`,
|
||||
|
||||
...(process.env.NEYNAR_API_KEY && {
|
||||
@ -763,7 +771,6 @@ async function deployToVercel(useGitHub = false): Promise<void> {
|
||||
console.log('🔄 Updating environment variables with correct domain...');
|
||||
|
||||
const updatedEnv: Record<string, string | object> = {
|
||||
NEXTAUTH_URL: `https://${actualDomain}`,
|
||||
NEXT_PUBLIC_URL: `https://${actualDomain}`,
|
||||
};
|
||||
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import localtunnel from 'localtunnel';
|
||||
import { spawn } from 'child_process';
|
||||
import { createServer } from 'net';
|
||||
import dotenv from 'dotenv';
|
||||
import path from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
import dotenv from 'dotenv';
|
||||
import localtunnel from 'localtunnel';
|
||||
|
||||
// Load environment variables
|
||||
dotenv.config({ path: '.env.local' });
|
||||
@ -96,7 +96,7 @@ async function startDev() {
|
||||
? `1. Run: netstat -ano | findstr :${port}\n` +
|
||||
'2. Note the PID (Process ID) from the output\n' +
|
||||
'3. Run: taskkill /PID <PID> /F\n'
|
||||
: 'On macOS/Linux, run:\nnpm run cleanup\n') +
|
||||
: `On macOS/Linux, run:\nnpm run cleanup\n`) +
|
||||
'\nThen try running this command again.',
|
||||
);
|
||||
process.exit(1);
|
||||
@ -158,11 +158,7 @@ async function startDev() {
|
||||
|
||||
nextDev = spawn(nextBin, ['dev', '-p', port.toString()], {
|
||||
stdio: 'inherit',
|
||||
env: {
|
||||
...process.env,
|
||||
NEXT_PUBLIC_URL: miniAppUrl,
|
||||
NEXTAUTH_URL: miniAppUrl,
|
||||
},
|
||||
env: { ...process.env, NEXT_PUBLIC_URL: miniAppUrl },
|
||||
cwd: projectRoot,
|
||||
shell: process.platform === 'win32', // Add shell option for Windows
|
||||
});
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
import NextAuth from 'next-auth';
|
||||
import { authOptions } from '~/auth';
|
||||
|
||||
const handler = NextAuth(authOptions);
|
||||
|
||||
export { handler as GET, handler as POST };
|
||||
@ -1,46 +0,0 @@
|
||||
import { NextResponse } from 'next/server';
|
||||
import { getServerSession } from 'next-auth';
|
||||
import { authOptions } from '~/auth';
|
||||
|
||||
export async function POST(request: Request) {
|
||||
try {
|
||||
const session = await getServerSession(authOptions);
|
||||
|
||||
if (!session?.user?.fid) {
|
||||
return NextResponse.json(
|
||||
{ error: 'No authenticated session found' },
|
||||
{ status: 401 },
|
||||
);
|
||||
}
|
||||
|
||||
const body = await request.json();
|
||||
const { signers, user } = body;
|
||||
|
||||
if (!signers || !user) {
|
||||
return NextResponse.json(
|
||||
{ error: 'Signers and user are required' },
|
||||
{ status: 400 },
|
||||
);
|
||||
}
|
||||
|
||||
// For NextAuth to update the session, we need to trigger the JWT callback
|
||||
// This is typically done by calling the session endpoint with updated data
|
||||
// However, we can't directly modify the session token from here
|
||||
|
||||
// Instead, we'll store the data temporarily and let the client refresh the session
|
||||
// The session will be updated when the JWT callback is triggered
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: 'Session update prepared',
|
||||
signers,
|
||||
user,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error preparing session update:', error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to prepare session update' },
|
||||
{ status: 500 },
|
||||
);
|
||||
}
|
||||
}
|
||||
52
src/app/api/auth/validate/route.ts
Normal file
52
src/app/api/auth/validate/route.ts
Normal file
@ -0,0 +1,52 @@
|
||||
import { NextResponse } from 'next/server';
|
||||
import { createClient, Errors } from '@farcaster/quick-auth';
|
||||
|
||||
const client = createClient();
|
||||
|
||||
export async function POST(request: Request) {
|
||||
try {
|
||||
const { token } = await request.json();
|
||||
|
||||
if (!token) {
|
||||
return NextResponse.json(
|
||||
{ error: 'Token is required' },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
// Get domain from environment or request
|
||||
const domain = process.env.NEXT_PUBLIC_URL
|
||||
? new URL(process.env.NEXT_PUBLIC_URL).hostname
|
||||
: request.headers.get('host') || 'localhost';
|
||||
|
||||
try {
|
||||
// Use the official QuickAuth library to verify the JWT
|
||||
const payload = await client.verifyJwt({
|
||||
token,
|
||||
domain,
|
||||
});
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
user: {
|
||||
fid: payload.sub,
|
||||
},
|
||||
});
|
||||
} catch (e) {
|
||||
if (e instanceof Errors.InvalidTokenError) {
|
||||
console.info('Invalid token:', e.message);
|
||||
return NextResponse.json(
|
||||
{ error: 'Invalid token' },
|
||||
{ status: 401 }
|
||||
);
|
||||
}
|
||||
throw e;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Token validation error:', error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Internal server error' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
import type { Metadata } from 'next';
|
||||
|
||||
import '~/app/globals.css';
|
||||
import { Providers } from '~/app/providers';
|
||||
import { getSession } from '~/auth';
|
||||
import { APP_NAME, APP_DESCRIPTION } from '~/lib/constants';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
@ -14,12 +14,10 @@ export default async function RootLayout({
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
const session = await getSession();
|
||||
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>
|
||||
<Providers session={session}>{children}</Providers>
|
||||
<Providers>{children}</Providers>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
@ -1,10 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import dynamic from 'next/dynamic';
|
||||
import { AuthKitProvider } from '@farcaster/auth-kit';
|
||||
import { MiniAppProvider } from '@neynar/react';
|
||||
import type { Session } from 'next-auth';
|
||||
import { SessionProvider } from 'next-auth/react';
|
||||
import { SafeFarcasterSolanaProvider } from '~/components/providers/SafeFarcasterSolanaProvider';
|
||||
import { ANALYTICS_ENABLED } from '~/lib/constants';
|
||||
|
||||
@ -15,27 +12,19 @@ const WagmiProvider = dynamic(
|
||||
},
|
||||
);
|
||||
|
||||
export function Providers({
|
||||
session,
|
||||
children,
|
||||
}: {
|
||||
session: Session | null;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
export function Providers({ children }: { children: React.ReactNode }) {
|
||||
const solanaEndpoint =
|
||||
process.env.SOLANA_RPC_ENDPOINT || 'https://solana-rpc.publicnode.com';
|
||||
return (
|
||||
<SessionProvider session={session}>
|
||||
<WagmiProvider>
|
||||
<MiniAppProvider
|
||||
analyticsEnabled={ANALYTICS_ENABLED}
|
||||
backButtonEnabled={true}
|
||||
>
|
||||
<SafeFarcasterSolanaProvider endpoint={solanaEndpoint}>
|
||||
<AuthKitProvider config={{}}>{children}</AuthKitProvider>
|
||||
{children}
|
||||
</SafeFarcasterSolanaProvider>
|
||||
</MiniAppProvider>
|
||||
</WagmiProvider>
|
||||
</SessionProvider>
|
||||
);
|
||||
}
|
||||
|
||||
439
src/auth.ts
439
src/auth.ts
@ -1,439 +1,10 @@
|
||||
import { createAppClient, viemConnector } from '@farcaster/auth-client';
|
||||
import { AuthOptions, getServerSession } from 'next-auth';
|
||||
import CredentialsProvider from 'next-auth/providers/credentials';
|
||||
import { sdk } from '@farcaster/miniapp-sdk';
|
||||
|
||||
declare module 'next-auth' {
|
||||
interface Session {
|
||||
provider?: string;
|
||||
user?: {
|
||||
fid: number;
|
||||
object?: 'user';
|
||||
username?: string;
|
||||
display_name?: string;
|
||||
pfp_url?: string;
|
||||
custody_address?: string;
|
||||
profile?: {
|
||||
bio: {
|
||||
text: string;
|
||||
mentioned_profiles?: Array<{
|
||||
object: 'user_dehydrated';
|
||||
fid: number;
|
||||
username: string;
|
||||
display_name: string;
|
||||
pfp_url: string;
|
||||
custody_address: string;
|
||||
}>;
|
||||
mentioned_profiles_ranges?: Array<{
|
||||
start: number;
|
||||
end: number;
|
||||
}>;
|
||||
};
|
||||
location?: {
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
address: {
|
||||
city: string;
|
||||
state: string;
|
||||
country: string;
|
||||
country_code: string;
|
||||
};
|
||||
};
|
||||
};
|
||||
follower_count?: number;
|
||||
following_count?: number;
|
||||
verifications?: string[];
|
||||
verified_addresses?: {
|
||||
eth_addresses: string[];
|
||||
sol_addresses: string[];
|
||||
primary: {
|
||||
eth_address: string;
|
||||
sol_address: string;
|
||||
};
|
||||
};
|
||||
verified_accounts?: Array<Record<string, unknown>>;
|
||||
power_badge?: boolean;
|
||||
url?: string;
|
||||
experimental?: {
|
||||
neynar_user_score: number;
|
||||
deprecation_notice: string;
|
||||
};
|
||||
score?: number;
|
||||
};
|
||||
signers?: {
|
||||
object: 'signer';
|
||||
signer_uuid: string;
|
||||
public_key: string;
|
||||
status: 'approved';
|
||||
fid: number;
|
||||
}[];
|
||||
}
|
||||
|
||||
interface User {
|
||||
provider?: string;
|
||||
signers?: Array<{
|
||||
object: 'signer';
|
||||
signer_uuid: string;
|
||||
public_key: string;
|
||||
status: 'approved';
|
||||
fid: number;
|
||||
}>;
|
||||
user?: {
|
||||
object: 'user';
|
||||
fid: number;
|
||||
username: string;
|
||||
display_name: string;
|
||||
pfp_url: string;
|
||||
custody_address: string;
|
||||
profile: {
|
||||
bio: {
|
||||
text: string;
|
||||
mentioned_profiles?: Array<{
|
||||
object: 'user_dehydrated';
|
||||
fid: number;
|
||||
username: string;
|
||||
display_name: string;
|
||||
pfp_url: string;
|
||||
custody_address: string;
|
||||
}>;
|
||||
mentioned_profiles_ranges?: Array<{
|
||||
start: number;
|
||||
end: number;
|
||||
}>;
|
||||
};
|
||||
location?: {
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
address: {
|
||||
city: string;
|
||||
state: string;
|
||||
country: string;
|
||||
country_code: string;
|
||||
};
|
||||
};
|
||||
};
|
||||
follower_count: number;
|
||||
following_count: number;
|
||||
verifications: string[];
|
||||
verified_addresses: {
|
||||
eth_addresses: string[];
|
||||
sol_addresses: string[];
|
||||
primary: {
|
||||
eth_address: string;
|
||||
sol_address: string;
|
||||
};
|
||||
};
|
||||
verified_accounts: Array<Record<string, unknown>>;
|
||||
power_badge: boolean;
|
||||
url?: string;
|
||||
experimental?: {
|
||||
neynar_user_score: number;
|
||||
deprecation_notice: string;
|
||||
};
|
||||
score: number;
|
||||
};
|
||||
}
|
||||
|
||||
interface JWT {
|
||||
provider?: string;
|
||||
signers?: Array<{
|
||||
object: 'signer';
|
||||
signer_uuid: string;
|
||||
public_key: string;
|
||||
status: 'approved';
|
||||
fid: number;
|
||||
}>;
|
||||
user?: {
|
||||
object: 'user';
|
||||
fid: number;
|
||||
username: string;
|
||||
display_name: string;
|
||||
pfp_url: string;
|
||||
custody_address: string;
|
||||
profile: {
|
||||
bio: {
|
||||
text: string;
|
||||
mentioned_profiles?: Array<{
|
||||
object: 'user_dehydrated';
|
||||
fid: number;
|
||||
username: string;
|
||||
display_name: string;
|
||||
pfp_url: string;
|
||||
custody_address: string;
|
||||
}>;
|
||||
mentioned_profiles_ranges?: Array<{
|
||||
start: number;
|
||||
end: number;
|
||||
}>;
|
||||
};
|
||||
location?: {
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
address: {
|
||||
city: string;
|
||||
state: string;
|
||||
country: string;
|
||||
country_code: string;
|
||||
};
|
||||
};
|
||||
};
|
||||
follower_count: number;
|
||||
following_count: number;
|
||||
verifications: string[];
|
||||
verified_addresses: {
|
||||
eth_addresses: string[];
|
||||
sol_addresses: string[];
|
||||
primary: {
|
||||
eth_address: string;
|
||||
sol_address: string;
|
||||
};
|
||||
};
|
||||
verified_accounts?: Array<Record<string, unknown>>;
|
||||
power_badge?: boolean;
|
||||
url?: string;
|
||||
experimental?: {
|
||||
neynar_user_score: number;
|
||||
deprecation_notice: string;
|
||||
};
|
||||
score?: number;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function getDomainFromUrl(urlString: string | undefined): string {
|
||||
if (!urlString) {
|
||||
console.warn('NEXTAUTH_URL is not set, using localhost:3000 as fallback');
|
||||
return 'localhost:3000';
|
||||
}
|
||||
try {
|
||||
const url = new URL(urlString);
|
||||
return url.hostname;
|
||||
} catch (error) {
|
||||
console.error('Invalid NEXTAUTH_URL:', urlString, error);
|
||||
console.warn('Using localhost:3000 as fallback');
|
||||
return 'localhost:3000';
|
||||
}
|
||||
}
|
||||
|
||||
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',
|
||||
credentials: {
|
||||
message: {
|
||||
label: 'Message',
|
||||
type: 'text',
|
||||
placeholder: '0x0',
|
||||
},
|
||||
signature: {
|
||||
label: 'Signature',
|
||||
type: 'text',
|
||||
placeholder: '0x0',
|
||||
},
|
||||
nonce: {
|
||||
label: 'Nonce',
|
||||
type: 'text',
|
||||
placeholder: 'Custom nonce (optional)',
|
||||
},
|
||||
fid: {
|
||||
label: 'FID',
|
||||
type: 'text',
|
||||
placeholder: '0',
|
||||
},
|
||||
signers: {
|
||||
label: 'Signers',
|
||||
type: 'text',
|
||||
placeholder: 'JSON string of signers',
|
||||
},
|
||||
user: {
|
||||
label: 'User Data',
|
||||
type: 'text',
|
||||
placeholder: 'JSON string of user data',
|
||||
},
|
||||
},
|
||||
async authorize(credentials) {
|
||||
const nonce = credentials?.nonce;
|
||||
|
||||
if (!nonce) {
|
||||
console.error('No nonce or CSRF token provided for Neynar auth');
|
||||
return null;
|
||||
}
|
||||
|
||||
// For Neynar, we can use a different validation approach
|
||||
// This could involve validating against Neynar's API or using their SDK
|
||||
try {
|
||||
// Validate the signature using Farcaster's auth client (same as Farcaster provider)
|
||||
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;
|
||||
}
|
||||
|
||||
// Validate that the provided FID matches the verified FID
|
||||
if (credentials?.fid && parseInt(credentials.fid) !== fid) {
|
||||
console.error('FID mismatch in Neynar auth');
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
id: fid.toString(),
|
||||
provider: 'neynar',
|
||||
signers: credentials?.signers
|
||||
? JSON.parse(credentials.signers)
|
||||
: undefined,
|
||||
user: credentials?.user ? JSON.parse(credentials.user) : undefined,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error in Neynar auth:', error);
|
||||
return null;
|
||||
}
|
||||
},
|
||||
}),
|
||||
],
|
||||
callbacks: {
|
||||
session: async ({ session, token }) => {
|
||||
// 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') {
|
||||
// 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;
|
||||
}
|
||||
|
||||
return session;
|
||||
},
|
||||
jwt: async ({ token, user }) => {
|
||||
if (user) {
|
||||
token.provider = user.provider;
|
||||
token.signers = user.signers;
|
||||
token.user = user.user;
|
||||
}
|
||||
return token;
|
||||
},
|
||||
},
|
||||
cookies: {
|
||||
sessionToken: {
|
||||
name: 'next-auth.session-token',
|
||||
options: {
|
||||
httpOnly: true,
|
||||
sameSite: 'none',
|
||||
path: '/',
|
||||
secure: true,
|
||||
},
|
||||
},
|
||||
callbackUrl: {
|
||||
name: 'next-auth.callback-url',
|
||||
options: {
|
||||
sameSite: 'none',
|
||||
path: '/',
|
||||
secure: true,
|
||||
},
|
||||
},
|
||||
csrfToken: {
|
||||
name: 'next-auth.csrf-token',
|
||||
options: {
|
||||
httpOnly: true,
|
||||
sameSite: 'none',
|
||||
path: '/',
|
||||
secure: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
// Export QuickAuth from the SDK
|
||||
export const quickAuth = sdk.quickAuth;
|
||||
|
||||
// Helper function to get session (for server-side compatibility)
|
||||
export const getSession = async () => {
|
||||
try {
|
||||
return await getServerSession(authOptions);
|
||||
} catch (error) {
|
||||
console.error('Error getting server session:', error);
|
||||
// For QuickAuth, sessions are managed by the SDK
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
@ -16,8 +16,8 @@ export function ProfileButton({
|
||||
|
||||
useDetectClickOutside(ref, () => setShowDropdown(false));
|
||||
|
||||
const name = userData?.username ?? `!${userData?.fid}`;
|
||||
const pfpUrl = userData?.pfpUrl ?? 'https://farcaster.xyz/avatar.png';
|
||||
const name = userData?.username && userData.username.trim() !== '' ? userData.username : `!${userData?.fid}`;
|
||||
const pfpUrl = userData?.pfpUrl && userData.pfpUrl.trim() !== '' ? userData.pfpUrl : 'https://farcaster.xyz/avatar.png';
|
||||
|
||||
return (
|
||||
<div className="relative" ref={ref}>
|
||||
|
||||
@ -1,20 +1,13 @@
|
||||
'use client';
|
||||
|
||||
import '@farcaster/auth-kit/styles.css';
|
||||
import { useCallback, useEffect, useState, useRef } from 'react';
|
||||
import { useSignIn, UseSignInData } from '@farcaster/auth-kit';
|
||||
import sdk, { SignIn as SignInCore } from '@farcaster/frame-sdk';
|
||||
import { useMiniApp } from '@neynar/react';
|
||||
import {
|
||||
signIn as backendSignIn,
|
||||
signOut as backendSignOut,
|
||||
useSession,
|
||||
} from 'next-auth/react';
|
||||
import { Button } from '~/components/ui/Button';
|
||||
import { AuthDialog } from '~/components/ui/NeynarAuthButton/AuthDialog';
|
||||
import { ProfileButton } from '~/components/ui/NeynarAuthButton/ProfileButton';
|
||||
import { getItem, removeItem, setItem } from '~/lib/localStorage';
|
||||
import { cn } from '~/lib/utils';
|
||||
import { Button } from '~/components/ui/Button';
|
||||
import { ProfileButton } from '~/components/ui/NeynarAuthButton/ProfileButton';
|
||||
import { AuthDialog } from '~/components/ui/NeynarAuthButton/AuthDialog';
|
||||
import { useMiniApp } from '@neynar/react';
|
||||
import sdk, { SignIn as SignInCore } from '@farcaster/frame-sdk';
|
||||
import { useQuickAuth } from '~/hooks/useQuickAuth';
|
||||
|
||||
type User = {
|
||||
fid: number;
|
||||
@ -24,7 +17,6 @@ type User = {
|
||||
// Add other user properties as needed
|
||||
};
|
||||
|
||||
const STORAGE_KEY = 'neynar_authenticated_user';
|
||||
const FARCASTER_FID = 9152;
|
||||
|
||||
interface StoredAuthState {
|
||||
@ -98,7 +90,12 @@ export function NeynarAuthButton() {
|
||||
const [storedAuth, setStoredAuth] = useState<StoredAuthState | null>(null);
|
||||
const [signersLoading, setSignersLoading] = useState(false);
|
||||
const { context } = useMiniApp();
|
||||
const { data: session } = useSession();
|
||||
const {
|
||||
authenticatedUser: quickAuthUser,
|
||||
signIn: quickAuthSignIn,
|
||||
signOut: quickAuthSignOut,
|
||||
} = useQuickAuth();
|
||||
|
||||
// New state for unified dialog flow
|
||||
const [showDialog, setShowDialog] = useState(false);
|
||||
const [dialogStep, setDialogStep] = useState<'signin' | 'access' | 'loading'>(
|
||||
@ -114,6 +111,10 @@ export function NeynarAuthButton() {
|
||||
const [signature, setSignature] = useState<string | null>(null);
|
||||
const [isSignerFlowRunning, setIsSignerFlowRunning] = useState(false);
|
||||
const signerFlowStartedRef = useRef(false);
|
||||
const [backendUserProfile, setBackendUserProfile] = useState<{
|
||||
username?: string;
|
||||
pfpUrl?: string;
|
||||
}>({});
|
||||
|
||||
// Determine which flow to use based on context
|
||||
const useBackendFlow = context !== undefined;
|
||||
@ -146,25 +147,15 @@ export function NeynarAuthButton() {
|
||||
if (!useBackendFlow) return;
|
||||
|
||||
try {
|
||||
// For backend flow, we need to sign in again with the additional data
|
||||
if (message && signature) {
|
||||
const signInData = {
|
||||
message,
|
||||
signature,
|
||||
redirect: false,
|
||||
nonce: nonce || '',
|
||||
fid: user?.fid?.toString() || '',
|
||||
signers: JSON.stringify(signers),
|
||||
user: JSON.stringify(user),
|
||||
};
|
||||
|
||||
await backendSignIn('neynar', signInData);
|
||||
// For backend flow, use QuickAuth to sign in
|
||||
if (signers && signers.length > 0) {
|
||||
await quickAuthSignIn();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ Error updating session with signers:', error);
|
||||
}
|
||||
},
|
||||
[useBackendFlow, message, signature, nonce],
|
||||
[useBackendFlow, quickAuthSignIn],
|
||||
);
|
||||
|
||||
// Helper function to fetch user data from Neynar API
|
||||
@ -246,14 +237,18 @@ export function NeynarAuthButton() {
|
||||
if (useBackendFlow) {
|
||||
// For backend flow, update session with signers
|
||||
if (signerData.signers && signerData.signers.length > 0) {
|
||||
const user =
|
||||
signerData.user ||
|
||||
(await fetchUserData(signerData.signers[0].fid));
|
||||
// Get user data for the first signer
|
||||
let user: StoredAuthState['user'] | null = null;
|
||||
if (signerData.signers[0].fid) {
|
||||
user = (await fetchUserData(
|
||||
signerData.signers[0].fid,
|
||||
)) as StoredAuthState['user'];
|
||||
}
|
||||
await updateSessionWithSigners(signerData.signers, user);
|
||||
}
|
||||
return signerData.signers;
|
||||
} else {
|
||||
// For frontend flow, store in localStorage
|
||||
// For frontend flow, store in memory only
|
||||
let user: StoredAuthState['user'] | null = null;
|
||||
|
||||
if (signerData.signers && signerData.signers.length > 0) {
|
||||
@ -263,13 +258,12 @@ export function NeynarAuthButton() {
|
||||
user = fetchedUser;
|
||||
}
|
||||
|
||||
// Store signers in localStorage, preserving existing auth data
|
||||
// Store signers in memory only
|
||||
const updatedState: StoredAuthState = {
|
||||
isAuthenticated: !!user,
|
||||
signers: signerData.signers || [],
|
||||
user,
|
||||
};
|
||||
setItem<StoredAuthState>(STORAGE_KEY, updatedState);
|
||||
setStoredAuth(updatedState);
|
||||
|
||||
return signerData.signers;
|
||||
@ -384,78 +378,105 @@ export function NeynarAuthButton() {
|
||||
generateNonce();
|
||||
}, []);
|
||||
|
||||
// Load stored auth state on mount (only for frontend flow)
|
||||
useEffect(() => {
|
||||
if (!useBackendFlow) {
|
||||
const stored = getItem<StoredAuthState>(STORAGE_KEY);
|
||||
if (stored && stored.isAuthenticated) {
|
||||
setStoredAuth(stored);
|
||||
// Backend flow using QuickAuth
|
||||
const handleBackendSignIn = useCallback(async () => {
|
||||
if (!nonce) {
|
||||
console.error('❌ No nonce available for backend sign-in');
|
||||
return;
|
||||
}
|
||||
}
|
||||
}, [useBackendFlow]);
|
||||
|
||||
// Success callback - this is critical!
|
||||
const onSuccessCallback = useCallback(
|
||||
async (res: UseSignInData) => {
|
||||
if (!useBackendFlow) {
|
||||
// Only handle localStorage for frontend flow
|
||||
const existingAuth = getItem<StoredAuthState>(STORAGE_KEY);
|
||||
const user = res.fid ? await fetchUserData(res.fid) : null;
|
||||
const authState: StoredAuthState = {
|
||||
...existingAuth,
|
||||
isAuthenticated: true,
|
||||
user: user as StoredAuthState['user'],
|
||||
signers: existingAuth?.signers || [], // Preserve existing signers
|
||||
};
|
||||
setItem<StoredAuthState>(STORAGE_KEY, authState);
|
||||
setStoredAuth(authState);
|
||||
}
|
||||
// For backend flow, the session will be handled by NextAuth
|
||||
},
|
||||
[useBackendFlow, fetchUserData],
|
||||
);
|
||||
try {
|
||||
setSignersLoading(true);
|
||||
const result = await sdk.actions.signIn({ nonce });
|
||||
|
||||
// Error callback
|
||||
const onErrorCallback = useCallback((error?: Error | null) => {
|
||||
console.error('❌ Sign in error:', error);
|
||||
}, []);
|
||||
|
||||
const signInState = useSignIn({
|
||||
nonce: nonce || undefined,
|
||||
onSuccess: onSuccessCallback,
|
||||
onError: onErrorCallback,
|
||||
setMessage(result.message);
|
||||
setSignature(result.signature);
|
||||
// Use QuickAuth to sign in
|
||||
const signInResult = await quickAuthSignIn();
|
||||
// Fetch user profile after sign in
|
||||
if (quickAuthUser?.fid) {
|
||||
const user = await fetchUserData(quickAuthUser.fid);
|
||||
setBackendUserProfile({
|
||||
username: user?.username || '',
|
||||
pfpUrl: user?.pfp_url || '',
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
if (e instanceof SignInCore.RejectedByUser) {
|
||||
console.log('ℹ️ Sign-in rejected by user');
|
||||
} else {
|
||||
console.error('❌ Backend sign-in error:', e);
|
||||
}
|
||||
}
|
||||
}, [nonce, quickAuthSignIn, quickAuthUser, fetchUserData]);
|
||||
|
||||
const {
|
||||
signIn: frontendSignIn,
|
||||
signOut: frontendSignOut,
|
||||
connect,
|
||||
reconnect,
|
||||
isSuccess,
|
||||
isError,
|
||||
error,
|
||||
channelToken,
|
||||
url,
|
||||
data,
|
||||
validSignature,
|
||||
} = signInState;
|
||||
|
||||
// Fetch user profile when quickAuthUser.fid changes (for backend flow)
|
||||
useEffect(() => {
|
||||
setMessage(data?.message || null);
|
||||
setSignature(data?.signature || null);
|
||||
if (useBackendFlow && quickAuthUser?.fid) {
|
||||
(async () => {
|
||||
const user = await fetchUserData(quickAuthUser.fid);
|
||||
setBackendUserProfile({
|
||||
username: user?.username || '',
|
||||
pfpUrl: user?.pfp_url || '',
|
||||
});
|
||||
})();
|
||||
}
|
||||
}, [useBackendFlow, quickAuthUser?.fid, fetchUserData]);
|
||||
|
||||
// Reset the signer flow flag when message/signature change
|
||||
if (data?.message && data?.signature) {
|
||||
const handleFrontEndSignIn = useCallback(async () => {
|
||||
try {
|
||||
setSignersLoading(true);
|
||||
const result = await sdk.actions.signIn({ nonce: nonce || '' });
|
||||
|
||||
setMessage(result.message);
|
||||
setSignature(result.signature);
|
||||
|
||||
// For frontend flow, we'll handle the signer flow in the useEffect
|
||||
} catch (e) {
|
||||
if (e instanceof SignInCore.RejectedByUser) {
|
||||
console.log('ℹ️ Sign-in rejected by user');
|
||||
} else {
|
||||
console.error('❌ Frontend sign-in error:', e);
|
||||
}
|
||||
} finally {
|
||||
setSignersLoading(false);
|
||||
}
|
||||
}, [nonce]);
|
||||
|
||||
const handleSignOut = useCallback(async () => {
|
||||
try {
|
||||
setSignersLoading(true);
|
||||
|
||||
if (useBackendFlow) {
|
||||
// Use QuickAuth sign out
|
||||
await quickAuthSignOut();
|
||||
} else {
|
||||
// Frontend flow sign out
|
||||
setStoredAuth(null);
|
||||
}
|
||||
|
||||
// Common cleanup for both flows
|
||||
setShowDialog(false);
|
||||
setDialogStep('signin');
|
||||
setSignerApprovalUrl(null);
|
||||
setMessage(null);
|
||||
setSignature(null);
|
||||
|
||||
// Reset polling interval
|
||||
if (pollingInterval) {
|
||||
clearInterval(pollingInterval);
|
||||
setPollingInterval(null);
|
||||
}
|
||||
|
||||
// Reset signer flow flag
|
||||
signerFlowStartedRef.current = false;
|
||||
} catch (error) {
|
||||
console.error('❌ Error during sign out:', error);
|
||||
// Optionally handle error state
|
||||
} finally {
|
||||
setSignersLoading(false);
|
||||
}
|
||||
}, [data?.message, data?.signature]);
|
||||
|
||||
// Connect for frontend flow when nonce is available
|
||||
useEffect(() => {
|
||||
if (!useBackendFlow && nonce && !channelToken) {
|
||||
connect();
|
||||
}
|
||||
}, [useBackendFlow, nonce, channelToken, connect]);
|
||||
}, [useBackendFlow, pollingInterval, quickAuthSignOut]);
|
||||
|
||||
// Handle fetching signers after successful authentication
|
||||
useEffect(() => {
|
||||
@ -538,103 +559,16 @@ export function NeynarAuthButton() {
|
||||
}
|
||||
}, [message, signature]); // Simplified dependencies
|
||||
|
||||
// Backend flow using NextAuth
|
||||
const handleBackendSignIn = useCallback(async () => {
|
||||
if (!nonce) {
|
||||
console.error('❌ No nonce available for backend sign-in');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setSignersLoading(true);
|
||||
const result = await sdk.actions.signIn({ nonce });
|
||||
|
||||
const signInData = {
|
||||
message: result.message,
|
||||
signature: result.signature,
|
||||
redirect: false,
|
||||
nonce: nonce,
|
||||
};
|
||||
|
||||
const nextAuthResult = await backendSignIn('neynar', signInData);
|
||||
if (nextAuthResult?.ok) {
|
||||
setMessage(result.message);
|
||||
setSignature(result.signature);
|
||||
} else {
|
||||
console.error('❌ NextAuth sign-in failed:', nextAuthResult);
|
||||
}
|
||||
} catch (e) {
|
||||
if (e instanceof SignInCore.RejectedByUser) {
|
||||
console.error('ℹ️ Sign-in rejected by user');
|
||||
} else {
|
||||
console.error('❌ Backend sign-in error:', e);
|
||||
}
|
||||
}
|
||||
}, [nonce]);
|
||||
|
||||
const handleFrontEndSignIn = useCallback(() => {
|
||||
if (isError) {
|
||||
reconnect();
|
||||
}
|
||||
setDialogStep('signin');
|
||||
setShowDialog(true);
|
||||
frontendSignIn();
|
||||
}, [isError, reconnect, frontendSignIn]);
|
||||
|
||||
const handleSignOut = useCallback(async () => {
|
||||
try {
|
||||
setSignersLoading(true);
|
||||
|
||||
if (useBackendFlow) {
|
||||
// Only sign out from NextAuth if the current session is from Neynar provider
|
||||
if (session?.provider === 'neynar') {
|
||||
await backendSignOut({ redirect: false });
|
||||
}
|
||||
} else {
|
||||
// Frontend flow sign out
|
||||
frontendSignOut();
|
||||
removeItem(STORAGE_KEY);
|
||||
setStoredAuth(null);
|
||||
}
|
||||
|
||||
// Common cleanup for both flows
|
||||
setShowDialog(false);
|
||||
setDialogStep('signin');
|
||||
setSignerApprovalUrl(null);
|
||||
setMessage(null);
|
||||
setSignature(null);
|
||||
|
||||
// Reset polling interval
|
||||
if (pollingInterval) {
|
||||
clearInterval(pollingInterval);
|
||||
setPollingInterval(null);
|
||||
}
|
||||
|
||||
// Reset signer flow flag
|
||||
signerFlowStartedRef.current = false;
|
||||
} catch (error) {
|
||||
console.error('❌ Error during sign out:', error);
|
||||
// Optionally handle error state
|
||||
} finally {
|
||||
setSignersLoading(false);
|
||||
}
|
||||
}, [useBackendFlow, frontendSignOut, pollingInterval, session]);
|
||||
|
||||
const authenticated = useBackendFlow
|
||||
? !!(
|
||||
session?.provider === 'neynar' &&
|
||||
session?.user?.fid &&
|
||||
session?.signers &&
|
||||
session.signers.length > 0
|
||||
)
|
||||
: ((isSuccess && validSignature) || storedAuth?.isAuthenticated) &&
|
||||
? !!quickAuthUser?.fid
|
||||
: storedAuth?.isAuthenticated &&
|
||||
!!(storedAuth?.signers && storedAuth.signers.length > 0);
|
||||
|
||||
const userData = useBackendFlow
|
||||
? {
|
||||
fid: session?.user?.fid,
|
||||
username: session?.user?.username || '',
|
||||
pfpUrl: session?.user?.pfp_url || '',
|
||||
fid: quickAuthUser?.fid,
|
||||
username: backendUserProfile.username ?? '',
|
||||
pfpUrl: backendUserProfile.pfpUrl ?? '',
|
||||
}
|
||||
: {
|
||||
fid: storedAuth?.user?.fid,
|
||||
@ -663,18 +597,17 @@ export function NeynarAuthButton() {
|
||||
) : (
|
||||
<Button
|
||||
onClick={useBackendFlow ? handleBackendSignIn : handleFrontEndSignIn}
|
||||
disabled={!useBackendFlow && !url}
|
||||
disabled={signersLoading}
|
||||
className={cn(
|
||||
'btn btn-primary flex items-center gap-3',
|
||||
'disabled:opacity-50 disabled:cursor-not-allowed',
|
||||
'transform transition-all duration-200 active:scale-[0.98]',
|
||||
!url && !useBackendFlow && 'cursor-not-allowed',
|
||||
)}
|
||||
>
|
||||
{!useBackendFlow && !url ? (
|
||||
{signersLoading ? (
|
||||
<>
|
||||
<div className="spinner-primary w-5 h-5" />
|
||||
<span>Initializing...</span>
|
||||
<span>Loading...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
@ -697,9 +630,9 @@ export function NeynarAuthButton() {
|
||||
setPollingInterval(null);
|
||||
}
|
||||
}}
|
||||
url={url}
|
||||
isError={isError}
|
||||
error={error}
|
||||
url={undefined}
|
||||
isError={false}
|
||||
error={null}
|
||||
step={dialogStep}
|
||||
isLoading={signersLoading}
|
||||
signerApprovalUrl={signerApprovalUrl}
|
||||
|
||||
@ -2,21 +2,19 @@
|
||||
|
||||
import { useCallback, useState } from 'react';
|
||||
import sdk, { SignIn as SignInCore } from '@farcaster/miniapp-sdk';
|
||||
import { signIn, signOut, getCsrfToken } from 'next-auth/react';
|
||||
import { useSession } from 'next-auth/react';
|
||||
import { Button } from '../Button';
|
||||
import { useQuickAuth } from '~/hooks/useQuickAuth';
|
||||
|
||||
/**
|
||||
* SignIn component handles Farcaster authentication using Sign-In with Farcaster (SIWF).
|
||||
* SignIn component handles Farcaster authentication using QuickAuth.
|
||||
*
|
||||
* This component provides a complete authentication flow for Farcaster users:
|
||||
* - Generates nonces for secure authentication
|
||||
* - Handles the SIWF flow using the Farcaster SDK
|
||||
* - Manages NextAuth session state
|
||||
* - Uses the built-in QuickAuth functionality from the Farcaster SDK
|
||||
* - Manages authentication state in memory (no persistence)
|
||||
* - Provides sign-out functionality
|
||||
* - Displays authentication status and results
|
||||
*
|
||||
* The component integrates with both the Farcaster Frame SDK and NextAuth
|
||||
* The component integrates with the Farcaster Frame SDK and QuickAuth
|
||||
* to provide seamless authentication within mini apps.
|
||||
*
|
||||
* @example
|
||||
@ -36,37 +34,19 @@ export function SignIn() {
|
||||
signingIn: false,
|
||||
signingOut: false,
|
||||
});
|
||||
const [signInResult, setSignInResult] = useState<SignInCore.SignInResult>();
|
||||
const [signInFailure, setSignInFailure] = useState<string>();
|
||||
|
||||
// --- Hooks ---
|
||||
const { data: session, status } = useSession();
|
||||
const { authenticatedUser, status, signIn, signOut } = useQuickAuth();
|
||||
|
||||
// --- Handlers ---
|
||||
/**
|
||||
* Generates a nonce for the sign-in process.
|
||||
* Handles the sign-in process using QuickAuth.
|
||||
*
|
||||
* This function retrieves a CSRF token from NextAuth to use as a nonce
|
||||
* for the SIWF authentication flow. The nonce ensures the authentication
|
||||
* request is fresh and prevents replay attacks.
|
||||
*
|
||||
* @returns Promise<string> - The generated nonce token
|
||||
* @throws Error if unable to generate nonce
|
||||
*/
|
||||
const getNonce = useCallback(async () => {
|
||||
const nonce = await getCsrfToken();
|
||||
if (!nonce) throw new Error('Unable to generate nonce');
|
||||
return nonce;
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* Handles the sign-in process using Farcaster SDK.
|
||||
*
|
||||
* This function orchestrates the complete SIWF flow:
|
||||
* 1. Generates a nonce for security
|
||||
* 2. Calls the Farcaster SDK to initiate sign-in
|
||||
* 3. Submits the result to NextAuth for session management
|
||||
* 4. Handles various error conditions including user rejection
|
||||
* This function uses the built-in QuickAuth functionality:
|
||||
* 1. Gets a token from QuickAuth (handles SIWF flow automatically)
|
||||
* 2. Validates the token with our server
|
||||
* 3. Updates the session state
|
||||
*
|
||||
* @returns Promise<void>
|
||||
*/
|
||||
@ -74,14 +54,12 @@ export function SignIn() {
|
||||
try {
|
||||
setAuthState(prev => ({ ...prev, signingIn: true }));
|
||||
setSignInFailure(undefined);
|
||||
const nonce = await getNonce();
|
||||
const result = await sdk.actions.signIn({ nonce });
|
||||
setSignInResult(result);
|
||||
await signIn('farcaster', {
|
||||
message: result.message,
|
||||
signature: result.signature,
|
||||
redirect: false,
|
||||
});
|
||||
|
||||
const success = await signIn();
|
||||
|
||||
if (!success) {
|
||||
setSignInFailure('Authentication failed');
|
||||
}
|
||||
} catch (e) {
|
||||
if (e instanceof SignInCore.RejectedByUser) {
|
||||
setSignInFailure('Rejected by user');
|
||||
@ -91,52 +69,47 @@ export function SignIn() {
|
||||
} finally {
|
||||
setAuthState(prev => ({ ...prev, signingIn: false }));
|
||||
}
|
||||
}, [getNonce]);
|
||||
}, [signIn]);
|
||||
|
||||
/**
|
||||
* Handles the sign-out process.
|
||||
*
|
||||
* This function clears the NextAuth session only if the current session
|
||||
* is using the Farcaster provider, and resets the local sign-in result state.
|
||||
* This function clears the QuickAuth session and resets the local state.
|
||||
*
|
||||
* @returns Promise<void>
|
||||
*/
|
||||
const handleSignOut = useCallback(async () => {
|
||||
try {
|
||||
setAuthState(prev => ({ ...prev, signingOut: true }));
|
||||
// Only sign out if the current session is from Farcaster provider
|
||||
if (session?.provider === 'farcaster') {
|
||||
await signOut({ redirect: false });
|
||||
}
|
||||
setSignInResult(undefined);
|
||||
await signOut();
|
||||
} finally {
|
||||
setAuthState(prev => ({ ...prev, signingOut: false }));
|
||||
}
|
||||
}, [session]);
|
||||
}, [signOut]);
|
||||
|
||||
// --- Render ---
|
||||
return (
|
||||
<>
|
||||
{/* Authentication Buttons */}
|
||||
{(status !== 'authenticated' || session?.provider !== 'farcaster') && (
|
||||
{status !== 'authenticated' && (
|
||||
<Button onClick={handleSignIn} disabled={authState.signingIn}>
|
||||
Sign In with Farcaster
|
||||
</Button>
|
||||
)}
|
||||
{status === 'authenticated' && session?.provider === 'farcaster' && (
|
||||
{status === 'authenticated' && (
|
||||
<Button onClick={handleSignOut} disabled={authState.signingOut}>
|
||||
Sign out
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* Session Information */}
|
||||
{session && (
|
||||
{authenticatedUser && (
|
||||
<div className="my-2 p-2 text-xs overflow-x-scroll bg-gray-100 dark:bg-gray-900 rounded-lg font-mono">
|
||||
<div className="font-semibold text-gray-500 dark:text-gray-300 mb-1">
|
||||
Session
|
||||
Authenticated User
|
||||
</div>
|
||||
<div className="whitespace-pre text-gray-700 dark:text-gray-200">
|
||||
{JSON.stringify(session, null, 2)}
|
||||
{JSON.stringify(authenticatedUser, null, 2)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@ -145,25 +118,13 @@ export function SignIn() {
|
||||
{signInFailure && !authState.signingIn && (
|
||||
<div className="my-2 p-2 text-xs overflow-x-scroll bg-gray-100 dark:bg-gray-900 rounded-lg font-mono">
|
||||
<div className="font-semibold text-gray-500 dark:text-gray-300 mb-1">
|
||||
SIWF Result
|
||||
Authentication Error
|
||||
</div>
|
||||
<div className="whitespace-pre text-gray-700 dark:text-gray-200">
|
||||
{signInFailure}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Success Result Display */}
|
||||
{signInResult && !authState.signingIn && (
|
||||
<div className="my-2 p-2 text-xs overflow-x-scroll bg-gray-100 dark:bg-gray-900 rounded-lg font-mono">
|
||||
<div className="font-semibold text-gray-500 dark:text-gray-300 mb-1">
|
||||
SIWF Result
|
||||
</div>
|
||||
<div className="whitespace-pre text-gray-700 dark:text-gray-200">
|
||||
{JSON.stringify(signInResult, null, 2)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
204
src/hooks/useQuickAuth.ts
Normal file
204
src/hooks/useQuickAuth.ts
Normal file
@ -0,0 +1,204 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { sdk } from '@farcaster/miniapp-sdk';
|
||||
|
||||
/**
|
||||
* Represents the current authenticated user state
|
||||
*/
|
||||
interface AuthenticatedUser {
|
||||
/** The user's Farcaster ID (FID) */
|
||||
fid: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Possible authentication states for QuickAuth
|
||||
*/
|
||||
type QuickAuthStatus = 'loading' | 'authenticated' | 'unauthenticated';
|
||||
|
||||
/**
|
||||
* Return type for the useQuickAuth hook
|
||||
*/
|
||||
interface UseQuickAuthReturn {
|
||||
/** Current authenticated user data, or null if not authenticated */
|
||||
authenticatedUser: AuthenticatedUser | null;
|
||||
/** Current authentication status */
|
||||
status: QuickAuthStatus;
|
||||
/** Function to initiate the sign-in process using QuickAuth */
|
||||
signIn: () => Promise<boolean>;
|
||||
/** Function to sign out and clear the current authentication state */
|
||||
signOut: () => Promise<void>;
|
||||
/** Function to retrieve the current authentication token */
|
||||
getToken: () => Promise<string | null>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom hook for managing QuickAuth authentication state
|
||||
*
|
||||
* This hook provides a complete authentication flow using Farcaster's QuickAuth:
|
||||
* - Automatically checks for existing authentication on mount
|
||||
* - Validates tokens with the server-side API
|
||||
* - Manages authentication state in memory (no persistence)
|
||||
* - Provides sign-in/sign-out functionality
|
||||
*
|
||||
* QuickAuth tokens are managed in memory only, so signing out of the Farcaster
|
||||
* client will automatically sign the user out of this mini app as well.
|
||||
*
|
||||
* @returns {UseQuickAuthReturn} Object containing user state and authentication methods
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* const { authenticatedUser, status, signIn, signOut } = useQuickAuth();
|
||||
*
|
||||
* if (status === 'loading') return <div>Loading...</div>;
|
||||
* if (status === 'unauthenticated') return <button onClick={signIn}>Sign In</button>;
|
||||
*
|
||||
* return (
|
||||
* <div>
|
||||
* <p>Welcome, FID: {authenticatedUser?.fid}</p>
|
||||
* <button onClick={signOut}>Sign Out</button>
|
||||
* </div>
|
||||
* );
|
||||
* ```
|
||||
*/
|
||||
export function useQuickAuth(): UseQuickAuthReturn {
|
||||
// Current authenticated user data
|
||||
const [authenticatedUser, setAuthenticatedUser] = useState<AuthenticatedUser | null>(null);
|
||||
// Current authentication status
|
||||
const [status, setStatus] = useState<QuickAuthStatus>('loading');
|
||||
|
||||
/**
|
||||
* Validates a QuickAuth token with the server-side API
|
||||
*
|
||||
* @param {string} authToken - The JWT token to validate
|
||||
* @returns {Promise<AuthenticatedUser | null>} User data if valid, null otherwise
|
||||
*/
|
||||
const validateTokenWithServer = async (authToken: string): Promise<AuthenticatedUser | null> => {
|
||||
try {
|
||||
const validationResponse = await fetch('/api/auth/validate', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ token: authToken }),
|
||||
});
|
||||
|
||||
if (validationResponse.ok) {
|
||||
const responseData = await validationResponse.json();
|
||||
return responseData.user;
|
||||
}
|
||||
|
||||
return null;
|
||||
} catch (error) {
|
||||
console.error('Token validation failed:', error);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks for existing authentication token and validates it on component mount
|
||||
* This runs automatically when the hook is first used
|
||||
*/
|
||||
useEffect(() => {
|
||||
const checkExistingAuthentication = async () => {
|
||||
try {
|
||||
// Attempt to retrieve existing token from QuickAuth SDK
|
||||
const { token } = await sdk.quickAuth.getToken();
|
||||
|
||||
if (token) {
|
||||
// Validate the token with our server-side API
|
||||
const validatedUserSession = await validateTokenWithServer(token);
|
||||
|
||||
if (validatedUserSession) {
|
||||
// Token is valid, set authenticated state
|
||||
setAuthenticatedUser(validatedUserSession);
|
||||
setStatus('authenticated');
|
||||
} else {
|
||||
// Token is invalid or expired, clear authentication state
|
||||
setStatus('unauthenticated');
|
||||
}
|
||||
} else {
|
||||
// No existing token found, user is not authenticated
|
||||
setStatus('unauthenticated');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error checking existing authentication:', error);
|
||||
setStatus('unauthenticated');
|
||||
}
|
||||
};
|
||||
|
||||
checkExistingAuthentication();
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* Initiates the QuickAuth sign-in process
|
||||
*
|
||||
* Uses sdk.quickAuth.getToken() to get a QuickAuth session token.
|
||||
* If there is already a session token in memory that hasn't expired,
|
||||
* it will be immediately returned, otherwise a fresh one will be acquired.
|
||||
*
|
||||
* @returns {Promise<boolean>} True if sign-in was successful, false otherwise
|
||||
*/
|
||||
const signIn = useCallback(async (): Promise<boolean> => {
|
||||
try {
|
||||
setStatus('loading');
|
||||
|
||||
// Get QuickAuth session token
|
||||
const { token } = await sdk.quickAuth.getToken();
|
||||
|
||||
if (token) {
|
||||
// Validate the token with our server-side API
|
||||
const validatedUserSession = await validateTokenWithServer(token);
|
||||
|
||||
if (validatedUserSession) {
|
||||
// Authentication successful, update user state
|
||||
setAuthenticatedUser(validatedUserSession);
|
||||
setStatus('authenticated');
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// Authentication failed, clear user state
|
||||
setStatus('unauthenticated');
|
||||
return false;
|
||||
} catch (error) {
|
||||
console.error('Sign-in process failed:', error);
|
||||
setStatus('unauthenticated');
|
||||
return false;
|
||||
}
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* Signs out the current user and clears the authentication state
|
||||
*
|
||||
* Since QuickAuth tokens are managed in memory only, this simply clears
|
||||
* the local user state. The actual token will be cleared when the
|
||||
* user signs out of their Farcaster client.
|
||||
*/
|
||||
const signOut = useCallback(async (): Promise<void> => {
|
||||
// Clear local user state
|
||||
setAuthenticatedUser(null);
|
||||
setStatus('unauthenticated');
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* Retrieves the current authentication token from QuickAuth
|
||||
*
|
||||
* @returns {Promise<string | null>} The current auth token, or null if not authenticated
|
||||
*/
|
||||
const getToken = useCallback(async (): Promise<string | null> => {
|
||||
try {
|
||||
const { token } = await sdk.quickAuth.getToken();
|
||||
return token;
|
||||
} catch (error) {
|
||||
console.error('Failed to retrieve authentication token:', error);
|
||||
return null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
return {
|
||||
authenticatedUser,
|
||||
status,
|
||||
signIn,
|
||||
signOut,
|
||||
getToken,
|
||||
};
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user