# Integrate Clerk with Nylas Connect React

Source: https://developer.nylas.com/docs/v3/auth/nylas-connect-react/use-external-idp/clerk/

Clerk provides a React SDK (`@clerk/clerk-react`) with prebuilt components like `SignInButton` and hooks like `useAuth`. This guide shows you how to combine `ClerkProvider` with `useNylasConnect` to let users sign in with Clerk and connect their email accounts through Nylas.

## Before you begin

You need a Clerk application and a Nylas application configured to work together.

For Clerk dashboard configuration steps, see the [Clerk vanilla guide](/docs/v3/auth/nylas-connect/use-external-idp/clerk/#configure-clerk). For Nylas Dashboard IDP settings, see the [external IDP overview](/docs/v3/auth/nylas-connect/use-external-idp/#before-you-begin).

### Install dependencies

```bash
npm install @nylas/react @clerk/clerk-react
```

## Implementation

Wrap your app with `ClerkProvider`, then use Clerk's `useAuth` hook to get tokens and `useNylasConnect` to manage the email connection:

```tsx

  ClerkProvider,
  SignedIn,
  SignedOut,
  SignInButton,
  useAuth,
  useClerk,
  useUser,
} from "@clerk/clerk-react";


function ClerkContent() {
  const { isSignedIn, getToken } = useAuth();
  const { signOut } = useClerk();
  const { user } = useUser();

  const {
    isConnected,
    connect,
    logout: disconnectEmail,
  } = useNylasConnect({
    clientId: "<NYLAS_CLIENT_ID>",
    redirectUri: window.location.origin + "/auth/callback",
    identityProviderToken: async () => {
      try {
        const token = await getToken();
        return token;
      } catch {
        return null;
      }
    },
  });

  return (
    <div>


          <button>Log in with Clerk</button>


        <div>
          <p>Logged in as: {user?.primaryEmailAddress?.emailAddress}</p>
          <button onClick={() => signOut()}>Log out</button>
        </div>

        {!isConnected ? (
          <button onClick={() => connect({ method: "popup" })}>
            Connect your inbox
          </button>
        ) : (
          <div>
            <p>Email inbox connected</p>
            <button onClick={() => disconnectEmail()}>Disconnect</button>
          </div>
        )}

    </div>
  );
}

export default function App() {
  return (
    <ClerkProvider publishableKey="<CLERK_PUBLISHABLE_KEY>">

  );
}
```

## Make API calls

Use Clerk's `getToken` to retrieve the session token and make Nylas API calls:

```tsx
function EmailList() {
  const { getToken } = useAuth();
  const [emails, setEmails] = useState([]);

  useEffect(() => {
    const fetchEmails = async () => {
      const token = await getToken();

      const payload = JSON.parse(atob(token.split(".")[1]));
      const userId = payload.sub;

      const response = await fetch(
        "https://api.us.nylas.com/v3/grants/me/messages",
        {
          headers: {
            Authorization: `Bearer ${token}`,
            "X-Nylas-External-User-Id": userId,
          },
        },
      );

      const data = await response.json();
      setEmails(data.data);
    };

    fetchEmails();
  }, [getToken]);

  return <div>{/* Render emails */}</div>;
}
```

## What's next

- [Clerk vanilla JavaScript guide](/docs/v3/auth/nylas-connect/use-external-idp/clerk/) for non-React implementations
- [useNylasConnect reference](/docs/v3/auth/nylas-connect-react/usenylasconnect/) for the full hook API
- [Session management](/docs/v3/auth/nylas-connect-react/use-external-idp/#session-management) for monitoring connection state in React
- [Error handling](/docs/v3/auth/nylas-connect-react/use-external-idp/#error-handling) for handling authentication failures