Nylas Connect React SPA Quickstart

A minimal React SPA demonstrating the power and simplicity of the @nylas/connect SDK.

Features

• 🚀 One-line SDK setup
• 🔐 Secure popup authentication flow
• 📡 Event-driven state management
• ✨ Automatic callback handling
• 📧 Instant access to grant information
• 🎨 Beautiful dark mode UI with Tailwind CSS

Prerequisites

• Node.js (v18 or higher recommended)
• A Nylas account and Client ID (Sign up here)
• Important: You must configure a callback redirect URI in your Nylas Dashboard before the authentication flow will work

Quick Start

1. Install dependencies

npm install

2. Configure callback URI in Nylas Dashboard

This step is required before authentication will work.

1. Go to your Nylas Dashboard
2. Navigate to your application settings
3. Add a callback URI that matches your local development URL

For local development, add:

http://localhost:8080

Or if the port is different (check your terminal output):

http://localhost:5174

Note: The callback URI must match your application's origin exactly. You can add multiple URIs for different environments (development, staging, production).

3. Set up your environment variables

Copy env.example to .env and add your Nylas Client ID:

cp env.example .env

Then edit .env:

VITE_NYLAS_CLIENT_ID=your_actual_client_id_here

Get your Client ID from the Nylas Dashboard

4. Run the development server

npm run dev

5. Open your browser

Navigate to the URL shown in the terminal (typically http://localhost:8080 or http://localhost:5174)

How It Works

This demo showcases the simplicity of @nylas/connect:

1. Setup (One Line!)

const nylas = new NylasConnect({
  clientId: "YOUR_CLIENT_ID",
  redirectUri: window.location.origin,
});

2. Listen to Connection Events

const unsubscribe = nylas.onConnectStateChange((event, session) => {
  if (event === 'CONNECT_SUCCESS' && session) {
    console.log('Connected:', session.grantInfo?.email);
  } else if (event === 'SESSION_RESTORED' && session) {
    console.log('Session restored');
  } else if (event === 'SIGNED_OUT') {
    console.log('User signed out');
  }
});

// Handle OAuth callback
nylas.callback();

Available Events:

• Authentication: CONNECT_SUCCESS, CONNECT_ERROR, CONNECT_CANCELLED, CONNECT_STARTED
• Session: SESSION_RESTORED, SESSION_EXPIRED, SIGNED_IN, SIGNED_OUT
• Token: TOKEN_REFRESHED, TOKEN_REFRESH_ERROR
• Popup: CONNECT_POPUP_OPENED, CONNECT_POPUP_CLOSED
• And more!

📚 See EVENTS.md for complete event reference with examples

3. Connect with One Click

// Open authentication popup - events handle state updates
await nylas.connect({ method: 'popup' });

The SDK emits events for all state changes, making integration clean and reactive!

Project Structure

├── src/
│   ├── App.tsx          # Main application component
│   ├── main.tsx         # Application entry point
│   └── index.css        # Tailwind CSS imports
├── env.example          # Environment variable template
└── package.json         # Dependencies and scripts

What You'll See

1. Initial View: A clean interface with a "Connect Your Account" button
2. Authentication: Click the button to open a secure popup for account connection
3. Success View: After successful connection, see:
   • User's full name
   • Email address
   • Grant ID
   • Disconnect button

💡 The SDK automatically manages session persistence across page refreshes!

Technologies Used

• React - UI framework
• TypeScript - Type safety
• Vite - Build tool
• Tailwind CSS - Styling
• @nylas/connect - Email connectivity SDK

Troubleshooting

Authentication not working?

Most common issue: The callback URI in your Nylas Dashboard doesn't match your application's URL.

Make sure:

1. The callback URI is configured in your Nylas Dashboard
2. The URI matches exactly (including protocol and port): http://localhost:8080 or http://localhost:5174
3. You've restarted the dev server after adding the callback URI
4. Your VITE_NYLAS_CLIENT_ID environment variable is set correctly

Port conflicts

If Vite uses a different port (e.g., 5174 instead of 8080), make sure to add that exact port to your callback URIs in the Nylas Dashboard.

Learn More

• Nylas Documentation
• Nylas Connect SDK
• Nylas Dashboard

License

MIT

---

Built with ❤️ using Nylas Connect