@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:
In short: you get the ergonomics of a normal JavaScript API while acknowledging — and hiding — the messy bits of OAuth.
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
Grant
{
"idToken": "...",
"grantId": "...",
"grantInfo": { "name": "Alex Johnson", ... }
}
No redirect routes, verifier/challenge generation, or token juggling in your codebase.
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.
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:
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.
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
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!
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"
}'
(And yes, we’re exploring smoother pairings with providers like Auth0 and Supabase to streamline mixed auth + connect flows.)
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.