feat: replace next-auth with quick auth

src/components/ui/NeynarAuthButton/ProfileButton.tsx

@@ -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}>

src/components/ui/NeynarAuthButton/index.tsx

@@ -1,20 +1,13 @@
 'use client';
 
-import '@farcaster/auth-kit/styles.css';
-import { useSignIn, UseSignInData } from '@farcaster/auth-kit';
 import { useCallback, useEffect, useState, useRef } from 'react';
 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 { getItem, removeItem, setItem } from '~/lib/localStorage';
 import { useMiniApp } from '@neynar/react';
-import {
-  signIn as backendSignIn,
-  signOut as backendSignOut,
-  useSession,
-} from 'next-auth/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,8 @@ 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 +107,7 @@ 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 +140,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
@@ -245,15 +229,17 @@ export function NeynarAuthButton() {
         if (response.ok) {
           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));
+            if (signerData.signers && signerData.signers.length > 0) {             
+              // 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 +249,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 +369,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;
+    }
+
+    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]);
-
-  // 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;
+  }, [nonce, quickAuthSignIn, quickAuthUser, fetchUserData]);
 
+  // Fetch user profile when quickAuthUser.fid changes (for backend flow)
   useEffect(() => {
-    setMessage(data?.message || null);
-    setSignature(data?.signature || null);
-    
-    // Reset the signer flow flag when message/signature change
-    if (data?.message && data?.signature) {
+    if (useBackendFlow && quickAuthUser?.fid) {
+      (async () => {
+        const user = await fetchUserData(quickAuthUser.fid);
+        setBackendUserProfile({
+          username: user?.username || '',
+          pfpUrl: user?.pfp_url || '',
+        });
+      })();
+    }
+  }, [useBackendFlow, quickAuthUser?.fid, fetchUserData]);
+
+  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(() => {
@@ -533,103 +545,15 @@ 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.log('ℹ️ 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) &&
-      !!(storedAuth?.signers && storedAuth.signers.length > 0);
+    ? !!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,
@@ -658,18 +582,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'
+            'transform transition-all duration-200 active:scale-[0.98]'
           )}
         >
-          {!useBackendFlow && !url ? (
+          {signersLoading ? (
             <>
               <div className="spinner-primary w-5 h-5" />
-              <span>Initializing...</span>
+              <span>Loading...</span>
             </>
           ) : (
             <>
@@ -692,9 +615,9 @@ export function NeynarAuthButton() {
               setPollingInterval(null);
             }
           }}
-          url={url}
-          isError={isError}
-          error={error}
+          url={undefined}
+          isError={false}
+          error={null}
           step={dialogStep}
           isLoading={signersLoading}
           signerApprovalUrl={signerApprovalUrl}

src/components/ui/wallet/SignIn.tsx

@@ -1,22 +1,20 @@
 'use client';
 
 import { useCallback, useState } from "react";
-import { signIn, signOut, getCsrfToken } from "next-auth/react";
 import sdk, { SignIn as SignInCore } from "@farcaster/miniapp-sdk";
-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,50 +69,45 @@ 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</div>
+          <div className="font-semibold text-gray-500 dark:text-gray-300 mb-1">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>
       )}
@@ -142,20 +115,10 @@ export function SignIn() {
       {/* Error Display */}
       {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</div>
+          <div className="font-semibold text-gray-500 dark:text-gray-300 mb-1">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>
-      )}
     </>
   );
 }