fix: display nango connection email addresses in account settings

apps/api/openapi.gen.json

@@ -406,6 +406,37 @@
         }
       }
     },
+    "/nango/whoami": {
+      "get": {
+        "tags": [
+          "nango"
+        ],
+        "operationId": "whoami",
+        "responses": {
+          "200": {
+            "description": "User info for all connections",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/WhoAmIResponse"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Unauthorized"
+          },
+          "500": {
+            "description": "Internal server error"
+          }
+        },
+        "security": [
+          {
+            "bearer_auth": []
+          }
+        ]
+      }
+    },
     "/stt/listen": {
       "get": {
         "tags": [
@@ -3643,6 +3674,53 @@
           "unknown"
         ]
       },
+      "WhoAmIItem": {
+        "type": "object",
+        "required": [
+          "integration_id",
+          "connection_id"
+        ],
+        "properties": {
+          "connection_id": {
+            "type": "string"
+          },
+          "display_name": {
+            "type": [
+              "string",
+              "null"
+            ]
+          },
+          "email": {
+            "type": [
+              "string",
+              "null"
+            ]
+          },
+          "error": {
+            "type": [
+              "string",
+              "null"
+            ]
+          },
+          "integration_id": {
+            "type": "string"
+          }
+        }
+      },
+      "WhoAmIResponse": {
+        "type": "object",
+        "required": [
+          "accounts"
+        ],
+        "properties": {
+          "accounts": {
+            "type": "array",
+            "items": {
+              "$ref": "#/components/schemas/WhoAmIItem"
+            }
+          }
+        }
+      },
       "WorkingLocationProperties": {
         "type": "object",
         "properties": {

apps/web/src/hooks/use-whoami.ts

@@ -0,0 +1,39 @@
+import { useQuery } from "@tanstack/react-query";
+import { jwtDecode } from "jwt-decode";
+
+import { whoami } from "@hypr/api-client";
+import { createClient } from "@hypr/api-client/client";
+
+import { env } from "@/env";
+import { getAccessToken } from "@/functions/access-token";
+
+export function useWhoAmI(enabled = true) {
+  const authQuery = useQuery({
+    queryKey: ["integration-status", "auth"],
+    queryFn: async () => {
+      const token = await getAccessToken();
+      return {
+        token,
+        userId: jwtDecode<{ sub: string }>(token).sub,
+      };
+    },
+    retry: false,
+    enabled,
+  });
+
+  return useQuery({
+    queryKey: ["whoami", authQuery.data?.userId],
+    enabled: enabled && !!authQuery.data?.userId,
+    queryFn: async () => {
+      const client = createClient({
+        baseUrl: env.VITE_API_URL,
+        headers: { Authorization: `Bearer ${authQuery.data?.token}` },
+      });
+      const { data, error } = await whoami({ client });
+      if (error) {
+        throw new Error("Failed to load account info");
+      }
+      return data?.accounts ?? [];
+    },
+  });
+}

apps/web/src/routes/_view/app/-account-integrations.tsx

@@ -1,7 +1,7 @@
 import { Link, useNavigate } from "@tanstack/react-router";
 import { ChevronDown, PlusIcon } from "lucide-react";
 
-import type { ConnectionItem } from "@hypr/api-client";
+import type { ConnectionItem, WhoAmIItem } from "@hypr/api-client";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -11,6 +11,7 @@ import {
 
 import { useBilling } from "@/hooks/use-billing";
 import { useConnections } from "@/hooks/use-connections";
+import { useWhoAmI } from "@/hooks/use-whoami";
 
 const INTEGRATIONS = [
   { id: "google-calendar", name: "Google Calendar" },
@@ -20,11 +21,16 @@ export function IntegrationsSettingsCard() {
   const navigate = useNavigate();
   const { isPro } = useBilling();
   const { data: connections, isLoading } = useConnections(isPro);
+  const { data: accounts } = useWhoAmI(isPro);
 
   const getProviderConnections = (integrationId: string) => {
     return connections?.filter((c) => c.integration_id === integrationId) ?? [];
   };
 
+  const getAccountInfo = (connectionId: string) => {
+    return accounts?.find((a) => a.connection_id === connectionId);
+  };
+
   return (
     <div className="rounded-xs border border-neutral-100">
       <div className="p-4">
@@ -86,6 +92,7 @@ export function IntegrationsSettingsCard() {
                     key={connection.connection_id}
                     connection={connection}
                     integrationId={integration.id}
+                    account={getAccountInfo(connection.connection_id)}
                   />
                 ))}
               </div>
@@ -100,12 +107,16 @@ export function IntegrationsSettingsCard() {
 function ConnectionRow({
   connection,
   integrationId,
+  account,
 }: {
   connection: ConnectionItem;
   integrationId: string;
+  account?: WhoAmIItem;
 }) {
   const navigate = useNavigate();
   const isReconnectRequired = connection.status === "reconnect_required";
+  const displayLabel =
+    account?.email ?? account?.display_name ?? connection.connection_id;
 
   return (
     <div className="flex items-center justify-between rounded-md border border-neutral-100 px-3 py-2">
@@ -116,9 +127,7 @@ function ConnectionRow({
             isReconnectRequired ? "bg-amber-500" : "bg-green-500",
           ].join(" ")}
         />
-        <span className="text-xs text-neutral-700">
-          {connection.connection_id}
-        </span>
+        <span className="text-xs text-neutral-700">{displayLabel}</span>
         {isReconnectRequired && (
           <span className="text-xs text-amber-600">Reconnect required</span>
         )}

crates/api-client/openapi.gen.json

@@ -1625,6 +1625,47 @@
         ],
         "type": "string"
       },
+      "WhoAmIItem": {
+        "properties": {
+          "connection_id": {
+            "type": "string"
+          },
+          "display_name": {
+            "nullable": true,
+            "type": "string"
+          },
+          "email": {
+            "nullable": true,
+            "type": "string"
+          },
+          "error": {
+            "nullable": true,
+            "type": "string"
+          },
+          "integration_id": {
+            "type": "string"
+          }
+        },
+        "required": [
+          "integration_id",
+          "connection_id"
+        ],
+        "type": "object"
+      },
+      "WhoAmIResponse": {
+        "properties": {
+          "accounts": {
+            "items": {
+              "$ref": "#/components/schemas/WhoAmIItem"
+            },
+            "type": "array"
+          }
+        },
+        "required": [
+          "accounts"
+        ],
+        "type": "object"
+      },
       "WorkingLocationProperties": {
         "properties": {
           "customLocation": {
@@ -2587,6 +2628,37 @@
         ]
       }
     },
+    "/nango/whoami": {
+      "get": {
+        "operationId": "whoami",
+        "responses": {
+          "200": {
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/WhoAmIResponse"
+                }
+              }
+            },
+            "description": "User info for all connections"
+          },
+          "401": {
+            "description": "Unauthorized"
+          },
+          "500": {
+            "description": "Internal server error"
+          }
+        },
+        "security": [
+          {
+            "bearer_auth": []
+          }
+        ],
+        "tags": [
+          "nango"
+        ]
+      }
+    },
     "/subscription/can-start-trial": {
       "get": {
         "operationId": "can_start_trial",

crates/api-nango/Cargo.toml

@@ -14,6 +14,7 @@ urlencoding = { workspace = true }
 utoipa = { workspace = true }
 
 axum = { workspace = true }
+futures-util = { workspace = true }
 reqwest = { workspace = true, features = ["json"] }
 sentry = { workspace = true }
 tokio = { workspace = true }

crates/api-nango/src/openapi.rs

@@ -2,7 +2,8 @@ use utoipa::OpenApi;
 
 use crate::routes::{
     ConnectionItem, CreateSessionRequest, DeleteConnectionRequest, DeleteConnectionResponse,
-    ListConnectionsResponse, SessionMode, SessionResponse, WebhookResponse,
+    ListConnectionsResponse, SessionMode, SessionResponse, WebhookResponse, WhoAmIItem,
+    WhoAmIResponse,
 };
 
 #[derive(OpenApi)]
@@ -12,6 +13,7 @@ use crate::routes::{
         crate::routes::disconnect::delete_connection,
         crate::routes::status::list_connections,
         crate::routes::webhook::nango_webhook,
+        crate::routes::whoami::whoami,
     ),
     components(
         schemas(
@@ -23,6 +25,8 @@ use crate::routes::{
             ConnectionItem,
             ListConnectionsResponse,
             WebhookResponse,
+            WhoAmIItem,
+            WhoAmIResponse,
         )
     ),
     tags(

crates/api-nango/src/routes/mod.rs

@@ -2,6 +2,7 @@ pub(crate) mod connect;
 pub(crate) mod disconnect;
 pub(crate) mod status;
 pub(crate) mod webhook;
+pub(crate) mod whoami;
 
 use axum::{
     Router,
@@ -15,6 +16,7 @@ pub use connect::{CreateSessionRequest, SessionMode, SessionResponse};
 pub use disconnect::{DeleteConnectionRequest, DeleteConnectionResponse};
 pub use status::{ConnectionItem, ListConnectionsResponse};
 pub use webhook::WebhookResponse;
+pub use whoami::{WhoAmIItem, WhoAmIResponse};
 
 pub fn router(config: NangoConfig) -> Router {
     let state = AppState::new(config);
@@ -25,6 +27,7 @@ pub fn router(config: NangoConfig) -> Router {
             "/connections",
             get(status::list_connections).delete(disconnect::delete_connection),
         )
+        .route("/whoami", get(whoami::whoami))
         .with_state(state)
 }