useNylasConnect hook

useNylasConnect is the main hook of the Nylas Connect React library. It manages authentication state information and includes methods for connecting and disconnecting users.

import React from "react";
import { useNylasConnect, UseNylasConnectConfig } from "@nylas/react/connect";

const config: UseNylasConnectConfig = {
  clientId: "<NYLAS_CLIENT_ID>",
  redirectUri: "http://localhost:3000/auth/callback",
};

function App() {
  const { isConnected, grant, connect, logout, isLoading, error } =
    useNylasConnect(config);

  // Show loading state while initializing
  if (isLoading) {
    return (
      <div className="flex items-center justify-center p-8">
        <div>Loading...</div>
      </div>
    );
  }

  // Show error state if something went wrong
  if (error) {
    return (
      <div className="bg-red-50 border border-red-200 rounded p-4 m-4">
        <h3 className="text-red-800 font-semibold">Authentication Error</h3>
        <p className="text-red-600">{error.message}</p>
        <button
          className="mt-2 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
          onClick={() => window.location.reload()}
        >
          Retry
        </button>
      </div>
    );
  }

  // Render authenticated state
  if (isConnected && grant) {
    return (
      <div className="p-6">
        <div className="bg-green-50 border border-green-200 rounded p-4 mb-4">
          <h2 className="text-green-800 font-semibold">Connected!</h2>
          <p className="text-green-600">Welcome, {grant.name || grant.email}</p>
          {grant.picture && (
            <img
              src={grant.picture}
              alt="Profile"
              className="w-12 h-12 rounded-full mt-2"
            />
          )}
        </div>

        <div className="space-y-2">
          <p><strong>Provider:</strong> {grant.provider}</p>
          <p><strong>Email:</strong> {grant.email}</p>
          {grant.emailVerified && (
            <p className="text-green-600">✓ Email verified</p>
          )}
        </div>

        <button
          className="mt-4 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
          onClick={async () => {
            try {
              await logout();
            } catch (e) {
              console.error("Logout failed", e);
            }
          }}
        >
          Logout
        </button>
      </div>
    );
  }

  // Render unauthenticated state
  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-4">Connect Your Email</h1>
      <p className="text-gray-600 mb-6">Connect your email account to get started with Nylas.</p>

      <div className="space-y-3">
        <button
          className="w-full px-4 py-3 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
          onClick={async () => {
            try {
              await connect({ method: "popup" }); // Call directly in a user gesture
            } catch (e) {
              console.error("Connect failed", e);
            }
          }}
        >
          Connect with Popup
        </button>

        <button
          className="w-full px-4 py-3 bg-gray-600 text-white rounded hover:bg-gray-700 transition-colors"
          onClick={async () => {
            try {
              await connect({ method: "inline" });
            } catch (e) {
              console.error("Connect failed", e);
            }
          }}
        >
          Connect with Redirect
        </button>
      </div>
    </div>
  );
}

`UseNylasConnectConfig`

The useNylasConnect hook accepts the UseNylasConnectConfig object, which includes the following properties.

Property

Type

Default

Optional properties

Property	Type	Description
`connectClient`	`NylasConnect`	Provides access to the underlying `NylasConnect` client instance.
`disableDebug`	`() => void`	Disable debug mode.
`enableDebug`	`() => void`	Enable debug mode for detailed logging.
`logger`	`Logger`	Provides access to the internal logger instance.
`setLogLevel`	`(level: LogLevel) => void`	Set the verbosity level for log messages.

Return values

useNylasConnect returns an object with the following properties.

Property	Type	Description
`error`	`Error \| null`	An object containing information about the last error encountered during authentication.
`grant`	`GrantInfo \| null`	An object containing information about the currently authenticated grant.
`isConnected`	boolean	The current connection state. When `true`, indicates that the user is authenticated.
`isLoading`	boolean	The current loading state. When `true`, indicates that an authentication operation is in progress.

Method

Type

Default