66 - ChatOS - Add Firebase Auth (cont.)

Livestream

Refactor Auth into a Svelte store

Yesterday I did add Firebase Auth’s getUserAuthState() function into +layout.ts, this will not support SSR since when rendering on server it will always return null-ish user. I researched more and found Fireship’s code that utilize svelte/store and can write a condition to support SSR.

// src/lib/firebase-store.ts

export function userStore() {
	// SSR - Server Side Rendering
	if (!auth || !globalThis.window) {
		console.warn('Auth is not initialized or not in browser');
		const { subscribe } = writable<undefined>(undefined);
		return {
			subscribe
		};
	}

    // CSR - Client Side Rendering (works on browser)
	const { subscribe } = writable<User | null | undefined>(auth?.currentUser ?? undefined, (set) => {
		const unsubscribe = auth.onAuthStateChanged((user) => {
			set(user);
		});

		return () => unsubscribe();
	});

	return { subscribe };
}

Now in layout or view files, get the store subscriber and use it like this.

<script lang="ts">
  import { userStore } from "$lib/firebase-store";

  const user = userStore()
</script>

{#if $user === undefined}
  <p>Loading...</p>
{:else if $user}
  <p>Logged in as {$user.displayName}</p>
{:else}
  <p>
    Not logged in
  </p>
{/if}

The $user will have 3 possible states (undefined, null, and object) and will be the default one if ran on SSR, so you will not see the page blinks from Not logged in to Loading