fix signing out globally not working

src/lib/utils.js

@@ -67,15 +67,33 @@ export const wordCount = (s) => {
   return s.split(" ").length;
 };
 
+// make sure url is relative
 export const getSafeRedirect = (url, defaultUrl = "/") => {
   let result = defaultUrl;
 
   if (url && url.startsWith("/")) {
     result = url;
   }
 
-  let tempURL = new URL(result, "http://localhost");
-  tempURL.searchParams.set("reload", "true");
+  return addQueryParams(result, { reload: true });
+};
+
+// add query param to a relative url
+export const addQueryParams = (url = "/", params) => {
+  let tempURL = new URL(url, "http://localhost");
+
+  for (const key in params) {
+    tempURL.searchParams.set(key, params[key]);
+  }
+
+  return tempURL.pathname + tempURL.search;
+};
+
+// remove query param from a relative url
+export const removeQueryParam = (url = "/", param) => {
+  let tempURL = new URL(url, "http://localhost");
+
+  tempURL.searchParams.delete(param);
 
   return tempURL.pathname + tempURL.search;
 };

src/routes/+layout.js

@@ -16,15 +16,18 @@ export const load = async ({ fetch, data, depends }) => {
     data: { session },
   } = await supabase.auth.getSession();
 
+  let signedOut = false;
+
   if (session?.user) {
     session.user = await completeUser(supabase, session.user);
 
     // check if user was signed out from somewhere else
+    // if so, sign out here as well
     const { data: exists } = await supabase.rpc("session_exists", { session_id: session.user.session_id });
     if (!exists) {
-      await supabase.auth.signOut();
+      signedOut = true;
     }
   }
 
-  return { supabase, session };
+  return { supabase, session, signedOut };
 };

src/routes/+layout.svelte

@@ -5,12 +5,13 @@
   import { onMount } from "svelte";
   import { page } from "$app/stores";
   import { PUBLIC_RECAPTCHA_SITE_KEY } from "$env/static/public";
+  import { removeQueryParam } from "$lib/utils";
   import Footer from "./Footer.svelte";
   import Header from "./Header.svelte";
   import toast, { Toaster } from "svelte-french-toast";
 
   export let data;
-  $: ({ supabase, session } = data);
+  $: ({ supabase, session, signedOut } = data);
 
   $: pathname = $page.url.pathname.replace(/\/$/, "");
 
@@ -91,22 +92,30 @@
       }
     }
 
-    // if user deleted their account, force sign out
-    if ($page.url.searchParams.has("signOut")) {
+    // force sign out in special cases
+    if ($page.url.searchParams.has("signOut") || signedOut) {
       document.cookie.split(";").forEach((c) => {
         document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/");
       });
 
-      setTimeout(() => {
-        location.href = "/";
-      }, 5000);
+      if (signedOut) {
+        toast("You were signed out from another device.", {
+          icon: "😔",
+          duration: 5000,
+        });
+      }
+
+      setTimeout(
+        () => {
+          location.href = removeQueryParam(location.href, "signOut");
+        },
+        signedOut ? 5000 : 0
+      );
     }
 
     // if reload is specified, reload the page
     if ($page.url.searchParams.has("reload")) {
-      const url = new URL(location.href);
-      url.searchParams.delete("reload");
-      location.href = url;
+      location.href = removeQueryParam(location.href, "reload");
     }
   });
 </script>