localStorage token and websocket reconnect

backend/voting/consumers.py

@@ -73,8 +73,10 @@ class SessionConsumer(WebsocketConsumer):
 				async_to_sync(self.channel_layer.group_send)(
 					self.session_name, {"type": "voted", "user": { "id": user.id, "username": user.username}, "track": track.id, "points": points}
 				)
-		if action == "pause":
-			pass
+		if action == "start":
+			async_to_sync(self.channel_layer.group_send)(
+				self.session_name, {"type": "announce.start"}
+			)
 		if action == "next":
 			random.seed(session.seed)
 			tracks = Track.objects.order_by("?")
@@ -107,10 +109,13 @@ class SessionConsumer(WebsocketConsumer):
 		user = event["user"]
 		self.send(text_data=json.dumps({"joined": user}))
 
+	# TODO: maybe this could be one function.
 	def announce_track(self, event):
 		self.send(text_data=json.dumps({"track": {}}))
 	def announce_done(self, event):
 		self.send(text_data=json.dumps({"done": {}}))
+	def announce_start(self, event):
+		self.send(text_data=json.dumps({"start": {}}))
 
 	def voted(self, event):
 		user = event["user"]

frontend/src/app/lobby/page.tsx

@@ -87,6 +87,12 @@ export default function Lobby() {
     setSessionState("voting");
     setState("loading");
     getTrack();
+    sessionSocket.send(
+      JSON.stringify({
+        action: "start",
+        token: user.access_token,
+      }),
+    );
   }
 
   function addUser(user: object) {

frontend/src/app/mobile-voting/page.tsx

@@ -43,10 +43,19 @@ export default function MobileVoting() {
     console.log(sessionSocket?.readyState);
     await waitForOpenSocket();
     console.log("socket is open");
+    sessionSocket.onclose = function (e) {
+      console.log("Chat socket closed unexpectedly");
+      setYesHighlight(false);
+      setNoHighlight(false);
+      setVote(0.5);
+      setSessionId(null);
+      setTimeout(() => {
+        setSession();
+      }, 2000);
+    };
     sessionSocket.send(
       JSON.stringify({
         action: "login",
-        userr: user.profile.nickname,
         token: user.access_token,
       }),
     );
@@ -57,14 +66,13 @@ export default function MobileVoting() {
     console.log(e);
     let data = JSON.parse(e.data);
     for (let key in data) {
-      if (key == "track") {
+      if (key == "track" || key == "start") {
         setYesHighlight(false);
         setNoHighlight(false);
         setVote(0.5);
       }
     }
     console.log(data);
-    //}, 1000);
   }
 
   // Initialize WebSocket connection when sessionId changes
@@ -76,7 +84,6 @@ export default function MobileVoting() {
       );
       socket.onmessage = onMessage;
       setSessionSocket(socket);
-      //setTimeout(() => connect(), 2000);
     }
   }, [sessionId]);
 
@@ -113,7 +120,7 @@ export default function MobileVoting() {
   }, [vote]);
 
   return (
-    <main className="m-3 h-screen rounded bg-blue-950/80 p-8 sm:p-14 md:p-20">
+    <main className="m-0 h-screen rounded bg-blue-950/80 p-8 sm:p-14 md:p-20">
       <div className="flex flex-row items-center justify-between gap-8 rounded-md">
         <button
           className={`flex aspect-square w-1/2 max-w-[200px] items-center rounded bg-black/20 p-0 text-center font-bold text-white ${noHighlight ? "ring-5 ring-amber-400" : "ring-0 ring-black/20"}`}

frontend/src/config/auth.ts

@@ -1,4 +1,4 @@
-import { UserManager } from "oidc-client-ts";
+import { UserManager, WebStorageStateStore } from "oidc-client-ts";
 import { AuthProviderProps } from "react-oidc-context";
 
 const ORIGIN_URI = globalThis?.window?.location.origin;
@@ -17,8 +17,15 @@ const userConfig: AuthProviderProps = {
   post_logout_redirect_uri: ORIGIN_URI,
   response_mode: "query",
   revokeTokensOnSignout: true,
+  staleStateAgeInSeconds: 60000,
 };
 
+if (globalThis?.window != undefined) {
+  userConfig.userStore = new WebStorageStateStore({
+    store: window.localStorage,
+  });
+}
+
 export const userManager = new UserManager(userConfig);
 
 // Some handling of token expiration.

frontend/src/data/fetcher.ts

@@ -9,6 +9,11 @@ export function getUser() {
     let oidcStorage = window?.sessionStorage.getItem(
       `oidc.user:${oidcConfig.authority}:${oidcConfig.client_id}`,
     );
+    if (!oidcStorage) {
+      oidcStorage = window?.localStorage.getItem(
+        `oidc.user:${oidcConfig.authority}:${oidcConfig.client_id}`,
+      );
+    }
     if (!oidcStorage) {
       return null;
     }