Skip to main content
Install auth-kit and its peer dependency viem. 
npm install @farcaster/auth-kit viem
Note: auth-kit is a React library. If you’re using a different framework, take a look at the client library instead.

​
1. Import the libraries

Import auth-kit and CSS styles. 
import '@farcaster/auth-kit/styles.css';
import { AuthKitProvider } from '@farcaster/auth-kit';
import { SignInButton } from '@farcaster/auth-kit';

​
2. Configure your provider

Configure a provider with an Optimism RPC URL, your app’s domain and login URL, and wrap your application in it. 
const config = {
  rpcUrl: 'https://mainnet.optimism.io',
  domain: 'example.com',
  siweUri: 'https://example.com/login',
};

const App = () => {
  return (
    <AuthKitProvider config={config}>{/*   Your App   */}</AuthKitProvider>
  );
};

​
3. Add a connect button

Render the SignInButton component. When the user clicks this button, they will be prompted to complete sign in using their Farcaster wallet application. 
export const Login = () => {
  return <SignInButton />;
};

​
4. Read user profile

Optionally, fetch details about the logged in user anywhere in your app with useProfile. 
import { useProfile } from '@farcaster/auth-kit';

export const UserProfile = () => {
  const {
    isAuthenticated,
    profile: { username, fid },
  } = useProfile();
  return (
    <div>
      {isAuthenticated ? (
        <p>
          Hello, {username}! Your fid is: {fid}
        </p>
      ) : (
        <p>You're not signed in.</p>
      )}
    </div>
  );
};