Skip to main content
The main component. Renders a “Sign in With Farcaster” button that prompts the user to scan a QR code with their phone in a web browser or redirects to a mobile device. You can use the onSuccess callback prop or the useProfile hook to access the user’s authentication status and profile information. Note: Make sure you’ve wrapped your application in an AuthKitProvider to use the SignInButton component. 
import { SignInButton } from '@farcaster/auth-kit';

export const Login = () => {
  return (
    <SignInButton
      onSuccess={({ fid, username }) =>
        console.log(`Hello, ${username}! Your fid is ${fid}.`)
      }
    />
  );
};

​
Props

PropTypeDescriptionDefault
timeoutnumberReturn an error after polling for this long.300_000 (5 minutes)
intervalnumberPoll the relay server for updates at this interval.1500 (1.5 seconds)
noncestringA random nonce to include in the Sign In With Farcaster message.None
notBeforestringTime when the message becomes valid. ISO 8601 datetime string.None
expirationTimestringTime when the message expires. ISO 8601 datetime string.None
requestIdstringAn optional system-specific ID to include in the message.None
onSuccessfunctionCallback invoked when sign in is complete and the user is authenticated.None
onStatusResponsefunctionCallback invoked when the component receives a status update from the relay server.None
onErrorfunctionError callback function.None
onSignOutfunctionCallback invoked when the user signs out.None
hideSignOutbooleanHide the Sign out button.false
debugbooleanRender a debug panel displaying internal auth-kit state.false

​
Examples

​
Custom nonce

import { SignInButton } from '@farcaster/auth-kit';

export const Login = ({ nonce }: { nonce: string }) => {
  return (
    <SignInButton
      nonce={nonce}
      onSuccess={({ fid, username }) =>
        console.log(`Hello, ${username}! Your fid is ${fid}.`)
      }
    />
  );
};