From 178278235ee1278b2dcb768ff8e6a5c6ac666800 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 17 Sep 2024 12:47:33 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20login=20and=20logout=20fr?=
 =?UTF-8?q?om=20Posthog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Following Posthog documentation, login and logout users directly
from the client. Note: Logout function should be encapsulate in
a proper function.
---
 src/frontend/src/features/auth/api/useUser.tsx | 8 ++++++++
 src/frontend/src/layout/Header.tsx             | 2 ++
 2 files changed, 10 insertions(+)

diff --git a/src/frontend/src/features/auth/api/useUser.tsx b/src/frontend/src/features/auth/api/useUser.tsx
index fb09cd7c..0f4bd716 100644
--- a/src/frontend/src/features/auth/api/useUser.tsx
+++ b/src/frontend/src/features/auth/api/useUser.tsx
@@ -2,6 +2,8 @@ import { useQuery } from '@tanstack/react-query'
 import { keys } from '@/api/queryKeys'
 import { fetchUser } from './fetchUser'
 import { type ApiUser } from './ApiUser'
+import { useEffect } from 'react'
+import posthog from 'posthog-js'
 
 /**
  * returns info about currently logged in user
@@ -15,6 +17,12 @@ export const useUser = () => {
     staleTime: 1000 * 60 * 60, // 1 hour
   })
 
+  useEffect(() => {
+    if (query.data && query.data.id && !posthog._isIdentified()) {
+      posthog.identify('query.data.id', { email: query.data.email })
+    }
+  }, [query.data])
+
   const isLoggedIn =
     query.status === 'success' ? query.data !== false : undefined
   const isLoggedOut = isLoggedIn === false
diff --git a/src/frontend/src/layout/Header.tsx b/src/frontend/src/layout/Header.tsx
index 2fe8348d..04fd0dfa 100644
--- a/src/frontend/src/layout/Header.tsx
+++ b/src/frontend/src/layout/Header.tsx
@@ -9,6 +9,7 @@ import { useMatchesRoute } from '@/navigation/useMatchesRoute'
 import { Feedback } from '@/components/Feedback'
 import { Menu } from '@/primitives/Menu'
 import { MenuList } from '@/primitives/MenuList'
+import posthog from 'posthog-js'
 
 export const Header = () => {
   const { t } = useTranslation()
@@ -79,6 +80,7 @@ export const Header = () => {
                   items={[{ value: 'logout', label: t('logout') }]}
                   onAction={(value) => {
                     if (value === 'logout') {
+                      posthog.reset()
                       window.location.href = logoutUrl()
                     }
                   }}