From fac75af0d430e56d8c7fd5531ca031b50ac5f514 Mon Sep 17 00:00:00 2001
From: Janny221199 <mail@janny.io>
Date: Sat, 29 Jul 2023 12:44:01 +0200
Subject: [PATCH 1/2] showing a loading Spinner if the auth status was not
 fetched on initial page load

---
 src/lib/components/AuthLoading.svelte |  7 +++++++
 src/lib/components/SignedOut.svelte   |  4 ++--
 src/lib/stores/auth.ts                | 28 ++++++++++++++-------------
 src/routes/auth-test/+page.svelte     |  7 ++++++-
 4 files changed, 30 insertions(+), 16 deletions(-)
 create mode 100644 src/lib/components/AuthLoading.svelte

diff --git a/src/lib/components/AuthLoading.svelte b/src/lib/components/AuthLoading.svelte
new file mode 100644
index 0000000..12ece73
--- /dev/null
+++ b/src/lib/components/AuthLoading.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { userStore } from "../stores/auth.js";
+</script>
+
+{#if $user === undefined}
+  <slot {auth}>Loading...</slot>
+{/if}
diff --git a/src/lib/components/SignedOut.svelte b/src/lib/components/SignedOut.svelte
index 06febf6..752649a 100644
--- a/src/lib/components/SignedOut.svelte
+++ b/src/lib/components/SignedOut.svelte
@@ -12,6 +12,6 @@
 
   </script>
   
-  {#if !$user}
+  {#if $user === null}
     <slot {auth} />
-  {/if}
\ No newline at end of file
+  {/if}
diff --git a/src/lib/stores/auth.ts b/src/lib/stores/auth.ts
index 11b7a7b..39b430c 100644
--- a/src/lib/stores/auth.ts
+++ b/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,
diff --git a/src/routes/auth-test/+page.svelte b/src/routes/auth-test/+page.svelte
index 3a62f9a..f7b0050 100644
--- a/src/routes/auth-test/+page.svelte
+++ b/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>

From 58fc9b38603c84a4567487d2157e9ab9732ea15c Mon Sep 17 00:00:00 2001
From: Janny221199 <mail@janny.io>
Date: Sat, 29 Jul 2023 12:49:12 +0200
Subject: [PATCH 2/2] auth loading on first page load:fix missing imports

---
 src/lib/components/AuthLoading.svelte | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/lib/components/AuthLoading.svelte b/src/lib/components/AuthLoading.svelte
index 12ece73..d0aeafd 100644
--- a/src/lib/components/AuthLoading.svelte
+++ b/src/lib/components/AuthLoading.svelte
@@ -1,5 +1,8 @@
 <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}