@nylas/connect: A JavaScript library for connecting grants from the browser

@nylas/connect: A JavaScript library for connecting grants from the browser

4 min read
A demo React app that showcases @nylas/connectcan be used to connect a grant.

@nylas/connect is the solution to many of the manually setup hosted authentication snippets you’ve copy‑pasted over the years, and designed to play nice with the modern web stack. That means:

  • It drives a hosted OAuth2 flow for you (popup by default, redirect when needed).
  • It performs the authorization code exchange with PKCE automatically.
  • It returns a grant you can use immediately with the Nylas API (email, calendar, contacts).
  • It keeps the API surface essentially zero‑boilerplate: one call: connect().
  • It works in modern browsers and frameworks (vanilla JS, React, Next.js, etc.).
  • It exposes sensible events and is built with session handling in mind.

In short: you get the ergonomics of a normal JavaScript API while acknowledging — and hiding — the messy bits of OAuth.

Setup is simple

A client looks like this:

Nylas Connect client

import { NylasConnect } from "@nylas/connect";

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

// Callback listener
await nylas.callback();

// Click a button, call a method, get a grant.
const grant = await nylas.connect();

console.log(grant.id, grant.provider, grant.grantInfo?.name);

Add methods to your app that use the grant, and call them from your UI. Prefer a popup? That’s the default. Want to instead perform a full page redirect? Change the mode to inline and you’ll get back a URL instead.

Pop-up or Inline

const url = await nylas.connect({ mode: 'inline' });
window.location.href = url // Redirect the user through the OAuth flow

What does the flow look like?

  1. User clicks Connect.
  2. popup opens to the provider’s hosted consent screen.
  3. @nylas/connect runs the PKCE dance and performs the code exchange.
  4. The popup closes and you get a grant:

Grant

{
  "idToken": "...",
  "grantId": "...",
  "grantInfo": { "name": "Alex Johnson", ... }
}

No redirect routes, verifier/challenge generation, or token juggling in your codebase.

What is a grant, why do we need it, and why do we use OAuth?

A grant is the core object that powers Nylas. Grants authorize your Nylas application to access a user’s data with specific scopes (for example, permission to read email messages). In other words, they represent the access rights your application has to a user’s provider account.

For example, if a user connects their Google account and authorizes the calendar.readonly scope, Nylas issues a grant ID for that user. That grant ID allows you to query their calendar data through Nylas’ APIs.

To obtain a grant, your application must first communicate with the provider to authenticate the user and secure their authorization. This process follows the OAuth 2.0 framework, which most modern providers support. OAuth 2.0 handles user consent and login, but there’s still a critical step: securely exchanging an authorization code for an access token. In a browser environment, this exchange must be protected using PKCE.

What is PKCE and why is it necessary?

Proof Key for Code Exchange (PKCE) is an extension to OAuth 2.0 designed to make authorization flows secure in public clients, such as browser-based or mobile applications, where you cannot safely store a client secret.

Here’s why PKCE matters:

  • Without PKCE: If an attacker intercepts the authorization code returned to your app, they could exchange it for an access token and impersonate the user.
  • With PKCE: Your app generates a random one-time string called a code verifier, hashes it to create a code challenge, and includes that challenge in the initial authorization request. When exchanging the authorization code for an access token, your app must present the original code verifier. The provider verifies that it matches the earlier challenge, ensuring only the legitimate client can complete the exchange.

This mechanism allows your application to securely obtain an access token without needing a backend server to safeguard a client secret. PKCE shifts the trust to short-lived, per-request secrets that never leave the client, making frontend-only integrations possible.

The @nylas/connect SDK abstracts away the entire sequence. Instead of handling PKCE code challenges, token exchanges, and grant creation manually, you can simply invoke the SDK, and it returns the grant object directly.

You’ve got a grant. Do useful things.

Fetch recent messages

Fetch recent messages

curl -X GET "https://api.us.nylas.com/v3/grants/<NYLAS_GRANT_ID>/messages" \
  -H "Authorization: Bearer <ACCESS_TOKEN>"

Send an email

Send an email

curl -X POST "https://api.us.nylas.com/v3/grants/<NYLAS_GRANT_ID>/messages/send" \
  -H "Authorization: Bearer <ACCESS_TOKEN>" \
  -H "Content-Type: application/json" \
  -d '{
    "to": [{ "email": "[email protected]" }],
    "subject": "Hello from Nylas Connect",
    "body": "This was sent using a freshly connected grant."
  }'

You can even send a notetaker bot!

You can even send a notetaker bot!

curl --request POST \
  --url "https://api.us.nylas.com/v3/grants/<NYLAS_GRANT_ID>/notetakers" \
  --header 'Accept: application/json, application/gzip' \
  --header 'Authorization: Bearer <NYLAS_API_KEY>' \
  --header 'Content-Type: application/json' \
  --data '{
    "join_time": 1732657774,
    "meeting_link": "https://meet.google.com/xyz-abcd-ijk",
    "meeting_settings": {
      "action_items": true,
      "action_items_settings": {
        "custom_instructions": "Only return the 5 most important action items."
      },
      "audio_recording": true,
      "summary": true,
      "summary_settings": {
        "custom_instructions": "Return this summary in the MEDPIC sales methodology."
      },
      "transcription": true,
      "video_recording": true
    },
    "name": "Nylas Notetaker"
  }'

When should you use @nylas/connect?

  • You’re building a web app that needs email/calendar/contacts access today.
  • You want a popup‑first UX that keeps users in context.
  • You don’t want to implement PKCE, state/nonce, or code exchanges by hand.
  • You prefer a tiny, TypeScript‑friendly surface area.

(And yes, we’re exploring smoother pairings with providers like Auth0 and Supabase to streamline mixed auth + connect flows.)

Try it out

Install

npm install @nylas/connect
# or
pnpm add @nylas/connect
# or
yarn add @nylas/connect

Provision a client in the Nylas Dashboard, allowlist your redirect URI, and call await nylas.connect().

OAuth shouldn’t be the main character in your app. With @nylas/connect, going from “I need a grant” to “I have a grant”.

Check it out on GitHub and sign up for a free Nylas account to get started.

Related resources

Introducing Summaries and Action Items for the Notetaker API

Meetings should move projects forward, not create more work. Yet too often, key insights remain…

We asked 1000 SaaS users what they think about meeting recordings

TL;DR Everyone’s doubling down it. SaaS users want to see more meeting recording capabilities in…

Best meeting transcription tools for developers in 2025

Getting accurate meeting transcripts to power features and workflows in your SaaS application can take…