Integrate WorkOS with Nylas Connect React

WorkOS provides a React SDK (@workos-inc/authkit-react) with an AuthKitProvider and useAuth hook for enterprise authentication. This guide shows you how to combine AuthKitProvider with useNylasConnect to let users authenticate through WorkOS and connect their email accounts through Nylas.

Before you begin

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

For WorkOS dashboard configuration steps, see the WorkOS vanilla guide. For Nylas Dashboard IDP settings, see the external IDP overview.

Install dependencies

npm install @nylas/react @workos-inc/authkit-react

Implementation

Wrap your app with AuthKitProvider, then use WorkOS’s useAuth hook to manage authentication and useNylasConnect to handle the email connection:

import { AuthKitProvider, useAuth } from '@workos-inc/authkit-react';
import { useNylasConnect } from '@nylas/react/connect';

function WorkOSContent() {
  const { user, isLoading, signIn, signOut } = useAuth();

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

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      {!user ? (
        <button onClick={() => signIn()}>
          Log in with WorkOS
        </button>
      ) : (
        <div>
          <p>Logged in as: {user.email}</p>
          <button onClick={() => signOut()}>Log out</button>
        </div>
      )}

      {user && !isConnected && (
        <button onClick={() => connect({ method: 'popup' })}>
          Connect your inbox
        </button>
      )}

      {isConnected && (
        <div>
          <p>Email inbox connected</p>
          <button onClick={() => disconnectEmail()}>
            Disconnect
          </button>
        </div>
      )}
    </div>
  );
}

export default function App() {
  return (
    <AuthKitProvider
      clientId="<WORKOS_CLIENT_ID>"
      redirectUri={window.location.origin}
    >
      <WorkOSContent />
    </AuthKitProvider>
  );
}

What’s next

WorkOS vanilla JavaScript guide for non-React implementations
useNylasConnect reference for the full hook API
Session management for monitoring connection state in React
Error handling for handling authentication failures