From b74d9d3da5efc48b5d451d516e843d2694196665 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vuka=C5=A1in=20Stepanovi=C4=87?=
 <vukasinstepanovic@gmail.com>
Date: Fri, 4 Oct 2024 08:38:56 +0000
Subject: [PATCH 1/2] fix(htmlpanel) Properly reeinitialize session when user
 ID changes

---
 example/App.tsx |  7 +------
 lib/Session.tsx | 28 ++++++++++++++++++++--------
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/example/App.tsx b/example/App.tsx
index 5fedb37..e8a366a 100644
--- a/example/App.tsx
+++ b/example/App.tsx
@@ -60,11 +60,6 @@ function App() {
     setConvId(convIds[nextConv]);
   }, [convId]);
 
-  const createUser = useCallback(() => {
-    console.log("createUser");
-    return new Talk.User(me);
-  }, [me]);
-
   const createConv = useCallback(
     (session: Talk.Session) => {
       console.log("createConv");
@@ -141,7 +136,7 @@ function App() {
     <>
       <Session
         appId={import.meta.env.VITE_APP_ID}
-        syncUser={createUser}
+        syncUser={() => new Talk.User(me)}
         onBrowserPermissionNeeded={onPerm}
         onUnreadsChange={onUnreads}
         sessionRef={sessionRef}
diff --git a/lib/Session.tsx b/lib/Session.tsx
index 3c16be0..48d7c5d 100644
--- a/lib/Session.tsx
+++ b/lib/Session.tsx
@@ -39,14 +39,21 @@ export function Session(props: SessionProps) {
     Talk.ready.then(() => markReady(true));
   }, []);
 
-  useEffect(() => {
-    if (ready) {
-      const me =
-        typeof syncUser === "function"
-          ? syncUser()
-          : syncUser ?? new Talk.User(userId);
+  const me = ready
+    ? typeof syncUser === "function"
+      ? syncUser()
+      : syncUser ?? new Talk.User(userId)
+    : null;
 
-      const session = new Talk.Session({ appId, me, token, tokenFetcher, signature });
+  useEffect(() => {
+    if (me) {
+      const session = new Talk.Session({
+        appId,
+        me,
+        token,
+        tokenFetcher,
+        signature,
+      });
       setSession(session);
       if (sessionRef) {
         sessionRef.current = session;
@@ -65,7 +72,12 @@ export function Session(props: SessionProps) {
         }
       };
     }
-  }, [ready, signature, appId, userId, syncUser, sessionRef]);
+    // We intentionally add `me?.id` to the dependency array here instead of
+    // just `me`, because `me` is an object so a shallow comparison will always
+    // return `false`.
+    //
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ready, signature, appId, userId, me?.id, sessionRef]);
 
   useMethod(
     session,

From 92231d78d1afd4398646d9c26278921e2590f06d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vuka=C5=A1in=20Stepanovi=C4=87?=
 <vukasinstepanovic@gmail.com>
Date: Fri, 4 Oct 2024 08:39:11 +0000
Subject: [PATCH 2/2] fix(htmlpanel) Reinitialize session when auth params
 change

---
 lib/Session.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/lib/Session.tsx b/lib/Session.tsx
index 48d7c5d..51af3ef 100644
--- a/lib/Session.tsx
+++ b/lib/Session.tsx
@@ -77,7 +77,16 @@ export function Session(props: SessionProps) {
     // return `false`.
     //
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ready, signature, appId, userId, me?.id, sessionRef]);
+  }, [
+    ready,
+    signature,
+    appId,
+    userId,
+    me?.id,
+    token,
+    tokenFetcher,
+    sessionRef,
+  ]);
 
   useMethod(
     session,