> ## Documentation Index
> Fetch the complete documentation index at: https://docs.neynar.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation

Install auth-kit and its peer dependency [viem](https://viem.sh/).

```sh theme={"system"}
npm install @farcaster/auth-kit viem
```

**Note:** auth-kit is a [React](https://react.dev/) library. If you're using a different framework, take a look at the [client library](/farcaster/auth-kit/client/introduction) instead.

### 1. Import the libraries

Import auth-kit and CSS styles.

```tsx theme={"system"}
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.

```tsx theme={"system"}
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.

```tsx theme={"system"}
export const Login = () => {
  return <SignInButton />;
};
```

### 4. Read user profile

Optionally, fetch details about the logged in user anywhere in your app with `useProfile`.

```tsx theme={"system"}
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>
  );
};
```