From 2a374057f59bc94240d9a2ddc3434478e2f3dfac Mon Sep 17 00:00:00 2001
From: Reinoud Kruithof <2184455+reinoudk@users.noreply.github.com>
Date: Thu, 16 Dec 2021 16:49:59 +0100
Subject: [PATCH] fix(user-settings): use non-deprecated IdentityApi methods

This fixes the undefined identity error that is being thrown on the user-settings page.

Signed-off-by: Reinoud Kruithof <2184455+reinoudk@users.noreply.github.com>
---
 .changeset/cuddly-suns-sit.md                 |  5 +++
 .../src/components/useUserProfileInfo.ts      | 31 ++++++++++++++++---
 2 files changed, 32 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/cuddly-suns-sit.md

diff --git a/.changeset/cuddly-suns-sit.md b/.changeset/cuddly-suns-sit.md
new file mode 100644
index 0000000000..f1fe16add6
--- /dev/null
+++ b/.changeset/cuddly-suns-sit.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-user-settings': patch
+---
+
+Fix undefined identity bug in UserSettingsProfileCard caused by using deprecated methods of the IdentityApi
diff --git a/plugins/user-settings/src/components/useUserProfileInfo.ts b/plugins/user-settings/src/components/useUserProfileInfo.ts
index 336ea34ee4..075dead332 100644
--- a/plugins/user-settings/src/components/useUserProfileInfo.ts
+++ b/plugins/user-settings/src/components/useUserProfileInfo.ts
@@ -14,13 +14,36 @@
  * limitations under the License.
  */
 
-import { useApi, identityApiRef } from '@backstage/core-plugin-api';
+import {
+  useApi,
+  identityApiRef,
+  BackstageUserIdentity,
+  ProfileInfo,
+} from '@backstage/core-plugin-api';
+import { useEffect, useState } from 'react';
 
 export const useUserProfile = () => {
   const identityApi = useApi(identityApiRef);
-  const userId = identityApi.getUserId();
-  const profile = identityApi.getProfile();
-  const displayName = profile.displayName ?? userId;
+
+  const [displayName, setDisplayName] = useState<
+    string | BackstageUserIdentity
+  >('');
+  const [profile, setProfile] = useState<ProfileInfo>({});
+
+  const getUserProfile = async () => {
+    const backstageIdentity = await identityApi.getBackstageIdentity();
+    const profileInfo = await identityApi.getProfileInfo();
+    const name = profileInfo.displayName ?? backstageIdentity;
+
+    setDisplayName(name);
+    setProfile(profileInfo);
+  };
+
+  useEffect(() => {
+    if (!displayName) {
+      getUserProfile();
+    }
+  });
 
   return { profile, displayName };
 };