From c0faa4420cdeb6529c9d4f7be032909dcc4d4265 Mon Sep 17 00:00:00 2001
From: Nick Barraclough <66260480+nbarraclough@users.noreply.github.com>
Date: Thu, 18 Dec 2025 12:47:13 -0700
Subject: [PATCH] some basic changes to demo @nylas/connect

- cleaned up styling
- button on the homepage to click
- takes you through connect auth (just uses Nylas Applets (US) app)
- returns access token, grant id, etc after auth
---
 package.json                            |   3 +-
 packages/nylas-connect/app.js           | 104 ++++++++++++++++++++
 packages/nylas-connect/auth-instance.js |   4 +-
 packages/nylas-connect/index.html       |  35 +++----
 packages/nylas-connect/package.json     |   4 +-
 packages/nylas-connect/styles.css       | 124 ++++++++++++++++++++++++
 packages/react/package.json             |   4 +-
 pnpm-lock.yaml                          |   3 +
 8 files changed, 253 insertions(+), 28 deletions(-)
 create mode 100644 packages/nylas-connect/app.js
 create mode 100644 packages/nylas-connect/styles.css

diff --git a/package.json b/package.json
index 2b975b0..e33d3ea 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
     "husky": "^8.0.3",
     "nx": "21.5.2",
     "oxlint": "^1.16.0",
-    "prettier": "^3.4.2"
+    "prettier": "^3.4.2",
+    "typescript": "^5.3.3"
   }
 }
