Merge branch 'main' into shreyas-formatting

src/components/ui/wallet/SignIn.tsx

@@ -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>
-      )}
     </>
   );
 }