Nylas Connect Quickstart (React)

A minimal React application demonstrating the core functionality of the @nylas/connect package.

Features

• 🚀 Simple "Connect" button to initiate authentication
• 🔐 Hosted authentication popup flow
• ✅ Beautiful success page displaying user information
• ❌ Clear error handling and messaging
• 🎨 Modern UI with Tailwind CSS
• 📦 Zero build dependencies (uses CDN for all libraries)

Setup

1. Configure Nylas Client ID:

   • Open index.html and callback.html
   • Replace YOUR_NYLAS_CLIENT_ID with your actual Nylas Client ID
   • You can get your Client ID from the Nylas Dashboard

2. Configure Redirect URI:

   • In the Nylas Dashboard, add your application's callback URL to the allowed redirect URIs
   • For local development, add: http://localhost:8000/callback.html (or whatever port you're using)
   • Important: The redirect URI must end with /callback.html

Running the Application

Since this is a simple HTML file with no build process, you can run it using any static file server:

Option 1: Python

# Python 3
python3 -m http.server 8000

Option 2: Node.js (http-server)

npx http-server -p 8000

Option 3: PHP

php -S localhost:8000

Then open your browser and navigate to:

http://localhost:8000

How It Works

1. Connect Button: Click the large "Connect" button to start the authentication flow
2. Popup Authentication: A popup window opens with the Nylas hosted authentication page
3. Success: After successful authentication, the app displays:
   • User's first name
   • User's last name
   • Grant ID
4. Error Handling: If authentication fails, a clear error message is displayed

Code Structure

• index.html - Main application page containing:

  • React components using hooks
  • Tailwind CSS for styling
  • Nylas Connect integration
  • Error handling logic
  • Message listener for popup callbacks

• callback.html - OAuth callback handler:

  • Processes the OAuth redirect
  • Communicates back to the main window
  • Handles authentication success/failure

Customization

You can easily customize the appearance by modifying the Tailwind CSS classes in the HTML file. The application uses a gradient background and card-based layout for a modern look.

Requirements

• A Nylas account with a configured application
• Valid Client ID from Nylas Dashboard
• Modern web browser with JavaScript enabled

Learn More

• Nylas Connect Package
• Nylas API Documentation
• Nylas Dashboard