# Integrate WorkOS with Nylas Connect React

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

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](/docs/v3/auth/nylas-connect/use-external-idp/workos/#configure-workos). 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 @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:

```tsx


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}
    >

  );
}
```

## What's next

- [WorkOS vanilla JavaScript guide](/docs/v3/auth/nylas-connect/use-external-idp/workos/) 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