diff --git a/.changeset/tiny-lions-watch.md b/.changeset/tiny-lions-watch.md new file mode 100644 index 0000000000..e23ba791f9 --- /dev/null +++ b/.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. diff --git a/packages/core-components/src/layout/SignInPage/SignInPage.tsx b/packages/core-components/src/layout/SignInPage/SignInPage.tsx index d9617c5c4b..24de4d4647 100644 --- a/packages/core-components/src/layout/SignInPage/SignInPage.tsx +++ b/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(); @@ -167,6 +169,7 @@ export const SingleSignInPage = ({ profile, }), ); + analytics.captureEvent('signIn', 'success'); } catch (err: any) { // User closed the sign-in modal setError(err); diff --git a/packages/core-components/src/layout/SignInPage/providers.tsx b/packages/core-components/src/layout/SignInPage/providers.tsx index 179c7a4542..e9e43e9c7e 100644 --- a/packages/core-components/src/layout/SignInPage/providers.tsx +++ b/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 diff --git a/plugins/user-settings/src/components/General/UserSettingsMenu.tsx b/plugins/user-settings/src/components/General/UserSettingsMenu.tsx index 6fb55896e9..dc954e862f 100644 --- a/plugins/user-settings/src/components/General/UserSettingsMenu.tsx +++ b/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); const { t } = useTranslationRef(userSettingsTranslationRef); + const analytics = useAnalytics(); const handleOpen = (event: MouseEvent) => { setAnchorEl(event.currentTarget); @@ -59,9 +61,10 @@ export const UserSettingsMenu = () => { - identityApi.signOut().catch(error => errorApi.post(error)) - } + onClick={() => { + identityApi.signOut().catch(error => errorApi.post(error)); + analytics.captureEvent('signOut', 'success'); + }} >