showing a loading Spinner on first page load

src/lib/components/AuthLoading.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { getFirebaseContext } from "../stores/sdk.js";
+  import { userStore } from "../stores/auth.js";
+  const auth = getFirebaseContext().auth!;
+  const user = userStore(auth);
+</script>
+
+{#if $user === undefined}
+  <slot {auth}>Loading...</slot>
+{/if}

src/lib/components/SignedOut.svelte

@@ -12,6 +12,6 @@
 
   </script>
 
-  {#if !$user}
+  {#if $user === null}
     <slot {auth} />
-  {/if}
+  {/if}

src/lib/stores/auth.ts

@@ -1,18 +1,20 @@
-import { writable } from "svelte/store";
-import { getFirebaseContext } from "./sdk.js";
-import { onAuthStateChanged, type Auth } from "firebase/auth";
+import { readable, writable } from "svelte/store";
+import { onAuthStateChanged, type Auth, type User } from "firebase/auth";
 
 /**
  * @param  {Auth} auth firebase auth instance
  * @param  {any} startWith optional default data. Useful for server-side cookie-based auth
  * @returns a store with the current firebase user
+ * user != null -> signed in
+ * user == null -> signed out
+ * user == undefined -> still loading auth status on initial page load -> show loading spinner or sth else to prevent a normally signed in user from seeing content as a signed out user for a second
  */
-export function userStore(auth: Auth, startWith = null) {
+export function userStore(auth: Auth, startWith = undefined) {
   let unsubscribe: () => void;
 
   // Fallback for SSR
   if (!globalThis.window) {
-    const { subscribe } = writable(startWith);
+    const { subscribe } = readable(startWith);
     return {
       subscribe,
     };
@@ -23,19 +25,19 @@ export function userStore(auth: Auth, startWith = null) {
     console.warn(
       "Firebase Auth is not initialized. Are you missing FirebaseApp as a parent component?"
     );
-    const { subscribe } = writable(null);
+    const { subscribe } = readable(undefined);
     return {
       subscribe,
     };
   }
 
-  const { subscribe } = writable(auth?.currentUser ?? null, (set) => {
-    unsubscribe = onAuthStateChanged(auth, (user) => {
-      set(user);
-    });
-
-    return () => unsubscribe();
-  });
+  const { subscribe } = readable<User | null | undefined>(
+    auth.currentUser ?? undefined,
+    (set) => {
+      const unsubscribe = onAuthStateChanged(auth, set);
+      return () => unsubscribe();
+    }
+  );
 
   return {
     subscribe,

src/routes/auth-test/+page.svelte

@@ -2,7 +2,7 @@
   import SignedIn from '$lib/components/SignedIn.svelte';
   import SignedOut from '$lib/components/SignedOut.svelte';
   import { signInAnonymously } from "firebase/auth";
-
+  import AuthLoading from "$lib/components/AuthLoading.svelte";
 
 </script>
 
@@ -18,3 +18,8 @@
      <h2>Signed Out</h2>
     <button on:click={() => signInAnonymously(auth)}>Sign In</button>
 </SignedOut>
+
+<AuthLoading>
+    <h2>Checking Auth</h2>
+    <p>Loading...</p>
+</AuthLoading>