fix: single call to auth/user services

Author: sinedied

packages/agent-webapp/src/components/auth.ts

@@ -1,5 +1,6 @@
 import { LitElement, css, html, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { getUserInfo, AuthDetails } from '../services/auth.service.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import personSvg from '../../assets/icons/person.svg?raw';
@@ -9,15 +10,6 @@ import githubSvg from '../../assets/providers/github.svg?inline';
 
 const loginRoute = '/.auth/login';
 const logoutRoute = '/.auth/logout';
-const userDetailsRoute = '/.auth/me';
-
-export type AuthDetails = {
-  identityProvider: string;
-  userId: string;
-  userDetails: string;
-  userRoles: string[];
-  claims: { typ: string; val: string }[];
-};
 
 export type AuthComponentOptions = {
   strings: {
@@ -100,7 +92,7 @@ export class AuthComponent extends LitElement {
 
   constructor() {
     super();
-    this.getUserInfo().then((userDetails) => {
+    getUserInfo().then((userDetails) => {
       this._userDetails = userDetails;
       this.loaded = true;
     });
@@ -116,12 +108,6 @@ export class AuthComponent extends LitElement {
     window.location.href = redirect;
   }
 
-  protected async getUserInfo() {
-    const response = await fetch(userDetailsRoute);
-    const payload = await response.json();
-    return payload?.clientPrincipal;
-  }
-
   protected renderStatus = () =>
     html`<section class="auth-status">
       <span class="login-icon">${unsafeSVG(personSvg)}</span>

packages/agent-webapp/src/components/user-card.ts

@@ -2,6 +2,7 @@ import { LitElement, css, html, nothing } from 'lit';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { customElement, state } from 'lit/decorators.js';
 import { getUserInfo } from '../services/auth.service.js';
+import { getUserId } from '../services/user.service.js';
 import copySvg from '../../assets/icons/copy.svg?raw';
 import burgerOutlineSvg from '../../assets/icons/burger-outline.svg?raw';
 import cardSvg from '../../assets/icons/card.svg?raw';
@@ -115,12 +116,10 @@ export class UserCard extends LitElement {
       const authDetails = await getUserInfo();
       if (!authDetails) return;
       this.username = authDetails.userDetails;
-
-      const response = await fetch(`/api/me`);
-      if (!response.ok) {
-        throw new Error('An error occurred while fetching the user ID');
+      const id = await getUserId();
+      if (!id) {
+        throw new Error('Unable to retrieve user ID');
       }
-      const { id } = await response.json();
       this.userId = id;
     } catch (error) {
       console.error('Error fetching user ID:', error);

packages/agent-webapp/src/services/auth.service.ts

@@ -7,14 +7,18 @@ export type AuthDetails = {
 };
 
 const userDetailsRoute = '/.auth/me';
-let authDetails: AuthDetails | undefined;
+let authDetailsPromise: Promise<AuthDetails | undefined> | undefined;
 
 export async function getUserInfo(refresh = false): Promise<AuthDetails | undefined> {
-  if (authDetails && !refresh) {
-    return authDetails;
+  if (!refresh && authDetailsPromise) {
+    return authDetailsPromise;
   }
-  const response = await fetch(userDetailsRoute);
-  const payload = await response.json();
-  authDetails = payload?.clientPrincipal;
-  return authDetails;
+
+  authDetailsPromise = (async () => {
+    const response = await fetch(userDetailsRoute);
+    const payload = await response.json();
+    return payload?.clientPrincipal;
+  })();
+
+  return authDetailsPromise;
 }

packages/agent-webapp/src/services/user.service.ts

@@ -1,20 +1,25 @@
+import { ChatComponent } from "../components/chat";
+import { HistoryComponent } from "../components/history";
+
+// Chat and History components are defined in index.html
+// with their respective ids so we can access them here
 declare global {
   interface Window {
-    chatHistory: any;
-    chat: any;
+    chatHistory: HistoryComponent;
+    chat: ChatComponent;
   }
 }
 
-let userId: string | undefined;
+let userIdPromise: Promise<string | undefined> | undefined;
 
 export async function getUserId(refresh = false): Promise<string | undefined> {
-  if (userId && !refresh) {
-    return userId;
-  }
-  const response = await fetch(`/api/me`);
-  const payload = await response.json();
-  userId = payload?.id;
-  return userId;
+  if (!refresh && userIdPromise) return userIdPromise;
+  userIdPromise = (async () => {
+    const response = await fetch(`/api/me`);
+    const payload = await response.json();
+    return payload?.id;
+  })();
+  return userIdPromise;
 }
 
 export async function initUserSession() {
@@ -27,7 +32,7 @@ export async function initUserSession() {
     // Set up user ID for chat history and chat components
     window.chatHistory.userId = userId;
     window.chatHistory.addEventListener('loadSession', (e) => {
-      const { id, messages } = e.detail;
+      const { id, messages } = (e as CustomEvent).detail;
       window.chat.sessionId = id;
       window.chat.messages = messages;
     });