feat: added analytics on auth

Signed-off-by: gaurav <gaurav@smallest.ai>

packages/core-components/src/layout/SignInPage/SignInPage.tsx

@@ -18,6 +18,7 @@ import {
   BackstageIdentityResponse,
   configApiRef,
   SignInPageProps,
+  useAnalytics,
   useApi,
 } from '@backstage/core-plugin-api';
 import { UserIdentity } from './UserIdentity';
@@ -116,6 +117,7 @@ export const SingleSignInPage = ({
   const authApi = useApi(provider.apiRef);
   const configApi = useApi(configApiRef);
   const { t } = useTranslationRef(coreComponentsTranslationRef);
+  const analytics = useAnalytics();
 
   const [error, setError] = useState<Error>();
 
@@ -167,6 +169,11 @@ export const SingleSignInPage = ({
           profile,
         }),
       );
+      analytics.captureEvent('signIn', 'success', {
+        attributes: {
+          userEntityRef: identityResponse.identity.userEntityRef,
+        },
+      });
     } catch (err: any) {
       // User closed the sign-in modal
       setError(err);

packages/core-components/src/layout/SignInPage/providers.tsx

@@ -21,6 +21,7 @@ import {
   useApiHolder,
   errorApiRef,
   IdentityApi,
+  useAnalytics,
 } from '@backstage/core-plugin-api';
 import {
   IdentityProviders,
@@ -92,6 +93,7 @@ export const useSignInProviders = (
   const errorApi = useApi(errorApiRef);
   const apiHolder = useApiHolder();
   const [loading, setLoading] = useState(true);
+  const analytics = useAnalytics();
 
   const { t } = useTranslationRef(coreComponentsTranslationRef);
   // User was redirected back to sign in page with error from auth redirect flow
@@ -108,7 +110,7 @@ export const useSignInProviders = (
 
   // This decorates the result with sign out logic from this hook
   const handleWrappedResult = useCallback(
-    (identityApi: IdentityApi) => {
+    async (identityApi: IdentityApi) => {
       onSignInSuccess(
         IdentityApiSignOutProxy.from({
           identityApi,
@@ -118,8 +120,14 @@ export const useSignInProviders = (
           },
         }),
       );
+      const identityResponse = await identityApi.getBackstageIdentity();
+      analytics.captureEvent('signIn', 'success', {
+        attributes: {
+          userEntityRef: identityResponse.userEntityRef,
+        },
+      });
     },
-    [onSignInSuccess],
+    [onSignInSuccess, analytics],
   );
 
   // In this effect we check if the user has already selected an existing login

plugins/user-settings/src/components/General/UserSettingsMenu.tsx

@@ -25,6 +25,7 @@ import {
   identityApiRef,
   errorApiRef,
   useApi,
+  useAnalytics,
 } from '@backstage/core-plugin-api';
 import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import { userSettingsTranslationRef } from '../../translation';
@@ -36,6 +37,7 @@ export const UserSettingsMenu = () => {
   const [open, setOpen] = useState(false);
   const [anchorEl, setAnchorEl] = useState<undefined | HTMLElement>(undefined);
   const { t } = useTranslationRef(userSettingsTranslationRef);
+  const analytics = useAnalytics();
 
   const handleOpen = (event: MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
@@ -59,9 +61,16 @@ export const UserSettingsMenu = () => {
       <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
         <MenuItem
           data-testid="sign-out"
-          onClick={() =>
-            identityApi.signOut().catch(error => errorApi.post(error))
-          }
+          onClick={() => {
+            identityApi.signOut().catch(error => errorApi.post(error));
+            identityApi.getBackstageIdentity().then(identity => {
+              analytics.captureEvent('signOut', 'success', {
+                attributes: {
+                  userEntityRef: identity.userEntityRef,
+                },
+              });
+            });
+          }}
         >
           <ListItemIcon>
             <SignOutIcon />