Skip to content
Docs
or

Integrate Clerk with Nylas Connect React

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

Section titled “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. For Nylas Dashboard IDP settings, see the external IDP overview.

Install dependencies

Section titled “Install dependencies”
npm install @nylas/react @clerk/clerk-react

Implementation

Section titled “Implementation”

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

import { ClerkProvider, SignedIn, SignedOut, SignInButton, useAuth, useClerk, useUser } from '@clerk/clerk-react';
import { useNylasConnect } from '@nylas/react/connect';


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>
      <SignedOut>
        <SignInButton mode="modal">
          <button>Log in with Clerk</button>
        </SignInButton>
      </SignedOut>


      <SignedIn>
        <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>
        )}
      </SignedIn>
    </div>
  );
}


export default function App() {
  return (
    <ClerkProvider publishableKey="<CLERK_PUBLISHABLE_KEY>">
      <ClerkContent />
    </ClerkProvider>
  );
}

Make API calls

Section titled “Make API calls”

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

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

Section titled “What’s next”