Merge pull request backstage#30178 from krakenftw/feat/analytics-on-auth

feat: added analytics on auth

Author: benjdlambert

.changeset/tiny-lions-watch.md

@@ -0,0 +1,6 @@
+---
+'@backstage/core-components': patch
+'@backstage/plugin-user-settings': patch
+---
+
+Added `signIn` and `signOut` analytic events to the `@backstage/core-components` of sign in and sign out.

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,7 @@ export const SingleSignInPage = ({
           profile,
         }),
       );
+      analytics.captureEvent('signIn', 'success');
     } 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,18 +110,20 @@ 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,
           signOut: async () => {
             localStorage.removeItem(PROVIDER_STORAGE_KEY);
             await identityApi.signOut?.();
+            analytics.captureEvent('signOut', 'success');
           },
         }),
       );
+      analytics.captureEvent('signIn', 'success');
     },
-    [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,10 @@ 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));
+            analytics.captureEvent('signOut', 'success');
+          }}
         >
           <ListItemIcon>
             <SignOutIcon />