From 3ebfac7241af80932fd2e9298e22a52398e405bf Mon Sep 17 00:00:00 2001
From: Muniz <rcmuniz51@gmail.com>
Date: Wed, 25 Oct 2023 22:23:23 -0300
Subject: [PATCH 01/11] feat: persist device uuid in colection session

---
 src/services/firestore-auth.ts | 18 ++++++++++++++++--
 src/state/user.ts              |  6 +++++-
 src/webrtc/index.ts            |  1 +
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/services/firestore-auth.ts b/src/services/firestore-auth.ts
index 81added..d038996 100644
--- a/src/services/firestore-auth.ts
+++ b/src/services/firestore-auth.ts
@@ -8,8 +8,10 @@ import {
   signInWithRedirect,
   signOut,
 } from "firebase/auth";
-import { googleAuthProvider } from "./firestore-connection";
+import { v4 as uuidv4 } from "uuid";
+import { db, googleAuthProvider } from "./firestore-connection";
 import type { User } from "../webrtc";
+import { doc, setDoc } from "firebase/firestore";
 
 const firestoreAuth = {
   loadUser,
@@ -24,7 +26,12 @@ async function loadUser(): Promise<User> {
   return new Promise((resolve, reject) => {
     const handleResult = (user: FirebaseUser | null) => {
       if (!user) {
-        const empty: User = { uid: "", displayName: "", email: "" };
+        const empty: User = {
+          uid: "",
+          displayName: "",
+          email: "",
+          deviceUuid: "",
+        };
         resolve(empty);
         return;
       }
@@ -34,10 +41,17 @@ async function loadUser(): Promise<User> {
         return;
       }
 
+      const deviceUuid = uuidv4();
+      // Create or update the user session in collection "session"
+      setDoc(doc(db, `session/${user.uid}`), {
+        deviceUuid,
+      });
+
       resolve({
         uid: user.uid,
         displayName: user.displayName ?? user.email,
         email: user.email,
+        deviceUuid,
       });
     };
 
diff --git a/src/state/user.ts b/src/state/user.ts
index c734310..15d2bf0 100644
--- a/src/state/user.ts
+++ b/src/state/user.ts
@@ -17,6 +17,7 @@ export const userInitialState: UserState = {
   displayName: "",
   email: "",
   status: "idle",
+  deviceUuid: "",
   errorMessage: "",
 };
 
@@ -30,6 +31,7 @@ export const userSlice = createSlice({
       state.displayName = "";
       state.email = "";
       state.status = "pending";
+      state.deviceUuid = "";
       state.errorMessage = "";
     });
 
@@ -38,7 +40,8 @@ export const userSlice = createSlice({
       state.displayName = action.payload.displayName || "";
       state.email = action.payload.email || "";
       state.status = action.payload.uid ? "authenticated" : "idle";
-      state.errorMessage = "";
+      state.deviceUuid = action.payload.deviceUuid;
+      state.errorMessage = state.errorMessage = "";
     });
 
     builder.addCase(login.rejected, (state, action) => {
@@ -46,6 +49,7 @@ export const userSlice = createSlice({
       state.displayName = "";
       state.email = "";
       state.status = "error";
+      state.deviceUuid = "";
       state.errorMessage = action.error.message || "Unknown error.";
     });
 
diff --git a/src/webrtc/index.ts b/src/webrtc/index.ts
index 3052232..6eeafa2 100644
--- a/src/webrtc/index.ts
+++ b/src/webrtc/index.ts
@@ -21,6 +21,7 @@ export default {
 export interface User extends UniqueEntity {
   displayName: string;
   email: string;
+  deviceUuid: string;
 }
 
 export interface Call extends UniqueEntity {

From 77b346c505cc4fe45916ec78e96a578296162486 Mon Sep 17 00:00:00 2001
From: Muniz <rcmuniz51@gmail.com>
Date: Thu, 26 Oct 2023 00:02:51 -0300
Subject: [PATCH 02/11] feat: unlog old user session

---
 src/App.tsx                     |  2 ++
 src/hooks/useValidateSession.ts | 34 +++++++++++++++++++++++++++++++++
 src/services/firestore-auth.ts  | 33 +++++++++++++++++++++++++++++++-
 src/state/user.ts               |  1 +
 4 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 src/hooks/useValidateSession.ts

diff --git a/src/App.tsx b/src/App.tsx
index 3219ca1..9da76c8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,8 +10,10 @@ import P2PCallMain from "./features/p2p-call/P2PCallMain";
 import CallCreationMain from "./features/call-selection/CallCreationMain";
 import CallJoinMain from "./features/call-selection/CallJoinMain";
 import PendingUserMain from "./features/call-selection/PendingUserMain";
+import useValidateSession from "./hooks/useValidateSession";
 
 export default function App() {
+  useValidateSession();
   const dispatch = useAppDispatch();
 
   useEffect(() => {
diff --git a/src/hooks/useValidateSession.ts b/src/hooks/useValidateSession.ts
new file mode 100644
index 0000000..4eb4c85
--- /dev/null
+++ b/src/hooks/useValidateSession.ts
@@ -0,0 +1,34 @@
+import { useEffect } from "react";
+import { useAppDispatch, useAppSelector } from "../state";
+import { logout, selectUserDeviceUuid, selectUserUid } from "../state/user";
+import firestoreAuth from "../services/firestore-auth";
+
+export default function useValidateSession() {
+  const dispatch = useAppDispatch();
+
+  const userUid = useAppSelector(selectUserUid);
+  const userDeviceUuid = useAppSelector(selectUserDeviceUuid);
+
+  useEffect(() => {
+    if (!userDeviceUuid) {
+      return () => null;
+    }
+
+    return firestoreAuth.listenUserSession(userUid, (session) => {
+      if (!session || !session?.deviceUuid) {
+        return;
+      }
+
+      console.log(
+        "session.deviceUuid === userDeviceUuid",
+        session.deviceUuid === userDeviceUuid
+      );
+
+      if (session.deviceUuid === userDeviceUuid) {
+        return;
+      }
+
+      dispatch(logout());
+    });
+  }, [dispatch, userDeviceUuid, userUid]);
+}
diff --git a/src/services/firestore-auth.ts b/src/services/firestore-auth.ts
index d038996..bb4a332 100644
--- a/src/services/firestore-auth.ts
+++ b/src/services/firestore-auth.ts
@@ -11,12 +11,21 @@ import {
 import { v4 as uuidv4 } from "uuid";
 import { db, googleAuthProvider } from "./firestore-connection";
 import type { User } from "../webrtc";
-import { doc, setDoc } from "firebase/firestore";
+import {
+  DocumentData,
+  Unsubscribe,
+  collection,
+  doc,
+  onSnapshot,
+  query,
+  setDoc,
+} from "firebase/firestore";
 
 const firestoreAuth = {
   loadUser,
   login,
   logout,
+  listenUserSession,
 };
 
 export default firestoreAuth;
@@ -81,3 +90,25 @@ async function login(): Promise<void> {
 async function logout() {
   signOut(getAuth());
 }
+
+interface SessionResult {
+  userUid: string;
+  deviceUuid: string;
+}
+
+function listenUserSession(
+  userUid: string,
+  callback: (result?: Omit<SessionResult, "userUid">) => void
+): Unsubscribe {
+  return onSnapshot(query(collection(db, `session`)), (querySnapshot) => {
+    const sessions: SessionResult[] = [];
+
+    querySnapshot.forEach((doc: DocumentData) => {
+      sessions.push({ ...doc.data(), userUid: doc.id } as SessionResult);
+    });
+
+    const session = sessions.find((s) => s.userUid === userUid);
+
+    callback({ deviceUuid: session?.deviceUuid || "" });
+  });
+}
diff --git a/src/state/user.ts b/src/state/user.ts
index 15d2bf0..59ede61 100644
--- a/src/state/user.ts
+++ b/src/state/user.ts
@@ -91,6 +91,7 @@ export const selectUserDisplayName = (state: RootState) =>
   state.user.displayName;
 
 export const selectUserUid = (state: RootState) => state.user.uid;
+export const selectUserDeviceUuid = (state: RootState) => state.user.deviceUuid;
 
 export const selectIsUserPendingAuthentication = (state: RootState) =>
   state.user.status === "pending";

From 9b5f605f8d1e9031cc32b22b5fc5428348b6faf3 Mon Sep 17 00:00:00 2001
From: Muniz <rcmuniz51@gmail.com>
Date: Thu, 26 Oct 2023 01:10:58 -0300
Subject: [PATCH 03/11] feat: show expired session message

---
 src/features/auth/AuthMain.tsx  |  9 ++++++++-
 src/hooks/useValidateSession.ts | 13 ++++++-------
 src/state/user.ts               | 27 +++++++++++++++++++++++++++
 3 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/src/features/auth/AuthMain.tsx b/src/features/auth/AuthMain.tsx
index 74ab92a..a0703ef 100644
--- a/src/features/auth/AuthMain.tsx
+++ b/src/features/auth/AuthMain.tsx
@@ -4,7 +4,12 @@ import Typography from "@mui/material/Typography";
 import GoogleIcon from "@mui/icons-material/Google";
 import HomeTemplate from "../../components/templates/HomeTemplate";
 import { useAppDispatch, useAppSelector } from "../../state";
-import { login, selectIsUserPendingAuthentication } from "../../state/user";
+import {
+  login,
+  selectExpiredSessionMessage,
+  selectIsUserPendingAuthentication,
+} from "../../state/user";
+import ErrorAlert from "../../components/basic/ErrorAlert";
 
 export default function AuthMain() {
   const dispatch = useAppDispatch();
@@ -12,6 +17,7 @@ export default function AuthMain() {
   const handleLoginClick = () => dispatch(login());
 
   const isPending = useAppSelector(selectIsUserPendingAuthentication);
+  const expiredSessionMessage = useAppSelector(selectExpiredSessionMessage);
 
   return (
     <HomeTemplate>
@@ -26,6 +32,7 @@ export default function AuthMain() {
         </Box>
         <Box component="span">A proof of concept.</Box>
       </Typography>
+      <ErrorAlert message={expiredSessionMessage} />
       <Button
         onClick={handleLoginClick}
         disabled={isPending}
diff --git a/src/hooks/useValidateSession.ts b/src/hooks/useValidateSession.ts
index 4eb4c85..27e5fb0 100644
--- a/src/hooks/useValidateSession.ts
+++ b/src/hooks/useValidateSession.ts
@@ -1,6 +1,10 @@
 import { useEffect } from "react";
 import { useAppDispatch, useAppSelector } from "../state";
-import { logout, selectUserDeviceUuid, selectUserUid } from "../state/user";
+import {
+  expireSession,
+  selectUserDeviceUuid,
+  selectUserUid,
+} from "../state/user";
 import firestoreAuth from "../services/firestore-auth";
 
 export default function useValidateSession() {
@@ -19,16 +23,11 @@ export default function useValidateSession() {
         return;
       }
 
-      console.log(
-        "session.deviceUuid === userDeviceUuid",
-        session.deviceUuid === userDeviceUuid
-      );
-
       if (session.deviceUuid === userDeviceUuid) {
         return;
       }
 
-      dispatch(logout());
+      dispatch(expireSession());
     });
   }, [dispatch, userDeviceUuid, userUid]);
 }
diff --git a/src/state/user.ts b/src/state/user.ts
index 59ede61..4c1fd34 100644
--- a/src/state/user.ts
+++ b/src/state/user.ts
@@ -10,6 +10,7 @@ type UserStatus = "idle" | "pending" | "authenticated" | "error";
 export interface UserState extends User {
   status: UserStatus;
   errorMessage: string;
+  expiredSessionMessage?: string;
 }
 
 export const userInitialState: UserState = {
@@ -54,6 +55,17 @@ export const userSlice = createSlice({
     });
 
     builder.addCase(logout.fulfilled, () => userInitialState);
+
+    builder.addCase(expireSession.fulfilled, (state) => {
+      state.uid = "";
+      state.displayName = "";
+      state.email = "";
+      state.status = "idle";
+      state.deviceUuid = "";
+      state.errorMessage = "";
+      state.expiredSessionMessage =
+        "Session expired. Account in use in another device.";
+    });
   },
 });
 
@@ -87,6 +99,18 @@ export const logout = createAsyncThunk(
   }
 );
 
+export const expireSession = createAsyncThunk(
+  "expire-session",
+  (_, thunkApi) => {
+    firestoreAuth.logout();
+    thunkApi.dispatch(leaveCall());
+  },
+  {
+    condition: (_arg, thunkAPI) =>
+      (thunkAPI.getState() as RootState).user.status === "authenticated",
+  }
+);
+
 export const selectUserDisplayName = (state: RootState) =>
   state.user.displayName;
 
@@ -98,4 +122,7 @@ export const selectIsUserPendingAuthentication = (state: RootState) =>
 export const selectIsUserAuthenticated = (state: RootState) =>
   Boolean(state.user.status === "authenticated" && state.user.uid);
 
+export const selectExpiredSessionMessage = (state: RootState) =>
+  state.user.expiredSessionMessage;
+
 export default userSlice.reducer;

From f205bde8a18e1b3addf1890fbab8eed82fc69a52 Mon Sep 17 00:00:00 2001
From: Muniz <rcmuniz51@gmail.com>
Date: Thu, 26 Oct 2023 23:03:56 -0300
Subject: [PATCH 04/11] tests: fix tests

---
 src/services/firestore-auth.test.ts | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/services/firestore-auth.test.ts b/src/services/firestore-auth.test.ts
index ca3999b..43acf6a 100644
--- a/src/services/firestore-auth.test.ts
+++ b/src/services/firestore-auth.test.ts
@@ -1,17 +1,34 @@
 import "../testing-helpers/mock-firebase-auth";
 import firestoreAuth from "./firestore-auth";
 import * as firebaseAuth from "firebase/auth";
+import { doc, setDoc } from "firebase/firestore";
+import { v4 as uuidv4 } from "uuid";
+
+jest.mock("firebase/firestore", () => ({
+  doc: jest.fn(),
+  setDoc: jest.fn(),
+}));
+
+jest.mock("uuid", () => ({
+  v4: jest.fn(),
+}));
 
 describe("firestoreAuth", () => {
+  beforeEach(() => {
+    (uuidv4 as jest.Mock).mockReturnValueOnce("7390-4d50-91f3-abcdef1e0d50");
+  });
   it("should successfully log in and return user information", async () => {
     jest.spyOn(firebaseAuth, "getAuth");
     jest.spyOn(firebaseAuth, "getRedirectResult");
+    (doc as jest.Mock).mockImplementationOnce((_, path) => path);
+    (setDoc as jest.Mock).mockResolvedValueOnce(Promise.resolve(null));
     await firestoreAuth.login();
     const user = await firestoreAuth.loadUser();
     expect(user).toEqual({
       uid: "abc123def456",
       displayName: "Jane Doe",
       email: "jane@example.com",
+      deviceUuid: "7390-4d50-91f3-abcdef1e0d50",
     });
   });
 

From aa45036abf14e4dfc48c87af674b41e7458f0c43 Mon Sep 17 00:00:00 2001
From: Muniz <rcmuniz51@gmail.com>
Date: Thu, 26 Oct 2023 23:19:57 -0300
Subject: [PATCH 05/11] tests: listenUserSession

---
 src/services/firestore-auth.test.ts | 37 ++++++++++++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/src/services/firestore-auth.test.ts b/src/services/firestore-auth.test.ts
index 43acf6a..605e973 100644
--- a/src/services/firestore-auth.test.ts
+++ b/src/services/firestore-auth.test.ts
@@ -1,18 +1,25 @@
 import "../testing-helpers/mock-firebase-auth";
 import firestoreAuth from "./firestore-auth";
 import * as firebaseAuth from "firebase/auth";
-import { doc, setDoc } from "firebase/firestore";
+import { doc, setDoc, onSnapshot } from "firebase/firestore";
 import { v4 as uuidv4 } from "uuid";
 
 jest.mock("firebase/firestore", () => ({
   doc: jest.fn(),
   setDoc: jest.fn(),
+  onSnapshot: jest.fn(),
+  collection: jest.fn(),
+  query: jest.fn(),
 }));
 
 jest.mock("uuid", () => ({
   v4: jest.fn(),
 }));
 
+jest.mock("./firestore-connection", () => ({
+  db: jest.fn(),
+}));
+
 describe("firestoreAuth", () => {
   beforeEach(() => {
     (uuidv4 as jest.Mock).mockReturnValueOnce("7390-4d50-91f3-abcdef1e0d50");
@@ -68,3 +75,31 @@ describe("firestoreAuth", () => {
     await expect(firestoreAuth.logout()).resolves.not.toThrow();
   });
 });
+
+describe("listenUserSession", () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  it("listenUserSession will notify the callback on each snapshot invocation", async () => {
+    const mockUserUid = "zJTvoYDGr9PuN1z69vheO0b4iWF2";
+    (onSnapshot as jest.Mock).mockImplementation((_, onNext) =>
+      onNext({
+        forEach: Array.prototype.forEach.bind([
+          {
+            id: mockUserUid,
+            data: () => ({
+              deviceUuid: "6db9ad2e-19f9-4a85-b383-7731e347b7d0",
+            }),
+          },
+        ]),
+      })
+    );
+
+    const mockCallback = jest.fn();
+    firestoreAuth.listenUserSession(mockUserUid, mockCallback);
+
+    expect(mockCallback).toHaveBeenCalledWith({
+      deviceUuid: "6db9ad2e-19f9-4a85-b383-7731e347b7d0",
+    });
+  });
+});

From 87798ca6bcfc319c880d1be2255ccad58f7d0310 Mon Sep 17 00:00:00 2001
From: Muniz <rcmuniz51@gmail.com>
Date: Thu, 26 Oct 2023 23:28:59 -0300
Subject: [PATCH 06/11] fix: add mocked device uuid in test helper

---
 src/testing-helpers/call-fixtures.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/testing-helpers/call-fixtures.ts b/src/testing-helpers/call-fixtures.ts
index d61d8eb..b9e6c84 100644
--- a/src/testing-helpers/call-fixtures.ts
+++ b/src/testing-helpers/call-fixtures.ts
@@ -6,6 +6,7 @@ export function createUser(overrideValues: Partial<User> = {}): User {
     uid: uuidv4(),
     displayName: getRandomString(),
     email: getRandomEmail(),
+    deviceUuid: uuidv4(),
   };
 
   return { ...defaultValues, ...overrideValues };

From 2955071b2b3365c04c7d1b8252c962ab71df8a64 Mon Sep 17 00:00:00 2001
From: Muniz <rcmuniz51@gmail.com>
Date: Fri, 27 Oct 2023 01:15:36 -0300
Subject: [PATCH 07/11] feat: redirect when the user session is blocked

---
 src/App.tsx                               |  2 ++
 src/components/templates/HomeTemplate.tsx | 25 ++++++++-----
 src/features/auth/AuthMain.tsx            |  9 +----
 src/features/auth/BlockedSession.tsx      | 22 ++++++++++++
 src/hooks/useRedirectionRule.ts           | 44 +++++++++++++++++++++--
 src/hooks/useValidateSession.ts           |  6 ++--
 src/state/user.ts                         | 41 ++++++++-------------
 7 files changed, 101 insertions(+), 48 deletions(-)
 create mode 100644 src/features/auth/BlockedSession.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 9da76c8..1422637 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,6 +11,7 @@ import CallCreationMain from "./features/call-selection/CallCreationMain";
 import CallJoinMain from "./features/call-selection/CallJoinMain";
 import PendingUserMain from "./features/call-selection/PendingUserMain";
 import useValidateSession from "./hooks/useValidateSession";
+import BlockedSession from "./features/auth/BlockedSession";
 
 export default function App() {
   useValidateSession();
@@ -31,6 +32,7 @@ export default function App() {
           <Route path="/join" component={CallJoinMain} />
           <Route path="/left" component={() => <p>Left.</p>} />
           <Route path="/p2p-call/:callUid" component={P2PCallMain} />
+          <Route path="/blocked-session" component={BlockedSession} />
           <Route>
             <Redirect to="/" />
           </Route>
diff --git a/src/components/templates/HomeTemplate.tsx b/src/components/templates/HomeTemplate.tsx
index ce49ab5..0305b7e 100644
--- a/src/components/templates/HomeTemplate.tsx
+++ b/src/components/templates/HomeTemplate.tsx
@@ -12,7 +12,11 @@ import mainCharWhiteOutlineImg from "../../assets/main-char-white-outline.png";
 import mainCharPinkOutlineImg from "../../assets/main-char-pink-outline.png";
 import { useAppDispatch, useAppSelector } from "../../state";
 import useAgentHelper from "../../hooks/useAgentHelper";
-import { logout, selectIsUserAuthenticated } from "../../state/user";
+import {
+  logout,
+  selectIsSessionBlocked,
+  selectIsUserAuthenticated,
+} from "../../state/user";
 import SettingsModal from "../settings/SettingsModal";
 import ErrorAlert from "../basic/ErrorAlert";
 import WarningAlert from "../basic/WarningAlert";
@@ -32,6 +36,7 @@ export default function HomeTemplate({
   const handleLogoutClick = () => dispatch(logout());
 
   const isAuthenticated = useAppSelector(selectIsUserAuthenticated);
+  const isSessionBlocked = useAppSelector(selectIsSessionBlocked);
 
   const { canRunWebRTC, isChromeBased, isFirefoxBased } = useAgentHelper();
 
@@ -92,7 +97,7 @@ export default function HomeTemplate({
               pb: 1,
             }}
           >
-            {isAuthenticated && (
+            {isAuthenticated && !isSessionBlocked && (
               <IconButton
                 aria-label="Logout"
                 title="Logout"
@@ -103,13 +108,15 @@ export default function HomeTemplate({
                 <LogoutIcon />
               </IconButton>
             )}
-            <IconButton
-              aria-label="Settings"
-              title="Settings"
-              onClick={openSettings}
-            >
-              <SettingsIcon />
-            </IconButton>
+            {!isSessionBlocked && (
+              <IconButton
+                aria-label="Settings"
+                title="Settings"
+                onClick={openSettings}
+              >
+                <SettingsIcon />
+              </IconButton>
+            )}
           </Box>
         </Box>
         {!canRunWebRTC() && (
diff --git a/src/features/auth/AuthMain.tsx b/src/features/auth/AuthMain.tsx
index a0703ef..74ab92a 100644
--- a/src/features/auth/AuthMain.tsx
+++ b/src/features/auth/AuthMain.tsx
@@ -4,12 +4,7 @@ import Typography from "@mui/material/Typography";
 import GoogleIcon from "@mui/icons-material/Google";
 import HomeTemplate from "../../components/templates/HomeTemplate";
 import { useAppDispatch, useAppSelector } from "../../state";
-import {
-  login,
-  selectExpiredSessionMessage,
-  selectIsUserPendingAuthentication,
-} from "../../state/user";
-import ErrorAlert from "../../components/basic/ErrorAlert";
+import { login, selectIsUserPendingAuthentication } from "../../state/user";
 
 export default function AuthMain() {
   const dispatch = useAppDispatch();
@@ -17,7 +12,6 @@ export default function AuthMain() {
   const handleLoginClick = () => dispatch(login());
 
   const isPending = useAppSelector(selectIsUserPendingAuthentication);
-  const expiredSessionMessage = useAppSelector(selectExpiredSessionMessage);
 
   return (
     <HomeTemplate>
@@ -32,7 +26,6 @@ export default function AuthMain() {
         </Box>
         <Box component="span">A proof of concept.</Box>
       </Typography>
-      <ErrorAlert message={expiredSessionMessage} />
       <Button
         onClick={handleLoginClick}
         disabled={isPending}
diff --git a/src/features/auth/BlockedSession.tsx b/src/features/auth/BlockedSession.tsx
new file mode 100644
index 0000000..f1d364e
--- /dev/null
+++ b/src/features/auth/BlockedSession.tsx
@@ -0,0 +1,22 @@
+import Box from "@mui/material/Box";
+import HomeTemplate from "../../components/templates/HomeTemplate";
+import useRedirectionRule from "../../hooks/useRedirectionRule";
+import { Redirect } from "wouter";
+import ErrorAlert from "../../components/basic/ErrorAlert";
+
+export default function BlockedSession() {
+  const goTo = useRedirectionRule();
+
+  if (goTo) {
+    console.log("goTo", goTo);
+    return <Redirect to={goTo} />;
+  }
+
+  return (
+    <HomeTemplate>
+      <Box component="span" pr={1}>
+        <ErrorAlert message="Account in use in another device." />
+      </Box>
+    </HomeTemplate>
+  );
+}
diff --git a/src/hooks/useRedirectionRule.ts b/src/hooks/useRedirectionRule.ts
index 041e433..96e1385 100644
--- a/src/hooks/useRedirectionRule.ts
+++ b/src/hooks/useRedirectionRule.ts
@@ -1,6 +1,9 @@
 import { useLocation } from "wouter";
 import { useAppSelector } from "../state";
-import { selectIsUserAuthenticated } from "../state/user";
+import {
+  selectIsSessionBlocked,
+  selectIsUserAuthenticated,
+} from "../state/user";
 import { selectCallUid, selectCallUserStatus } from "../state/call";
 
 export default function useRedirectionRule(): string {
@@ -8,6 +11,7 @@ export default function useRedirectionRule(): string {
 
   const callUserStatus = useAppSelector(selectCallUserStatus);
   const callUid = useAppSelector(selectCallUid);
+  const isSessionBlocked = useAppSelector(selectIsSessionBlocked);
 
   const [location] = useLocation();
 
@@ -21,6 +25,7 @@ export default function useRedirectionRule(): string {
     path: location,
     pendingCall: callUserStatus === "pending-user" ? callUid : "",
     ongoingCall: callUserStatus === "participant" ? callUid : "",
+    isSessionBlocked,
   };
   const goTo = getRedirectionRule(context, search);
 
@@ -30,15 +35,34 @@ export default function useRedirectionRule(): string {
 export interface RedirectionContext {
   path: string;
   hasAuth: boolean;
+  isSessionBlocked: boolean;
   pendingCall?: string;
   ongoingCall?: string;
 }
 
 export function getRedirectionRule(
-  { path, hasAuth, pendingCall, ongoingCall }: RedirectionContext,
+  {
+    path,
+    hasAuth,
+    pendingCall,
+    ongoingCall,
+    isSessionBlocked,
+  }: RedirectionContext,
   search: Record<string, string>
 ): string {
+  if (path === "/blocked-session") {
+    if (!isSessionBlocked) {
+      return "/";
+    }
+
+    return "";
+  }
+
   if (path === "/") {
+    if (isSessionBlocked) {
+      return "/blocked-session";
+    }
+
     if (hasAuth && search.joining) {
       return `/join?callUid=${search.joining}`;
     }
@@ -53,6 +77,10 @@ export function getRedirectionRule(
   }
 
   if (path === "/create") {
+    if (isSessionBlocked) {
+      return "/blocked-session";
+    }
+
     if (hasAuth && ongoingCall) {
       return `/p2p-call/${ongoingCall}`;
     }
@@ -63,6 +91,10 @@ export function getRedirectionRule(
   }
 
   if (path === "/join") {
+    if (isSessionBlocked) {
+      return "/blocked-session";
+    }
+
     if (pendingCall && hasAuth) {
       return "/pending";
     }
@@ -81,6 +113,10 @@ export function getRedirectionRule(
   }
 
   if (path === "/pending") {
+    if (isSessionBlocked) {
+      return "/blocked-session";
+    }
+
     if (pendingCall) {
       return "";
     }
@@ -93,6 +129,10 @@ export function getRedirectionRule(
   }
 
   if (path.startsWith("/p2p-call")) {
+    if (isSessionBlocked) {
+      return "/blocked-session";
+    }
+
     if (hasAuth && !ongoingCall) {
       return "/create";
       // return "/left";
diff --git a/src/hooks/useValidateSession.ts b/src/hooks/useValidateSession.ts
index 27e5fb0..8d6b1d1 100644
--- a/src/hooks/useValidateSession.ts
+++ b/src/hooks/useValidateSession.ts
@@ -1,9 +1,10 @@
 import { useEffect } from "react";
 import { useAppDispatch, useAppSelector } from "../state";
 import {
-  expireSession,
   selectUserDeviceUuid,
   selectUserUid,
+  setSessionActive,
+  setSessionBlocked,
 } from "../state/user";
 import firestoreAuth from "../services/firestore-auth";
 
@@ -24,10 +25,11 @@ export default function useValidateSession() {
       }
 
       if (session.deviceUuid === userDeviceUuid) {
+        dispatch(setSessionActive());
         return;
       }
 
-      dispatch(expireSession());
+      dispatch(setSessionBlocked());
     });
   }, [dispatch, userDeviceUuid, userUid]);
 }
diff --git a/src/state/user.ts b/src/state/user.ts
index 4c1fd34..5e92bf4 100644
--- a/src/state/user.ts
+++ b/src/state/user.ts
@@ -10,7 +10,7 @@ type UserStatus = "idle" | "pending" | "authenticated" | "error";
 export interface UserState extends User {
   status: UserStatus;
   errorMessage: string;
-  expiredSessionMessage?: string;
+  isSessionBlocked: boolean;
 }
 
 export const userInitialState: UserState = {
@@ -20,12 +20,20 @@ export const userInitialState: UserState = {
   status: "idle",
   deviceUuid: "",
   errorMessage: "",
+  isSessionBlocked: false,
 };
 
 export const userSlice = createSlice({
   name: "user",
   initialState: userInitialState,
-  reducers: {},
+  reducers: {
+    setSessionBlocked: (state) => {
+      state.isSessionBlocked = true;
+    },
+    setSessionActive: (state) => {
+      state.isSessionBlocked = false;
+    },
+  },
   extraReducers: (builder) => {
     builder.addCase(login.pending, (state) => {
       state.uid = "";
@@ -55,17 +63,6 @@ export const userSlice = createSlice({
     });
 
     builder.addCase(logout.fulfilled, () => userInitialState);
-
-    builder.addCase(expireSession.fulfilled, (state) => {
-      state.uid = "";
-      state.displayName = "";
-      state.email = "";
-      state.status = "idle";
-      state.deviceUuid = "";
-      state.errorMessage = "";
-      state.expiredSessionMessage =
-        "Session expired. Account in use in another device.";
-    });
   },
 });
 
@@ -99,18 +96,6 @@ export const logout = createAsyncThunk(
   }
 );
 
-export const expireSession = createAsyncThunk(
-  "expire-session",
-  (_, thunkApi) => {
-    firestoreAuth.logout();
-    thunkApi.dispatch(leaveCall());
-  },
-  {
-    condition: (_arg, thunkAPI) =>
-      (thunkAPI.getState() as RootState).user.status === "authenticated",
-  }
-);
-
 export const selectUserDisplayName = (state: RootState) =>
   state.user.displayName;
 
@@ -122,7 +107,9 @@ export const selectIsUserPendingAuthentication = (state: RootState) =>
 export const selectIsUserAuthenticated = (state: RootState) =>
   Boolean(state.user.status === "authenticated" && state.user.uid);
 
-export const selectExpiredSessionMessage = (state: RootState) =>
-  state.user.expiredSessionMessage;
+export const selectIsSessionBlocked = (state: RootState) =>
+  state.user.isSessionBlocked;
+
+export const { setSessionBlocked, setSessionActive } = userSlice.actions;
 
 export default userSlice.reducer;

From 9127f131d637fc8d13a75d4b3e7c193c27be4970 Mon Sep 17 00:00:00 2001
From: Muniz <rcmuniz51@gmail.com>
Date: Fri, 27 Oct 2023 01:31:25 -0300
Subject: [PATCH 08/11] tests: home template and blocked session component

---
 .../templates/HomeTemplate.test.tsx           | 21 +++++++++++++++++++
 src/features/auth/BlockedSession.test.tsx     | 10 +++++++++
 src/features/auth/BlockedSession.tsx          |  1 -
 3 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 src/features/auth/BlockedSession.test.tsx

diff --git a/src/components/templates/HomeTemplate.test.tsx b/src/components/templates/HomeTemplate.test.tsx
index 42d05e7..23b363a 100644
--- a/src/components/templates/HomeTemplate.test.tsx
+++ b/src/components/templates/HomeTemplate.test.tsx
@@ -161,4 +161,25 @@ describe("HomeTemplate", () => {
       )
     ).toBe(null);
   });
+
+  it("does not show logout and settings buttons when user session is blocked", () => {
+    fullRender(
+      <HomeTemplate>
+        <p>Hello World!</p>
+      </HomeTemplate>,
+      {
+        preloadedState: {
+          user: {
+            ...userInitialState,
+            uid: "123",
+            status: "authenticated",
+            isSessionBlocked: true,
+          },
+        },
+      }
+    );
+
+    expect(screen.queryByLabelText("Logout")).toBe(null);
+    expect(screen.queryByLabelText("Settings")).toBe(null);
+  });
 });
diff --git a/src/features/auth/BlockedSession.test.tsx b/src/features/auth/BlockedSession.test.tsx
new file mode 100644
index 0000000..6637f7e
--- /dev/null
+++ b/src/features/auth/BlockedSession.test.tsx
@@ -0,0 +1,10 @@
+import "../../testing-helpers/mock-firestore-auth";
+import { act } from "react-dom/test-utils";
+import fullRender from "../../testing-helpers/fullRender";
+import BlockedSession from "./BlockedSession";
+
+describe("BlockedSession", () => {
+  it("renders", async () => {
+    await act(() => fullRender(<BlockedSession />));
+  });
+});
diff --git a/src/features/auth/BlockedSession.tsx b/src/features/auth/BlockedSession.tsx
index f1d364e..3356d00 100644
--- a/src/features/auth/BlockedSession.tsx
+++ b/src/features/auth/BlockedSession.tsx
@@ -8,7 +8,6 @@ export default function BlockedSession() {
   const goTo = useRedirectionRule();
 
   if (goTo) {
-    console.log("goTo", goTo);
     return <Redirect to={goTo} />;
   }
 

From fcb7dd3cfcb49cac585ec74cc0000da0394b6216 Mon Sep 17 00:00:00 2001
From: Muniz <rcmuniz51@gmail.com>
Date: Fri, 27 Oct 2023 01:37:37 -0300
Subject: [PATCH 09/11] feat: change blocked session message

---
 src/features/auth/BlockedSession.tsx | 2 +-
 src/hooks/useRedirectionRule.ts      | 2 --
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/features/auth/BlockedSession.tsx b/src/features/auth/BlockedSession.tsx
index 3356d00..e07c05f 100644
--- a/src/features/auth/BlockedSession.tsx
+++ b/src/features/auth/BlockedSession.tsx
@@ -14,7 +14,7 @@ export default function BlockedSession() {
   return (
     <HomeTemplate>
       <Box component="span" pr={1}>
-        <ErrorAlert message="Account in use in another device." />
+        <ErrorAlert message="Account in use in another device. Reload to restore this session." />
       </Box>
     </HomeTemplate>
   );
diff --git a/src/hooks/useRedirectionRule.ts b/src/hooks/useRedirectionRule.ts
index 96e1385..688231e 100644
--- a/src/hooks/useRedirectionRule.ts
+++ b/src/hooks/useRedirectionRule.ts
@@ -54,8 +54,6 @@ export function getRedirectionRule(
     if (!isSessionBlocked) {
       return "/";
     }
-
-    return "";
   }
 
   if (path === "/") {

From 7bb6a708bc5e665f08830b9afd02afb9e28d5d9c Mon Sep 17 00:00:00 2001
From: Muniz <rcmuniz51@gmail.com>
Date: Fri, 27 Oct 2023 01:51:29 -0300
Subject: [PATCH 10/11] fix: tests

---
 src/hooks/useRedirectionRule.test.ts | 73 ++++++++++++++++++++++------
 1 file changed, 58 insertions(+), 15 deletions(-)

diff --git a/src/hooks/useRedirectionRule.test.ts b/src/hooks/useRedirectionRule.test.ts
index 27a56db..85ec452 100644
--- a/src/hooks/useRedirectionRule.test.ts
+++ b/src/hooks/useRedirectionRule.test.ts
@@ -30,18 +30,29 @@ describe("getRedirectionRule: / (auth)", () => {
 
 describe("getRedirectionRule: /create", () => {
   it("when not authenticated, then go back to root for login", () => {
-    const result = getRedirectionRule({ path: "/create", hasAuth: false }, {});
+    const result = getRedirectionRule(
+      { path: "/create", hasAuth: false, isSessionBlocked: false },
+      {}
+    );
     expect(result).toBe("/");
   });
 
   it("when authenticated, stay here for device testing and call creation", () => {
-    const result = getRedirectionRule({ path: "/create", hasAuth: true }, {});
+    const result = getRedirectionRule(
+      { path: "/create", hasAuth: true, isSessionBlocked: false },
+      {}
+    );
     expect(result).toBe("");
   });
 
   it("when authenticated and has ongoing call, go to its page", () => {
     const result = getRedirectionRule(
-      { path: "/create", hasAuth: true, ongoingCall: "123-321" },
+      {
+        path: "/create",
+        hasAuth: true,
+        ongoingCall: "123-321",
+        isSessionBlocked: false,
+      },
       {}
     );
     expect(result).toBe("/p2p-call/123-321");
@@ -51,7 +62,7 @@ describe("getRedirectionRule: /create", () => {
 describe("getRedirectionRule: /join", () => {
   it("when authenticated and provided call uid, then stay here for device testing", () => {
     const result = getRedirectionRule(
-      { path: "/join", hasAuth: true },
+      { path: "/join", hasAuth: true, isSessionBlocked: false },
       { callUid: "123-321" }
     );
     expect(result).toBe("");
@@ -59,25 +70,36 @@ describe("getRedirectionRule: /join", () => {
 
   it("when not authenticated but provided call uid, then go authenticate", () => {
     const result = getRedirectionRule(
-      { path: "/join", hasAuth: false },
+      { path: "/join", hasAuth: false, isSessionBlocked: false },
       { callUid: "123-321" }
     );
     expect(result).toBe("/?joining=123-321");
   });
 
   it("when not authenticated nor provided call uid, then start reset entire flow (came here by mistake?)", () => {
-    const result = getRedirectionRule({ path: "/join", hasAuth: false }, {});
+    const result = getRedirectionRule(
+      { path: "/join", hasAuth: false, isSessionBlocked: false },
+      {}
+    );
     expect(result).toBe("/");
   });
 
   it("when authenticated and didnt provide call uid, then stay to manually type it", () => {
-    const result = getRedirectionRule({ path: "/join", hasAuth: true }, {});
+    const result = getRedirectionRule(
+      { path: "/join", hasAuth: true, isSessionBlocked: false },
+      {}
+    );
     expect(result).toBe("");
   });
 
   it("when authenticated and has pending call, go to pending user page", () => {
     const result = getRedirectionRule(
-      { path: "/join", hasAuth: true, pendingCall: "123-call-321" },
+      {
+        path: "/join",
+        hasAuth: true,
+        pendingCall: "123-call-321",
+        isSessionBlocked: false,
+      },
       {}
     );
     expect(result).toBe("/pending");
@@ -87,7 +109,12 @@ describe("getRedirectionRule: /join", () => {
 describe("getRedirectionRule: /join", () => {
   it("if has pending call, stay waiting", () => {
     const result = getRedirectionRule(
-      { path: "/pending", hasAuth: true, pendingCall: "123-call-321" },
+      {
+        path: "/pending",
+        hasAuth: true,
+        pendingCall: "123-call-321",
+        isSessionBlocked: false,
+      },
       {}
     );
     expect(result).toBe("");
@@ -95,19 +122,30 @@ describe("getRedirectionRule: /join", () => {
 
   it("if has ongoing call, go for it", () => {
     const result = getRedirectionRule(
-      { path: "/pending", hasAuth: true, ongoingCall: "123-call-321" },
+      {
+        path: "/pending",
+        hasAuth: true,
+        ongoingCall: "123-call-321",
+        isSessionBlocked: false,
+      },
       {}
     );
     expect(result).toBe("/p2p-call/123-call-321");
   });
 
   it("if has none, reset navigation flow", () => {
-    const result = getRedirectionRule({ path: "/pending", hasAuth: true }, {});
+    const result = getRedirectionRule(
+      { path: "/pending", hasAuth: true, isSessionBlocked: false },
+      {}
+    );
     expect(result).toBe("/");
   });
 
   it("when not authenticated, reset navigation flow", () => {
-    const result = getRedirectionRule({ path: "/pending", hasAuth: false }, {});
+    const result = getRedirectionRule(
+      { path: "/pending", hasAuth: false, isSessionBlocked: false },
+      {}
+    );
     expect(result).toBe("/");
   });
 });
@@ -115,7 +153,12 @@ describe("getRedirectionRule: /join", () => {
 describe("getRedirectionRule: /p2p-call", () => {
   it("when authenticated with ongoing call, then stay here", () => {
     const result = getRedirectionRule(
-      { path: "/p2p-call/123-321", hasAuth: true, ongoingCall: "123-321" },
+      {
+        path: "/p2p-call/123-321",
+        hasAuth: true,
+        ongoingCall: "123-321",
+        isSessionBlocked: false,
+      },
       {}
     );
     expect(result).toBe("");
@@ -123,7 +166,7 @@ describe("getRedirectionRule: /p2p-call", () => {
 
   it("when authenticated without ongoing call, go to a page saying good bye", () => {
     const result = getRedirectionRule(
-      { path: "/p2p-call/123-321", hasAuth: true },
+      { path: "/p2p-call/123-321", hasAuth: true, isSessionBlocked: false },
       {}
     );
     // expect(result).toBe("/left");
@@ -133,7 +176,7 @@ describe("getRedirectionRule: /p2p-call", () => {
   it("when not authenticated, be forced to reset flow", () => {
     // TODO: retrieve attempt call uid and convert into "/?joining=" flow
     const result = getRedirectionRule(
-      { path: "/p2p-call/123-321", hasAuth: false },
+      { path: "/p2p-call/123-321", hasAuth: false, isSessionBlocked: false },
       {}
     );
     expect(result).toBe("/");

From 593f6919849cdee01be433354e2415218f0873a7 Mon Sep 17 00:00:00 2001
From: Muniz <rcmuniz51@gmail.com>
Date: Fri, 27 Oct 2023 01:58:45 -0300
Subject: [PATCH 11/11] tests: useRedirectionRule when the session was blocked

---
 src/hooks/useRedirectionRule.test.ts | 56 ++++++++++++++++++++++++++--
 1 file changed, 52 insertions(+), 4 deletions(-)

diff --git a/src/hooks/useRedirectionRule.test.ts b/src/hooks/useRedirectionRule.test.ts
index 85ec452..968052a 100644
--- a/src/hooks/useRedirectionRule.test.ts
+++ b/src/hooks/useRedirectionRule.test.ts
@@ -2,18 +2,24 @@ import { getRedirectionRule } from "./useRedirectionRule";
 
 describe("getRedirectionRule: / (auth)", () => {
   it("when authenticated, go to creation", () => {
-    const result = getRedirectionRule({ path: "/", hasAuth: true }, {});
+    const result = getRedirectionRule(
+      { path: "/", hasAuth: true, isSessionBlocked: false },
+      {}
+    );
     expect(result).toBe("/create");
   });
 
   it("when not authenticated, stay here for auth", () => {
-    const result = getRedirectionRule({ path: "/", hasAuth: false }, {});
+    const result = getRedirectionRule(
+      { path: "/", hasAuth: false, isSessionBlocked: false },
+      {}
+    );
     expect(result).toBe("");
   });
 
   it("when autenticated and provided joining uid, then go to join page proceed to device testing", () => {
     const result = getRedirectionRule(
-      { path: "/", hasAuth: true },
+      { path: "/", hasAuth: true, isSessionBlocked: false },
       { joining: "123-321" }
     );
     expect(result).toBe("/join?callUid=123-321");
@@ -21,7 +27,7 @@ describe("getRedirectionRule: / (auth)", () => {
 
   it("when autenticated and provided creating display name, then go to create page proceed to device testing", () => {
     const result = getRedirectionRule(
-      { path: "/", hasAuth: true },
+      { path: "/", hasAuth: true, isSessionBlocked: false },
       { creating: "Daily" }
     );
     expect(result).toBe("/create?callDisplayName=Daily"); // TODO: names with special characters?
@@ -57,6 +63,19 @@ describe("getRedirectionRule: /create", () => {
     );
     expect(result).toBe("/p2p-call/123-321");
   });
+
+  it("when session is blocked, got to blocked session page", () => {
+    const result = getRedirectionRule(
+      {
+        path: "/create",
+        hasAuth: true,
+        ongoingCall: "123-321",
+        isSessionBlocked: true,
+      },
+      {}
+    );
+    expect(result).toBe("/blocked-session");
+  });
 });
 
 describe("getRedirectionRule: /join", () => {
@@ -104,6 +123,19 @@ describe("getRedirectionRule: /join", () => {
     );
     expect(result).toBe("/pending");
   });
+
+  it("when session is blocked, got to blocked session page", () => {
+    const result = getRedirectionRule(
+      {
+        path: "/join",
+        hasAuth: true,
+        pendingCall: "123-call-321",
+        isSessionBlocked: true,
+      },
+      {}
+    );
+    expect(result).toBe("/blocked-session");
+  });
 });
 
 describe("getRedirectionRule: /join", () => {
@@ -148,6 +180,14 @@ describe("getRedirectionRule: /join", () => {
     );
     expect(result).toBe("/");
   });
+
+  it("when session is blocked, got to blocked session page", () => {
+    const result = getRedirectionRule(
+      { path: "/pending", hasAuth: true, isSessionBlocked: true },
+      {}
+    );
+    expect(result).toBe("/blocked-session");
+  });
 });
 
 describe("getRedirectionRule: /p2p-call", () => {
@@ -181,4 +221,12 @@ describe("getRedirectionRule: /p2p-call", () => {
     );
     expect(result).toBe("/");
   });
+
+  it("when session is blocked, got to blocked session page", () => {
+    const result = getRedirectionRule(
+      { path: "/p2p-call/123-321", hasAuth: false, isSessionBlocked: true },
+      {}
+    );
+    expect(result).toBe("/blocked-session");
+  });
 });