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:
commit
b366d97b53
21
bin/init.js
21
bin/init.js
@ -1,12 +1,12 @@
|
|||||||
#!/usr/bin/env node
|
#!/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 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 __filename = fileURLToPath(import.meta.url);
|
||||||
const __dirname = dirname(__filename);
|
const __dirname = dirname(__filename);
|
||||||
@ -47,7 +47,7 @@ async function queryNeynarApp(apiKey) {
|
|||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
const response = await fetch(
|
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: {
|
headers: {
|
||||||
'x-api-key': apiKey,
|
'x-api-key': apiKey,
|
||||||
@ -444,7 +444,7 @@ export async function init(
|
|||||||
// Update package.json
|
// Update package.json
|
||||||
console.log('\nUpdating package.json...');
|
console.log('\nUpdating package.json...');
|
||||||
const packageJsonPath = path.join(projectPath, '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.name = finalProjectName;
|
||||||
packageJson.version = '0.1.0';
|
packageJson.version = '0.1.0';
|
||||||
@ -465,6 +465,7 @@ export async function init(
|
|||||||
'@farcaster/miniapp-sdk': '>=0.1.6 <1.0.0',
|
'@farcaster/miniapp-sdk': '>=0.1.6 <1.0.0',
|
||||||
'@farcaster/miniapp-wagmi-connector': '^1.0.0',
|
'@farcaster/miniapp-wagmi-connector': '^1.0.0',
|
||||||
'@farcaster/mini-app-solana': '>=0.0.17 <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',
|
'@neynar/react': '^1.2.5',
|
||||||
'@radix-ui/react-label': '^2.1.1',
|
'@radix-ui/react-label': '^2.1.1',
|
||||||
'@solana/wallet-adapter-react': '^0.15.38',
|
'@solana/wallet-adapter-react': '^0.15.38',
|
||||||
@ -476,7 +477,6 @@ export async function init(
|
|||||||
'lucide-react': '^0.469.0',
|
'lucide-react': '^0.469.0',
|
||||||
mipd: '^0.0.7',
|
mipd: '^0.0.7',
|
||||||
next: '^15',
|
next: '^15',
|
||||||
'next-auth': '^4.24.11',
|
|
||||||
react: '^19',
|
react: '^19',
|
||||||
'react-dom': '^19',
|
'react-dom': '^19',
|
||||||
'tailwind-merge': '^2.6.0',
|
'tailwind-merge': '^2.6.0',
|
||||||
@ -488,6 +488,7 @@ export async function init(
|
|||||||
};
|
};
|
||||||
|
|
||||||
packageJson.devDependencies = {
|
packageJson.devDependencies = {
|
||||||
|
'@types/inquirer': '^9.0.8',
|
||||||
'@types/node': '^20',
|
'@types/node': '^20',
|
||||||
'@types/react': '^19',
|
'@types/react': '^19',
|
||||||
'@types/react-dom': '^19',
|
'@types/react-dom': '^19',
|
||||||
@ -499,8 +500,8 @@ export async function init(
|
|||||||
'pino-pretty': '^13.0.0',
|
'pino-pretty': '^13.0.0',
|
||||||
postcss: '^8',
|
postcss: '^8',
|
||||||
tailwindcss: '^3.4.1',
|
tailwindcss: '^3.4.1',
|
||||||
typescript: '^5',
|
|
||||||
'ts-node': '^10.9.2',
|
'ts-node': '^10.9.2',
|
||||||
|
typescript: '^5',
|
||||||
};
|
};
|
||||||
|
|
||||||
// Add Neynar SDK if selected
|
// Add Neynar SDK if selected
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@neynar/create-farcaster-mini-app",
|
"name": "@neynar/create-farcaster-mini-app",
|
||||||
"version": "1.6.3",
|
"version": "1.7.2",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"private": false,
|
"private": false,
|
||||||
"access": "public",
|
"access": "public",
|
||||||
|
|||||||
@ -5,7 +5,6 @@ import os from 'os';
|
|||||||
import { fileURLToPath } from 'url';
|
import { fileURLToPath } from 'url';
|
||||||
import inquirer from 'inquirer';
|
import inquirer from 'inquirer';
|
||||||
import dotenv from 'dotenv';
|
import dotenv from 'dotenv';
|
||||||
import crypto from 'crypto';
|
|
||||||
import { Vercel } from '@vercel/sdk';
|
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';
|
||||||
|
|
||||||
@ -132,7 +131,7 @@ async function checkRequiredEnvVars(): Promise<void> {
|
|||||||
|
|
||||||
process.env.SPONSOR_SIGNER = sponsorSigner.toString();
|
process.env.SPONSOR_SIGNER = sponsorSigner.toString();
|
||||||
|
|
||||||
if (storeSeedPhrase) {
|
if (process.env.SEED_PHRASE) {
|
||||||
fs.appendFileSync(
|
fs.appendFileSync(
|
||||||
'.env.local',
|
'.env.local',
|
||||||
`\nSPONSOR_SIGNER="${sponsorSigner}"`,
|
`\nSPONSOR_SIGNER="${sponsorSigner}"`,
|
||||||
@ -299,17 +298,26 @@ async function setVercelEnvVarSDK(
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Get existing environment variables
|
// Get existing environment variables
|
||||||
const existingVars = await vercelClient.projects.getEnvironmentVariables({
|
const existingVars = await vercelClient.projects.filterProjectEnvs({
|
||||||
idOrName: projectId,
|
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'),
|
(env: any) => env.key === key && env.target?.includes('production'),
|
||||||
);
|
);
|
||||||
|
|
||||||
if (existingVar) {
|
if (existingVar && existingVar.id) {
|
||||||
// Update existing variable
|
// Update existing variable
|
||||||
await vercelClient.projects.editEnvironmentVariable({
|
await vercelClient.projects.editProjectEnv({
|
||||||
idOrName: projectId,
|
idOrName: projectId,
|
||||||
id: existingVar.id,
|
id: existingVar.id,
|
||||||
requestBody: {
|
requestBody: {
|
||||||
@ -320,7 +328,7 @@ async function setVercelEnvVarSDK(
|
|||||||
console.log(`✅ Updated environment variable: ${key}`);
|
console.log(`✅ Updated environment variable: ${key}`);
|
||||||
} else {
|
} else {
|
||||||
// Create new variable
|
// Create new variable
|
||||||
await vercelClient.projects.createEnvironmentVariable({
|
await vercelClient.projects.createProjectEnv({
|
||||||
idOrName: projectId,
|
idOrName: projectId,
|
||||||
requestBody: {
|
requestBody: {
|
||||||
key: key,
|
key: key,
|
||||||
@ -458,7 +466,7 @@ async function waitForDeployment(
|
|||||||
|
|
||||||
while (Date.now() - startTime < maxWaitTime) {
|
while (Date.now() - startTime < maxWaitTime) {
|
||||||
try {
|
try {
|
||||||
const deployments = await vercelClient?.deployments.list({
|
const deployments = await vercelClient?.deployments.getDeployments({
|
||||||
projectId: projectId,
|
projectId: projectId,
|
||||||
limit: 1,
|
limit: 1,
|
||||||
});
|
});
|
||||||
@ -594,12 +602,17 @@ async function deployToVercel(useGitHub = false): Promise<void> {
|
|||||||
|
|
||||||
if (vercelClient) {
|
if (vercelClient) {
|
||||||
try {
|
try {
|
||||||
const project = await vercelClient.projects.get({
|
const projects = await vercelClient.projects.getProjects({});
|
||||||
idOrName: projectId,
|
const project = projects.projects.find(
|
||||||
});
|
p => p.id === projectId || p.name === projectId,
|
||||||
projectName = project.name;
|
);
|
||||||
domain = `${projectName}.vercel.app`;
|
if (project) {
|
||||||
console.log('🌐 Using project name for domain:', domain);
|
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) {
|
} catch (error: unknown) {
|
||||||
if (error instanceof Error) {
|
if (error instanceof Error) {
|
||||||
console.warn(
|
console.warn(
|
||||||
@ -653,12 +666,7 @@ async function deployToVercel(useGitHub = false): Promise<void> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Prepare environment variables
|
// Prepare environment variables
|
||||||
const nextAuthSecret =
|
|
||||||
process.env.NEXTAUTH_SECRET || crypto.randomBytes(32).toString('hex');
|
|
||||||
const vercelEnv = {
|
const vercelEnv = {
|
||||||
NEXTAUTH_SECRET: nextAuthSecret,
|
|
||||||
AUTH_SECRET: nextAuthSecret,
|
|
||||||
NEXTAUTH_URL: `https://${domain}`,
|
|
||||||
NEXT_PUBLIC_URL: `https://${domain}`,
|
NEXT_PUBLIC_URL: `https://${domain}`,
|
||||||
|
|
||||||
...(process.env.NEYNAR_API_KEY && {
|
...(process.env.NEYNAR_API_KEY && {
|
||||||
@ -763,7 +771,6 @@ async function deployToVercel(useGitHub = false): Promise<void> {
|
|||||||
console.log('🔄 Updating environment variables with correct domain...');
|
console.log('🔄 Updating environment variables with correct domain...');
|
||||||
|
|
||||||
const updatedEnv: Record<string, string | object> = {
|
const updatedEnv: Record<string, string | object> = {
|
||||||
NEXTAUTH_URL: `https://${actualDomain}`,
|
|
||||||
NEXT_PUBLIC_URL: `https://${actualDomain}`,
|
NEXT_PUBLIC_URL: `https://${actualDomain}`,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -1,9 +1,9 @@
|
|||||||
|
import localtunnel from 'localtunnel';
|
||||||
import { spawn } from 'child_process';
|
import { spawn } from 'child_process';
|
||||||
import { createServer } from 'net';
|
import { createServer } from 'net';
|
||||||
|
import dotenv from 'dotenv';
|
||||||
import path from 'path';
|
import path from 'path';
|
||||||
import { fileURLToPath } from 'url';
|
import { fileURLToPath } from 'url';
|
||||||
import dotenv from 'dotenv';
|
|
||||||
import localtunnel from 'localtunnel';
|
|
||||||
|
|
||||||
// Load environment variables
|
// Load environment variables
|
||||||
dotenv.config({ path: '.env.local' });
|
dotenv.config({ path: '.env.local' });
|
||||||
@ -96,7 +96,7 @@ async function startDev() {
|
|||||||
? `1. Run: netstat -ano | findstr :${port}\n` +
|
? `1. Run: netstat -ano | findstr :${port}\n` +
|
||||||
'2. Note the PID (Process ID) from the output\n' +
|
'2. Note the PID (Process ID) from the output\n' +
|
||||||
'3. Run: taskkill /PID <PID> /F\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.',
|
'\nThen try running this command again.',
|
||||||
);
|
);
|
||||||
process.exit(1);
|
process.exit(1);
|
||||||
@ -158,11 +158,7 @@ async function startDev() {
|
|||||||
|
|
||||||
nextDev = spawn(nextBin, ['dev', '-p', port.toString()], {
|
nextDev = spawn(nextBin, ['dev', '-p', port.toString()], {
|
||||||
stdio: 'inherit',
|
stdio: 'inherit',
|
||||||
env: {
|
env: { ...process.env, NEXT_PUBLIC_URL: miniAppUrl },
|
||||||
...process.env,
|
|
||||||
NEXT_PUBLIC_URL: miniAppUrl,
|
|
||||||
NEXTAUTH_URL: miniAppUrl,
|
|
||||||
},
|
|
||||||
cwd: projectRoot,
|
cwd: projectRoot,
|
||||||
shell: process.platform === 'win32', // Add shell option for Windows
|
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 type { Metadata } from 'next';
|
||||||
|
|
||||||
import '~/app/globals.css';
|
import '~/app/globals.css';
|
||||||
import { Providers } from '~/app/providers';
|
import { Providers } from '~/app/providers';
|
||||||
import { getSession } from '~/auth';
|
|
||||||
import { APP_NAME, APP_DESCRIPTION } from '~/lib/constants';
|
import { APP_NAME, APP_DESCRIPTION } from '~/lib/constants';
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
@ -14,12 +14,10 @@ export default async function RootLayout({
|
|||||||
}: Readonly<{
|
}: Readonly<{
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}>) {
|
}>) {
|
||||||
const session = await getSession();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<body>
|
<body>
|
||||||
<Providers session={session}>{children}</Providers>
|
<Providers>{children}</Providers>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,10 +1,7 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import dynamic from 'next/dynamic';
|
import dynamic from 'next/dynamic';
|
||||||
import { AuthKitProvider } from '@farcaster/auth-kit';
|
|
||||||
import { MiniAppProvider } from '@neynar/react';
|
import { MiniAppProvider } from '@neynar/react';
|
||||||
import type { Session } from 'next-auth';
|
|
||||||
import { SessionProvider } from 'next-auth/react';
|
|
||||||
import { SafeFarcasterSolanaProvider } from '~/components/providers/SafeFarcasterSolanaProvider';
|
import { SafeFarcasterSolanaProvider } from '~/components/providers/SafeFarcasterSolanaProvider';
|
||||||
import { ANALYTICS_ENABLED } from '~/lib/constants';
|
import { ANALYTICS_ENABLED } from '~/lib/constants';
|
||||||
|
|
||||||
@ -15,27 +12,19 @@ const WagmiProvider = dynamic(
|
|||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
export function Providers({
|
export function Providers({ children }: { children: React.ReactNode }) {
|
||||||
session,
|
|
||||||
children,
|
|
||||||
}: {
|
|
||||||
session: Session | null;
|
|
||||||
children: React.ReactNode;
|
|
||||||
}) {
|
|
||||||
const solanaEndpoint =
|
const solanaEndpoint =
|
||||||
process.env.SOLANA_RPC_ENDPOINT || 'https://solana-rpc.publicnode.com';
|
process.env.SOLANA_RPC_ENDPOINT || 'https://solana-rpc.publicnode.com';
|
||||||
return (
|
return (
|
||||||
<SessionProvider session={session}>
|
<WagmiProvider>
|
||||||
<WagmiProvider>
|
<MiniAppProvider
|
||||||
<MiniAppProvider
|
analyticsEnabled={ANALYTICS_ENABLED}
|
||||||
analyticsEnabled={ANALYTICS_ENABLED}
|
backButtonEnabled={true}
|
||||||
backButtonEnabled={true}
|
>
|
||||||
>
|
<SafeFarcasterSolanaProvider endpoint={solanaEndpoint}>
|
||||||
<SafeFarcasterSolanaProvider endpoint={solanaEndpoint}>
|
{children}
|
||||||
<AuthKitProvider config={{}}>{children}</AuthKitProvider>
|
</SafeFarcasterSolanaProvider>
|
||||||
</SafeFarcasterSolanaProvider>
|
</MiniAppProvider>
|
||||||
</MiniAppProvider>
|
</WagmiProvider>
|
||||||
</WagmiProvider>
|
|
||||||
</SessionProvider>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
441
src/auth.ts
441
src/auth.ts
@ -1,439 +1,10 @@
|
|||||||
import { createAppClient, viemConnector } from '@farcaster/auth-client';
|
import { sdk } from '@farcaster/miniapp-sdk';
|
||||||
import { AuthOptions, getServerSession } from 'next-auth';
|
|
||||||
import CredentialsProvider from 'next-auth/providers/credentials';
|
|
||||||
|
|
||||||
declare module 'next-auth' {
|
// Export QuickAuth from the SDK
|
||||||
interface Session {
|
export const quickAuth = sdk.quickAuth;
|
||||||
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,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
|
// Helper function to get session (for server-side compatibility)
|
||||||
export const getSession = async () => {
|
export const getSession = async () => {
|
||||||
try {
|
// For QuickAuth, sessions are managed by the SDK
|
||||||
return await getServerSession(authOptions);
|
return null;
|
||||||
} catch (error) {
|
|
||||||
console.error('Error getting server session:', error);
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|||||||
@ -16,8 +16,8 @@ export function ProfileButton({
|
|||||||
|
|
||||||
useDetectClickOutside(ref, () => setShowDropdown(false));
|
useDetectClickOutside(ref, () => setShowDropdown(false));
|
||||||
|
|
||||||
const name = userData?.username ?? `!${userData?.fid}`;
|
const name = userData?.username && userData.username.trim() !== '' ? userData.username : `!${userData?.fid}`;
|
||||||
const pfpUrl = userData?.pfpUrl ?? 'https://farcaster.xyz/avatar.png';
|
const pfpUrl = userData?.pfpUrl && userData.pfpUrl.trim() !== '' ? userData.pfpUrl : 'https://farcaster.xyz/avatar.png';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative" ref={ref}>
|
<div className="relative" ref={ref}>
|
||||||
|
|||||||
@ -1,20 +1,13 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import '@farcaster/auth-kit/styles.css';
|
|
||||||
import { useCallback, useEffect, useState, useRef } from 'react';
|
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 { 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 = {
|
type User = {
|
||||||
fid: number;
|
fid: number;
|
||||||
@ -24,7 +17,6 @@ type User = {
|
|||||||
// Add other user properties as needed
|
// Add other user properties as needed
|
||||||
};
|
};
|
||||||
|
|
||||||
const STORAGE_KEY = 'neynar_authenticated_user';
|
|
||||||
const FARCASTER_FID = 9152;
|
const FARCASTER_FID = 9152;
|
||||||
|
|
||||||
interface StoredAuthState {
|
interface StoredAuthState {
|
||||||
@ -98,7 +90,12 @@ export function NeynarAuthButton() {
|
|||||||
const [storedAuth, setStoredAuth] = useState<StoredAuthState | null>(null);
|
const [storedAuth, setStoredAuth] = useState<StoredAuthState | null>(null);
|
||||||
const [signersLoading, setSignersLoading] = useState(false);
|
const [signersLoading, setSignersLoading] = useState(false);
|
||||||
const { context } = useMiniApp();
|
const { context } = useMiniApp();
|
||||||
const { data: session } = useSession();
|
const {
|
||||||
|
authenticatedUser: quickAuthUser,
|
||||||
|
signIn: quickAuthSignIn,
|
||||||
|
signOut: quickAuthSignOut,
|
||||||
|
} = useQuickAuth();
|
||||||
|
|
||||||
// New state for unified dialog flow
|
// New state for unified dialog flow
|
||||||
const [showDialog, setShowDialog] = useState(false);
|
const [showDialog, setShowDialog] = useState(false);
|
||||||
const [dialogStep, setDialogStep] = useState<'signin' | 'access' | 'loading'>(
|
const [dialogStep, setDialogStep] = useState<'signin' | 'access' | 'loading'>(
|
||||||
@ -114,6 +111,10 @@ export function NeynarAuthButton() {
|
|||||||
const [signature, setSignature] = useState<string | null>(null);
|
const [signature, setSignature] = useState<string | null>(null);
|
||||||
const [isSignerFlowRunning, setIsSignerFlowRunning] = useState(false);
|
const [isSignerFlowRunning, setIsSignerFlowRunning] = useState(false);
|
||||||
const signerFlowStartedRef = useRef(false);
|
const signerFlowStartedRef = useRef(false);
|
||||||
|
const [backendUserProfile, setBackendUserProfile] = useState<{
|
||||||
|
username?: string;
|
||||||
|
pfpUrl?: string;
|
||||||
|
}>({});
|
||||||
|
|
||||||
// Determine which flow to use based on context
|
// Determine which flow to use based on context
|
||||||
const useBackendFlow = context !== undefined;
|
const useBackendFlow = context !== undefined;
|
||||||
@ -146,25 +147,15 @@ export function NeynarAuthButton() {
|
|||||||
if (!useBackendFlow) return;
|
if (!useBackendFlow) return;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// For backend flow, we need to sign in again with the additional data
|
// For backend flow, use QuickAuth to sign in
|
||||||
if (message && signature) {
|
if (signers && signers.length > 0) {
|
||||||
const signInData = {
|
await quickAuthSignIn();
|
||||||
message,
|
|
||||||
signature,
|
|
||||||
redirect: false,
|
|
||||||
nonce: nonce || '',
|
|
||||||
fid: user?.fid?.toString() || '',
|
|
||||||
signers: JSON.stringify(signers),
|
|
||||||
user: JSON.stringify(user),
|
|
||||||
};
|
|
||||||
|
|
||||||
await backendSignIn('neynar', signInData);
|
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('❌ Error updating session with signers:', error);
|
console.error('❌ Error updating session with signers:', error);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[useBackendFlow, message, signature, nonce],
|
[useBackendFlow, quickAuthSignIn],
|
||||||
);
|
);
|
||||||
|
|
||||||
// Helper function to fetch user data from Neynar API
|
// Helper function to fetch user data from Neynar API
|
||||||
@ -246,14 +237,18 @@ export function NeynarAuthButton() {
|
|||||||
if (useBackendFlow) {
|
if (useBackendFlow) {
|
||||||
// For backend flow, update session with signers
|
// For backend flow, update session with signers
|
||||||
if (signerData.signers && signerData.signers.length > 0) {
|
if (signerData.signers && signerData.signers.length > 0) {
|
||||||
const user =
|
// Get user data for the first signer
|
||||||
signerData.user ||
|
let user: StoredAuthState['user'] | null = null;
|
||||||
(await fetchUserData(signerData.signers[0].fid));
|
if (signerData.signers[0].fid) {
|
||||||
|
user = (await fetchUserData(
|
||||||
|
signerData.signers[0].fid,
|
||||||
|
)) as StoredAuthState['user'];
|
||||||
|
}
|
||||||
await updateSessionWithSigners(signerData.signers, user);
|
await updateSessionWithSigners(signerData.signers, user);
|
||||||
}
|
}
|
||||||
return signerData.signers;
|
return signerData.signers;
|
||||||
} else {
|
} else {
|
||||||
// For frontend flow, store in localStorage
|
// For frontend flow, store in memory only
|
||||||
let user: StoredAuthState['user'] | null = null;
|
let user: StoredAuthState['user'] | null = null;
|
||||||
|
|
||||||
if (signerData.signers && signerData.signers.length > 0) {
|
if (signerData.signers && signerData.signers.length > 0) {
|
||||||
@ -263,13 +258,12 @@ export function NeynarAuthButton() {
|
|||||||
user = fetchedUser;
|
user = fetchedUser;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Store signers in localStorage, preserving existing auth data
|
// Store signers in memory only
|
||||||
const updatedState: StoredAuthState = {
|
const updatedState: StoredAuthState = {
|
||||||
isAuthenticated: !!user,
|
isAuthenticated: !!user,
|
||||||
signers: signerData.signers || [],
|
signers: signerData.signers || [],
|
||||||
user,
|
user,
|
||||||
};
|
};
|
||||||
setItem<StoredAuthState>(STORAGE_KEY, updatedState);
|
|
||||||
setStoredAuth(updatedState);
|
setStoredAuth(updatedState);
|
||||||
|
|
||||||
return signerData.signers;
|
return signerData.signers;
|
||||||
@ -384,78 +378,105 @@ export function NeynarAuthButton() {
|
|||||||
generateNonce();
|
generateNonce();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// Load stored auth state on mount (only for frontend flow)
|
// Backend flow using QuickAuth
|
||||||
useEffect(() => {
|
const handleBackendSignIn = useCallback(async () => {
|
||||||
if (!useBackendFlow) {
|
if (!nonce) {
|
||||||
const stored = getItem<StoredAuthState>(STORAGE_KEY);
|
console.error('❌ No nonce available for backend sign-in');
|
||||||
if (stored && stored.isAuthenticated) {
|
return;
|
||||||
setStoredAuth(stored);
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
setSignersLoading(true);
|
||||||
|
const result = await sdk.actions.signIn({ nonce });
|
||||||
|
|
||||||
|
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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [useBackendFlow]);
|
}, [nonce, quickAuthSignIn, quickAuthUser, fetchUserData]);
|
||||||
|
|
||||||
// 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],
|
|
||||||
);
|
|
||||||
|
|
||||||
// Error callback
|
|
||||||
const onErrorCallback = useCallback((error?: Error | null) => {
|
|
||||||
console.error('❌ Sign in error:', error);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const signInState = useSignIn({
|
|
||||||
nonce: nonce || undefined,
|
|
||||||
onSuccess: onSuccessCallback,
|
|
||||||
onError: onErrorCallback,
|
|
||||||
});
|
|
||||||
|
|
||||||
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(() => {
|
useEffect(() => {
|
||||||
setMessage(data?.message || null);
|
if (useBackendFlow && quickAuthUser?.fid) {
|
||||||
setSignature(data?.signature || null);
|
(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
|
const handleFrontEndSignIn = useCallback(async () => {
|
||||||
if (data?.message && data?.signature) {
|
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;
|
signerFlowStartedRef.current = false;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('❌ Error during sign out:', error);
|
||||||
|
// Optionally handle error state
|
||||||
|
} finally {
|
||||||
|
setSignersLoading(false);
|
||||||
}
|
}
|
||||||
}, [data?.message, data?.signature]);
|
}, [useBackendFlow, pollingInterval, quickAuthSignOut]);
|
||||||
|
|
||||||
// Connect for frontend flow when nonce is available
|
|
||||||
useEffect(() => {
|
|
||||||
if (!useBackendFlow && nonce && !channelToken) {
|
|
||||||
connect();
|
|
||||||
}
|
|
||||||
}, [useBackendFlow, nonce, channelToken, connect]);
|
|
||||||
|
|
||||||
// Handle fetching signers after successful authentication
|
// Handle fetching signers after successful authentication
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -538,103 +559,16 @@ export function NeynarAuthButton() {
|
|||||||
}
|
}
|
||||||
}, [message, signature]); // Simplified dependencies
|
}, [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
|
const authenticated = useBackendFlow
|
||||||
? !!(
|
? !!quickAuthUser?.fid
|
||||||
session?.provider === 'neynar' &&
|
: storedAuth?.isAuthenticated &&
|
||||||
session?.user?.fid &&
|
|
||||||
session?.signers &&
|
|
||||||
session.signers.length > 0
|
|
||||||
)
|
|
||||||
: ((isSuccess && validSignature) || storedAuth?.isAuthenticated) &&
|
|
||||||
!!(storedAuth?.signers && storedAuth.signers.length > 0);
|
!!(storedAuth?.signers && storedAuth.signers.length > 0);
|
||||||
|
|
||||||
const userData = useBackendFlow
|
const userData = useBackendFlow
|
||||||
? {
|
? {
|
||||||
fid: session?.user?.fid,
|
fid: quickAuthUser?.fid,
|
||||||
username: session?.user?.username || '',
|
username: backendUserProfile.username ?? '',
|
||||||
pfpUrl: session?.user?.pfp_url || '',
|
pfpUrl: backendUserProfile.pfpUrl ?? '',
|
||||||
}
|
}
|
||||||
: {
|
: {
|
||||||
fid: storedAuth?.user?.fid,
|
fid: storedAuth?.user?.fid,
|
||||||
@ -663,18 +597,17 @@ export function NeynarAuthButton() {
|
|||||||
) : (
|
) : (
|
||||||
<Button
|
<Button
|
||||||
onClick={useBackendFlow ? handleBackendSignIn : handleFrontEndSignIn}
|
onClick={useBackendFlow ? handleBackendSignIn : handleFrontEndSignIn}
|
||||||
disabled={!useBackendFlow && !url}
|
disabled={signersLoading}
|
||||||
className={cn(
|
className={cn(
|
||||||
'btn btn-primary flex items-center gap-3',
|
'btn btn-primary flex items-center gap-3',
|
||||||
'disabled:opacity-50 disabled:cursor-not-allowed',
|
'disabled:opacity-50 disabled:cursor-not-allowed',
|
||||||
'transform transition-all duration-200 active:scale-[0.98]',
|
'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" />
|
<div className="spinner-primary w-5 h-5" />
|
||||||
<span>Initializing...</span>
|
<span>Loading...</span>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
@ -697,9 +630,9 @@ export function NeynarAuthButton() {
|
|||||||
setPollingInterval(null);
|
setPollingInterval(null);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
url={url}
|
url={undefined}
|
||||||
isError={isError}
|
isError={false}
|
||||||
error={error}
|
error={null}
|
||||||
step={dialogStep}
|
step={dialogStep}
|
||||||
isLoading={signersLoading}
|
isLoading={signersLoading}
|
||||||
signerApprovalUrl={signerApprovalUrl}
|
signerApprovalUrl={signerApprovalUrl}
|
||||||
|
|||||||
@ -2,21 +2,19 @@
|
|||||||
|
|
||||||
import { useCallback, useState } from 'react';
|
import { useCallback, useState } from 'react';
|
||||||
import sdk, { SignIn as SignInCore } from '@farcaster/miniapp-sdk';
|
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 { 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:
|
* This component provides a complete authentication flow for Farcaster users:
|
||||||
* - Generates nonces for secure authentication
|
* - Uses the built-in QuickAuth functionality from the Farcaster SDK
|
||||||
* - Handles the SIWF flow using the Farcaster SDK
|
* - Manages authentication state in memory (no persistence)
|
||||||
* - Manages NextAuth session state
|
|
||||||
* - Provides sign-out functionality
|
* - Provides sign-out functionality
|
||||||
* - Displays authentication status and results
|
* - 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.
|
* to provide seamless authentication within mini apps.
|
||||||
*
|
*
|
||||||
* @example
|
* @example
|
||||||
@ -36,37 +34,19 @@ export function SignIn() {
|
|||||||
signingIn: false,
|
signingIn: false,
|
||||||
signingOut: false,
|
signingOut: false,
|
||||||
});
|
});
|
||||||
const [signInResult, setSignInResult] = useState<SignInCore.SignInResult>();
|
|
||||||
const [signInFailure, setSignInFailure] = useState<string>();
|
const [signInFailure, setSignInFailure] = useState<string>();
|
||||||
|
|
||||||
// --- Hooks ---
|
// --- Hooks ---
|
||||||
const { data: session, status } = useSession();
|
const { authenticatedUser, status, signIn, signOut } = useQuickAuth();
|
||||||
|
|
||||||
// --- Handlers ---
|
// --- 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
|
* This function uses the built-in QuickAuth functionality:
|
||||||
* for the SIWF authentication flow. The nonce ensures the authentication
|
* 1. Gets a token from QuickAuth (handles SIWF flow automatically)
|
||||||
* request is fresh and prevents replay attacks.
|
* 2. Validates the token with our server
|
||||||
*
|
* 3. Updates the session state
|
||||||
* @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
|
|
||||||
*
|
*
|
||||||
* @returns Promise<void>
|
* @returns Promise<void>
|
||||||
*/
|
*/
|
||||||
@ -74,14 +54,12 @@ export function SignIn() {
|
|||||||
try {
|
try {
|
||||||
setAuthState(prev => ({ ...prev, signingIn: true }));
|
setAuthState(prev => ({ ...prev, signingIn: true }));
|
||||||
setSignInFailure(undefined);
|
setSignInFailure(undefined);
|
||||||
const nonce = await getNonce();
|
|
||||||
const result = await sdk.actions.signIn({ nonce });
|
const success = await signIn();
|
||||||
setSignInResult(result);
|
|
||||||
await signIn('farcaster', {
|
if (!success) {
|
||||||
message: result.message,
|
setSignInFailure('Authentication failed');
|
||||||
signature: result.signature,
|
}
|
||||||
redirect: false,
|
|
||||||
});
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
if (e instanceof SignInCore.RejectedByUser) {
|
if (e instanceof SignInCore.RejectedByUser) {
|
||||||
setSignInFailure('Rejected by user');
|
setSignInFailure('Rejected by user');
|
||||||
@ -91,52 +69,47 @@ export function SignIn() {
|
|||||||
} finally {
|
} finally {
|
||||||
setAuthState(prev => ({ ...prev, signingIn: false }));
|
setAuthState(prev => ({ ...prev, signingIn: false }));
|
||||||
}
|
}
|
||||||
}, [getNonce]);
|
}, [signIn]);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Handles the sign-out process.
|
* Handles the sign-out process.
|
||||||
*
|
*
|
||||||
* This function clears the NextAuth session only if the current session
|
* This function clears the QuickAuth session and resets the local state.
|
||||||
* is using the Farcaster provider, and resets the local sign-in result state.
|
|
||||||
*
|
*
|
||||||
* @returns Promise<void>
|
* @returns Promise<void>
|
||||||
*/
|
*/
|
||||||
const handleSignOut = useCallback(async () => {
|
const handleSignOut = useCallback(async () => {
|
||||||
try {
|
try {
|
||||||
setAuthState(prev => ({ ...prev, signingOut: true }));
|
setAuthState(prev => ({ ...prev, signingOut: true }));
|
||||||
// Only sign out if the current session is from Farcaster provider
|
await signOut();
|
||||||
if (session?.provider === 'farcaster') {
|
|
||||||
await signOut({ redirect: false });
|
|
||||||
}
|
|
||||||
setSignInResult(undefined);
|
|
||||||
} finally {
|
} finally {
|
||||||
setAuthState(prev => ({ ...prev, signingOut: false }));
|
setAuthState(prev => ({ ...prev, signingOut: false }));
|
||||||
}
|
}
|
||||||
}, [session]);
|
}, [signOut]);
|
||||||
|
|
||||||
// --- Render ---
|
// --- Render ---
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* Authentication Buttons */}
|
{/* Authentication Buttons */}
|
||||||
{(status !== 'authenticated' || session?.provider !== 'farcaster') && (
|
{status !== 'authenticated' && (
|
||||||
<Button onClick={handleSignIn} disabled={authState.signingIn}>
|
<Button onClick={handleSignIn} disabled={authState.signingIn}>
|
||||||
Sign In with Farcaster
|
Sign In with Farcaster
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
{status === 'authenticated' && session?.provider === 'farcaster' && (
|
{status === 'authenticated' && (
|
||||||
<Button onClick={handleSignOut} disabled={authState.signingOut}>
|
<Button onClick={handleSignOut} disabled={authState.signingOut}>
|
||||||
Sign out
|
Sign out
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Session Information */}
|
{/* 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="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">
|
<div className="font-semibold text-gray-500 dark:text-gray-300 mb-1">
|
||||||
Session
|
Authenticated User
|
||||||
</div>
|
</div>
|
||||||
<div className="whitespace-pre text-gray-700 dark:text-gray-200">
|
<div className="whitespace-pre text-gray-700 dark:text-gray-200">
|
||||||
{JSON.stringify(session, null, 2)}
|
{JSON.stringify(authenticatedUser, null, 2)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@ -145,25 +118,13 @@ export function SignIn() {
|
|||||||
{signInFailure && !authState.signingIn && (
|
{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="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">
|
<div className="font-semibold text-gray-500 dark:text-gray-300 mb-1">
|
||||||
SIWF Result
|
Authentication Error
|
||||||
</div>
|
</div>
|
||||||
<div className="whitespace-pre text-gray-700 dark:text-gray-200">
|
<div className="whitespace-pre text-gray-700 dark:text-gray-200">
|
||||||
{signInFailure}
|
{signInFailure}
|
||||||
</div>
|
</div>
|
||||||
</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