Show signed-in email in auth popup

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## v3.0.2 (Jan. 22, 2025)
+
+- [#155](https://github.com/Shopify/shopify-theme-inspector/pull/155) Fix user name display
+
 ## v3.0.1 (Jan. 22, 2025)
 
 - [#154](https://github.com/Shopify/shopify-theme-inspector/pull/154) Better error handling when the store can't be profiled

src/background.ts

@@ -121,8 +121,9 @@ chrome.runtime.onMessage.addListener((message: ChromeMessage, sender, sendRespon
       getOauth2Client(message.origin)
         .getUserInfo()
         .then(userInfo => {
-          const name = userInfo.given_name;
-          sendResponse({name});
+          const name = userInfo.name;
+          const nickname = userInfo.nickname;
+          sendResponse({name: name, nickname: nickname});
         })
         .catch(error => {
           sendResponse({error});

src/popup.ts

@@ -21,8 +21,9 @@ async function setSignedInPopup() {
   if (popupSignedIn) popupSignedIn.classList.remove('hide');
   if (popupSignIn) popupSignIn.classList.add('hide');
 
-  const name = await getUserName();
-  popupSignedInPrompt!.textContent = `${name}`;
+  const { name, nickname } = await getUserName();
+  const displayText = nickname ? `${name} (${nickname})` : name;
+  popupSignedInPrompt!.textContent = displayText;
 }
 
 function setSignInPopup() {
@@ -94,7 +95,7 @@ if (signOutButton) {
   });
 }
 
-async function getUserName(): Promise<string> {
+async function getUserName(): Promise<{ name: string; nickname?: string }> {
   const {origin} = await getActiveTabURL();
   return chrome.runtime.sendMessage({
     type: 'request-user-name',
@@ -103,7 +104,10 @@ async function getUserName(): Promise<string> {
     if (response?.error) {
       throw new Error(response.error);
     }
-    return response.name || '';
+    return {
+      name: response.name || '',
+      nickname: response.nickname
+    };
   });
 }
 

src/types/UserInfo.d.ts

@@ -1,4 +1,5 @@
 export interface UserInfo {
+  nickname: any;
   email: string;
   email_verified: boolean;
   family_name: string;

src/types/messages.ts

@@ -48,6 +48,7 @@ export interface AuthResponse {
 
 export interface UserNameResponse {
   name?: string;
+  nickname?: string;
   error?: string;
 }