diff --git a/packages/nylas-connect/app.js b/packages/nylas-connect/app.js
new file mode 100644
index 0000000..78b2041
--- /dev/null
+++ b/packages/nylas-connect/app.js
@@ -0,0 +1,104 @@
+import { auth } from "./auth-instance.js";
+
+const connectButton = document.getElementById("connectButton");
+const resultContainer = document.getElementById("resultContainer");
+const resultContent = document.getElementById("resultContent");
+
+connectButton.addEventListener("click", async () => {
+  // Disable button and show loading state
+  connectButton.disabled = true;
+  connectButton.textContent = "Connecting...";
+  resultContainer.classList.remove("show");
+  resultContent.innerHTML =
+    '<p class="loading">Opening authentication window...</p>';
+
+  try {
+    const result = await auth.connect({ method: "popup" });
+
+    // Display the result
+    displayResult(result);
+  } catch (error) {
+    // Display error
+    displayError(error);
+  } finally {
+    // Re-enable button
+    connectButton.disabled = false;
+    connectButton.textContent = "Connect your inbox";
+  }
+});
+
+function displayResult(result) {
+  const expiresAt = new Date(result.expiresAt);
+  const expiresIn = Math.floor((result.expiresAt - Date.now()) / 1000 / 60);
+
+  let html = '<span class="success-badge">✓ Authentication Successful</span>';
+  html += "<h2>Connection Details</h2>";
+
+  // Access Token
+  html += '<div class="result-section">';
+  html += '<div class="result-label">Access Token</div>';
+  html += `<div class="result-value token-value">${escapeHtml(result.accessToken)}</div>`;
+  html += "</div>";
+
+  // Grant ID
+  html += '<div class="result-section">';
+  html += '<div class="result-label">Grant ID</div>';
+  html += `<div class="result-value">${escapeHtml(result.grantId)}</div>`;
+  html += "</div>";
+
+  // Grant Info (if available)
+  if (result.grantInfo) {
+    if (result.grantInfo.email) {
+      html += '<div class="result-section">';
+      html += '<div class="result-label">Email</div>';
+      html += `<div class="result-value">${escapeHtml(result.grantInfo.email)}</div>`;
+      html += "</div>";
+    }
+
+    if (result.grantInfo.provider) {
+      html += '<div class="result-section">';
+      html += '<div class="result-label">Provider</div>';
+      html += `<div class="result-value">${escapeHtml(result.grantInfo.provider)}</div>`;
+      html += "</div>";
+    }
+
+    if (result.grantInfo.name) {
+      html += '<div class="result-section">';
+      html += '<div class="result-label">Name</div>';
+      html += `<div class="result-value">${escapeHtml(result.grantInfo.name)}</div>`;
+      html += "</div>";
+    }
+  }
+
+  // Scopes
+  html += '<div class="result-section">';
+  html += '<div class="result-label">Granted Scopes</div>';
+  html += `<div class="result-value">${escapeHtml(result.scope)}</div>`;
+  html += "</div>";
+
+  // Expiration
+  html += '<div class="result-section">';
+  html += '<div class="result-label">Expires</div>';
+  html += `<div class="result-value">${expiresAt.toLocaleString()} (in ${expiresIn} minutes)</div>`;
+  html += "</div>";
+
+  resultContent.innerHTML = html;
+  resultContainer.classList.add("show");
+}
+
+function displayError(error) {
+  const errorMessage = error instanceof Error ? error.message : String(error);
+  resultContent.innerHTML = `
+    <div class="error-message">
+      <strong>Authentication Error:</strong><br>
+      ${escapeHtml(errorMessage)}
+    </div>
+  `;
+  resultContainer.classList.add("show");
+}
+
+function escapeHtml(text) {
+  const div = document.createElement("div");
+  div.textContent = text;
+  return div.innerHTML;
+}
diff --git a/packages/nylas-connect/auth-instance.js b/packages/nylas-connect/auth-instance.js
index 7111985..eaf21f8 100644
--- a/packages/nylas-connect/auth-instance.js
+++ b/packages/nylas-connect/auth-instance.js
@@ -2,8 +2,8 @@ import { NylasConnect } from "./src/index.ts";
 
 // Shared auth configuration
 export const auth = new NylasConnect({
-  clientId: "3531f8b3-3d7f-4412-a073-2d4aa397508f",
-  apiUrl: "https://api-staging.us.nylas.com/v3",
+  clientId: "09e06084-b8a4-483c-92e2-07985e0d0489",
+  apiUrl: "https://api.us.nylas.com/v3",
   redirectUri:
     (globalThis.window?.location?.origin || "http://localhost:3000") +
     "/callback.html",
diff --git a/packages/nylas-connect/index.html b/packages/nylas-connect/index.html
index c70b2f2..952f968 100644
--- a/packages/nylas-connect/index.html
+++ b/packages/nylas-connect/index.html
@@ -4,28 +4,21 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Nylas Auth - Development</title>
-    <style>
-      body {
-        font-family:
-          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-        max-width: 800px;
-        margin: 0 auto;
-        padding: 2rem;
-        background: #f8f9fa;
-      }
-    </style>
+    <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
-    <h1>Open the console to see the output</h1>
-    <script type="module">
-      import { auth } from "./auth-instance.js";
-
-      auth.connect().then((result) => {
-        //{ method: "popup" }
-        console.group("Auth result");
-        console.log(result);
-        console.groupEnd();
-      });
-    </script>
+    <div class="demo-container">
+      <h1>Nylas Connect Demo</h1>
+      <p class="demo-description">
+        Click the button below to connect your inbox using Nylas Hosted Auth.
+      </p>
+      <button id="connectButton" class="connect-button">
+        Connect your inbox
+      </button>
+      <div id="resultContainer" class="result-container">
+        <div id="resultContent"></div>
+      </div>
+    </div>
+    <script type="module" src="./app.js"></script>
   </body>
 </html>
diff --git a/packages/nylas-connect/package.json b/packages/nylas-connect/package.json
index 27d2ab6..9218b07 100644
--- a/packages/nylas-connect/package.json
+++ b/packages/nylas-connect/package.json
@@ -18,9 +18,9 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "../../node_modules/.bin/tsc && vite build",
     "preview": "vite preview",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "../../node_modules/.bin/tsc --noEmit",
     "format": "pnpm --workspace-root prettier --write packages/nylas-connect/",
     "format:check": "pnpm --workspace-root prettier --check packages/nylas-connect/",
     "lint": "oxlint --fix . && exit 0",
diff --git a/packages/nylas-connect/styles.css b/packages/nylas-connect/styles.css
new file mode 100644
index 0000000..3066a86
--- /dev/null
+++ b/packages/nylas-connect/styles.css
@@ -0,0 +1,124 @@
+body {
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  margin: 0;
+  padding: 0;
+  background: #f8f9fa;
+  min-height: 100vh;
+}
+
+.demo-container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+h1 {
+  color: #333;
+  margin-bottom: 0.5rem;
+  font-size: 2rem;
+}
+
+.demo-description {
+  color: #64748b;
+  margin-bottom: 2rem;
+  font-size: 1rem;
+}
+
+.connect-button {
+  background: #0066ff;
+  color: white;
+  border: none;
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  font-weight: 500;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.2s;
+  margin-bottom: 2rem;
+}
+
+.connect-button:hover:not(:disabled) {
+  background: #0052cc;
+}
+
+.connect-button:disabled {
+  background: #94a3b8;
+  cursor: not-allowed;
+}
+
+.result-container {
+  display: none;
+  background: white;
+  border-radius: 8px;
+  padding: 1.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  margin-top: 2rem;
+}
+
+.result-container.show {
+  display: block;
+}
+
+.result-container h2 {
+  margin-top: 0;
+  color: #333;
+  font-size: 1.25rem;
+}
+
+.result-section {
+  margin-bottom: 1.5rem;
+}
+
+.result-section:last-child {
+  margin-bottom: 0;
+}
+
+.result-label {
+  font-weight: 600;
+  color: #64748b;
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.5rem;
+}
+
+.result-value {
+  color: #1e293b;
+  word-break: break-all;
+  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
+  font-size: 0.875rem;
+  background: #f1f5f9;
+  padding: 0.75rem;
+  border-radius: 4px;
+  border: 1px solid #e2e8f0;
+}
+
+.token-value {
+  font-size: 0.75rem;
+  line-height: 1.6;
+}
+
+.error-message {
+  background: #fee2e2;
+  color: #991b1b;
+  padding: 1rem;
+  border-radius: 6px;
+  border: 1px solid #fecaca;
+}
+
+.success-badge {
+  display: inline-block;
+  background: #d1fae5;
+  color: #065f46;
+  padding: 0.25rem 0.75rem;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin-bottom: 1rem;
+}
+
+.loading {
+  color: #64748b;
+  font-style: italic;
+}
diff --git a/packages/react/package.json b/packages/react/package.json
index 54cdbbe..421ec6b 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -4,7 +4,7 @@
   "description": "React components and hooks for Nylas API integration",
   "type": "module",
   "scripts": {
-    "build": "tsc && vite build",
+    "build": "../../node_modules/.bin/tsc && vite build",
     "test": "vitest run",
     "test:watch": "vitest",
     "format": "pnpm --workspace-root prettier --write packages/react/",
@@ -13,7 +13,7 @@
     "lint:check": "oxlint .",
     "clean": "rm -rf dist",
     "dev": "vite build --watch --emptyOutDir=false",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "../../node_modules/.bin/tsc --noEmit",
     "preview": "vite preview",
     "coverage": "vitest run --coverage",
     "docs": "typedoc"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d5ded98..24c4d62 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ importers:
       prettier:
         specifier: ^3.4.2
         version: 3.6.2
+      typescript:
+        specifier: ^5.3.3
+        version: 5.9.2
 
   packages/nylas-connect:
     devDependencies: