# Integrate Clerk with Nylas Connect

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

Clerk is a modern authentication platform with prebuilt UI components, session management, and multi-factor authentication. This guide shows you how to use Clerk as your identity provider with Nylas Connect so your users can authenticate 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.


### Configure Nylas Dashboard

Before connecting your identity provider, configure the IDP settings in the Nylas Dashboard:

1. Navigate to your application in the [Nylas Dashboard](https://dashboard-v3.nylas.com).
2. Go to **Hosted Authentication** → **Identity Providers**.
3. Configure the following settings:
   - **Allowed Origins**: Add the domains where your application will be hosted (e.g., `http://localhost:3000`, `https://yourapp.com`). These origins will be allowed to make requests to Nylas with your IDP tokens.
   - **Callback URIs**: Add the redirect URIs that Nylas will use after authentication (e.g., `http://localhost:3000/auth/callback`). These must match the `redirectUri` configured in your NylasConnect instance.

> **Note:** 
> The allowed origins and callback URIs are security measures to prevent unauthorized use of your Nylas application. Include all domains where your application will run, including development, staging, and production environments.

You can access the Identity Provider settings page directly at:

```
https://dashboard-v3.nylas.com/applications/<YOUR_APP_ID>/hosted-authentication/idp-settings
```


### Configure Clerk

1. In your [Clerk Dashboard](https://dashboard.clerk.com/), navigate to your application.
2. Go to **Configure** → **Paths**.
3. Configure the following settings:
   - **Sign-in URL**: Set to your application's sign-in page (e.g., `/sign-in`)
   - **Sign-up URL**: Set to your application's sign-up page (e.g., `/sign-up`)
   - **After sign-in URL**: Set to where users should land after signing in (e.g., `/`)
   - **After sign-up URL**: Set to where users should land after signing up (e.g., `/`)
4. In **Domains**, add your application's domain (e.g., `localhost:3000` for development, `yourapp.com` for production)

> **Local development setup:** 
> The examples in this guide use `http://localhost:3000`. If you're using a different port:
> 
> - Update the domain in your Clerk Dashboard (Clerk uses `localhost:3000` format, without the `http://` protocol)
> - Update the `redirectUri` in your Nylas Connect configuration
> - Update the **Allowed Origins** and **Callback URIs** in your Nylas Dashboard's Identity Provider settings
> 
> All these values must match exactly for authentication to work correctly.

### Install dependencies

```bash
npm install @nylas/connect @clerk/clerk-js
```

## Implementation

Initialize Clerk and Nylas Connect together. The `identityProviderToken` callback retrieves the current session token from Clerk and passes it to Nylas Connect:

```ts


const clerk = new Clerk("<CLERK_PUBLISHABLE_KEY>");

async function initializeClerk() {
  await clerk.load();
}

const nylasConnect = new NylasConnect({
  clientId: "<NYLAS_CLIENT_ID>",
  redirectUri: "http://localhost:3000/auth/callback",
  identityProviderToken: async () => {
    try {
      const token = await clerk.session?.getToken();
      return token || null;
    } catch (error) {
      console.error("Failed to get Clerk token:", error);
      return null;
    }
  },
});

async function loginWithClerk() {
  await clerk.openSignIn();
}

async function connectEmail() {
  try {
    const result = await nylasConnect.connect({ method: "popup" });
    console.log("Email connected:", result.grantInfo?.email);
  } catch (error) {
    console.error("Failed to connect email:", error);
  }
}

async function logout() {
  await nylasConnect.logout();
  await clerk.signOut();
}
```

## Make API calls

After the user authenticates with Clerk and connects their email, you can use the Clerk session token to make Nylas API requests. Pass the token as a Bearer token and include the `X-Nylas-External-User-Id` header with the user's `sub` claim from the JWT:

```ts
function parseSubFromJwt(token: string): string | null {
  try {
    const base64Payload = token.split(".")[1];
    const payload = JSON.parse(atob(base64Payload));
    return payload?.sub || null;
  } catch {
    return null;
  }
}

async function fetchEmails() {
  const token = await clerk.session?.getToken();
  const userId = parseSubFromJwt(token || "");

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

  return await response.json();
}
```

> **Info:** 
> Use `https://api.us.nylas.com` for US-hosted applications or `https://api.eu.nylas.com` for EU-hosted applications.

## What's next

- [Clerk + Nylas Connect with React](/docs/v3/auth/nylas-connect-react/use-external-idp/clerk/) for React-based implementations
- [Session management](/docs/v3/auth/nylas-connect/use-external-idp/#session-management) for monitoring connection state
- [Error handling](/docs/v3/auth/nylas-connect/use-external-idp/#error-handling) for handling authentication failures
- [Nylas Connect overview](/docs/v3/auth/nylas-connect/) for standalone OAuth without an IDP