import { useAuthenticate } from '@coinbase/onchainkit/minikit';
import { useState } from 'react';

export default function AuthButton() {
  const { user, authenticate } = useAuthenticate();
  const [isAuthenticating, setIsAuthenticating] = useState(false);

  const handleAuth = async () => {
    setIsAuthenticating(true);
    try {
      const authenticatedUser = await authenticate();
      if (authenticatedUser) {
        console.log('Authenticated user:', authenticatedUser.fid);
        // Save to your backend
        await saveUserSession(authenticatedUser);
      }
    } catch (error) {
      console.error('Authentication failed:', error);
    } finally {
      setIsAuthenticating(false);
    }
  };

  if (user) {
    return (
      <div>
        <p>✅ Authenticated as FID: {user.fid}</p>
        <button onClick={() => window.location.reload()}>
          Sign Out
        </button>
      </div>
    );
  }

  return (
    <button 
      onClick={handleAuth}
      disabled={isAuthenticating}
    >
      {isAuthenticating ? 'Authenticating...' : 'Sign In with Farcaster'}
    </button>
  );
}
Defined in @coinbase/onchainkit
Provides cryptographically secure user authentication using Sign In with Farcaster (SIWF). Returns verified user identity and signature for secure operations.

Returns

user
AuthenticatedUser | null
Authenticated user object with verified identity, or null if not authenticated.
authenticate
() => Promise<AuthenticatedUser | null>
Function to trigger the authentication flow. Returns verified user data on success.
import { useAuthenticate } from '@coinbase/onchainkit/minikit';
import { useState } from 'react';

export default function AuthButton() {
  const { user, authenticate } = useAuthenticate();
  const [isAuthenticating, setIsAuthenticating] = useState(false);

  const handleAuth = async () => {
    setIsAuthenticating(true);
    try {
      const authenticatedUser = await authenticate();
      if (authenticatedUser) {
        console.log('Authenticated user:', authenticatedUser.fid);
        // Save to your backend
        await saveUserSession(authenticatedUser);
      }
    } catch (error) {
      console.error('Authentication failed:', error);
    } finally {
      setIsAuthenticating(false);
    }
  };

  if (user) {
    return (
      <div>
        <p>✅ Authenticated as FID: {user.fid}</p>
        <button onClick={() => window.location.reload()}>
          Sign Out
        </button>
      </div>
    );
  }

  return (
    <button 
      onClick={handleAuth}
      disabled={isAuthenticating}
    >
      {isAuthenticating ? 'Authenticating...' : 'Sign In with Farcaster'}
    </button>
  );
}

Context vs Authentication

Use the right tool for the job:
components/SecurityExample.tsx
import { useAuthenticate, useMiniKit } from '@coinbase/onchainkit/minikit';

export default function SecurityExample() {
  const { user } = useAuthenticate(); // For security
  const { context } = useMiniKit();   // For UX 

  return (
    <div>
      {/* Safe: UX personalization with context */}
      {context.user.fid && (
        <p>Hi there, user {context.user.fid}!</p>
      )}
      
      {/* Safe: Security with authentication */}
      {user && (
        <SecureUserDashboard verifiedFid={user.fid} />
      )}
    </div>
  );
}
useAuthenticate provides cryptographic proof of user identity. Always verify signatures server-side for security-critical operations. Use useMiniKit context only for UX hints and analytics.