Nylas React Components

React components for Nylas Scheduler

!npm

Requirements

- Node.js v20 or higher
- React.js v18 or higher

Installation

Install Nylas React Components via npm:

``bash
npm install @nylas/react@latest
`

or yarn

`bash
yarn add @nylas/react@latest
`

Exports overview

- Elements
- NylasSchedulerEditor, NylasScheduling, NylasSchedulingMethod
- Import from @nylas/react or @nylas/react/elements

- Connect
- useNylasConnect, NylasConnectButton
- Import from @nylas/react or @nylas/react/connect

Getting Started

The following example adds the Nylas Scheduler Editor and Scheduling components to your React app.

> ⚠️ Important: Make sure to replace the NYLAS_CLIENT_ID with your Nylas Client ID. Your Nylas Client ID can be found in your app's Overview page on the Nylas Dashboard.

$3

`jsx
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { NylasSchedulerEditor, NylasScheduling } from "@nylas/react";

function App() {
// Get the configuration ID from the URL query string
const urlParams = new URLSearchParams(window.location.search);
const configId = urlParams.get("config_id") || "";

return (


path="/"
element={


`text
npm run dev -- --port
`

After you run the command, open your browser to http://localhost:/scheduler-editor to see your Scheduler Editor and create your first Scheduling Page.

Nylas Connect Hook

The useNylasConnect hook provides a simple way to add OAuth authentication to your React app using Nylas Connect.

$3

`jsx
import { useNylasConnect } from '@nylas/react';

function LoginButton() {
const { isConnected, connect, logout, grant, isLoading } = useNylasConnect({
clientId: 'your-nylas-client-id',
redirectUri: 'http://localhost:3000/callback'
});

if (isLoading) return

return (
connect({ method: 'popup' })}>
Connect Account

);
}
`

$3

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| clientId | string | - | Your Nylas Client ID |
| redirectUri | string | - | OAuth callback URL |
| autoHandleCallback | boolean | true | Automatically handle OAuth callback |
| autoRefreshInterval | number | - | Auto-refresh session interval (ms) |
| retryAttempts | number | 0 | Number of retry attempts for failed operations |
| enableAutoRecovery | boolean | false | Enable automatic error recovery |

$3

The hook returns an object with the following properties:

State:
- isConnected - Whether user is authenticated
- grant - Current user's grant information
- isLoading - Loading state for operations
- error - Current error, if any

Actions:
- connect(options) - Start OAuth flow
- logout(grantId?) - Sign out user
- refreshSession() - Refresh current session
- subscribe(callback) - Listen to connection events

$3

For security, use environment variables for your configuration:

`bash


.env.local

`jsx
const { isConnected, connect } = useNylasConnect({
clientId: import.meta.env.VITE_NYLAS_CLIENT_ID,
redirectUri: import.meta.env.VITE_NYLAS_REDIRECT_URI
});
`

Nylas Connect Button

The NylasConnectButton component provides a simple way to add email provider authentication to your React application.

$3

`jsx
import { NylasConnectButton } from "@nylas/react";

function App() {
return (
clientId="your-nylas-client-id"
redirectUri="http://localhost:3000/callback"
onSuccess={(result) => {
console.log("Connected successfully:", result);
}}
onError={(error) => {
console.error("Connection failed:", error);
}}
/>
);
}
`

$3

For applications that use external identity providers (via JWKS), you can pass identity provider tokens during authentication:

`jsx
import { NylasConnectButton } from "@nylas/react";

function App() {
// Function to retrieve JWT token from your external identity provider
const getIdpToken = async () => {
// Get the JWT token from your authentication system
const token = await yourAuthSystem.getJWT();
return token; // or return null if not available
};

return (
clientId="your-nylas-client-id"
redirectUri="http://localhost:3000/callback"
identityProviderToken={getIdpToken}
onSuccess={(result) => {
console.log("Connected with IDP claims:", result);
}}
onError={(error) => {
console.error("Connection failed:", error);
}}
/>
);
}
`

$3

For enhanced security, you can handle the OAuth code exchange on your backend:

`jsx
import { NylasConnectButton } from "@nylas/react";

function App() {
const handleCodeExchange = async (params) => {
// Send the authorization code to your backend
const response = await fetch("/api/auth/exchange", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
code: params.code,
state: params.state,
clientId: params.clientId,
redirectUri: params.redirectUri,
scopes: params.scopes,
provider: params.provider,
}),
});

if (!response.ok) {
throw new Error(Token exchange failed: ${response.statusText});
}

const tokenData = await response.json();

// Return the expected ConnectResult format
return {
accessToken: tokenData.access_token,
idToken: tokenData.id_token,
grantId: tokenData.grant_id,
expiresAt: Date.now() + tokenData.expires_in * 1000,
scope: tokenData.scope,
grantInfo: tokenData.grant_info,
};
};

return (
clientId="your-nylas-client-id"
redirectUri="http://localhost:3000/callback"
codeExchange={handleCodeExchange}
onSuccess={(result) => {
console.log("Connected successfully:", result);
}}
onError={(error) => {
console.error("Connection failed:", error);
}}
/>
);
}
``

Links

A complete walkthrough for setting up Scheduler can be found at https://developer.nylas.com/docs/v3/getting-started/scheduler/, with the complete code available on GitHub.

$3

- Scheduler documentation
- Scheduler API reference
- Developer Forums