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>
);
}
Cryptographically authenticate users with Sign In with Farcaster
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>
);
}
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>
);
}
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.Was this page helpful?