Example of how to initialize firebase@exp

firebaseClient.js

import { initializeApp } from 'firebase/app';
import { getAuth, onAuthStateChanged } from "firebase/auth";
import { getFirestore } from 'firebase/firestore';
import { getStorage } from "firebase/storage";

let ssrAuthed = window.ssrUser;

const firebaseConfig = {
  //   ...
};

const firebase = window.firebase || initializeApp(firebaseConfig);
window.firebase = firebase;
const auth = getAuth(firebase);
const firestore = getFirestore(firebase);
const storage = getStorage(firebase);

onAuthStateChanged(auth, (u) => {
  console.log({ ssrAuthed, u });
});

export {
  firebase,
  auth,
  firestore,
  storage
};

Hi Jordan, thanks again for posting these SvelteKit/Firebase snippets. I've found them helpful. One thing isn't clear to me is how you handle maintaining sessions between client and server with SSR, though I may just have missed the logic. I see you have that ssrAuthed variable, but how are you using this in the course of loading SSR pages? Or how are you using hooks in your requests? Or is there another approach you're taking?

@thormuller, you're correct, i use hooks

• https://kit.svelte.dev/docs#hooks

example:

• https://gist.github.com/acoyfellow/e8888b4b5eb0dc52e65ea1e21ad5d525

and the ssrAuthed varible gets set from my $layout.svelte file, like this:

• https://gist.github.com/acoyfellow/eb801139a67459c80cc2925988566ca6

Then, in every child route or component, i can access anything from that firebaseClient.js:

import { getContext } from 'svelte';
const store = getContext('store');
// $store.firebase, $store.firestore, etc..

Thanks so much for the detail. Seeing the hooks doc in particular was helpful. All the best!

One other question: did you have any issues in build mode? I'm getting the old window is not defined error when I run build, but not in dev.

@thormuller - no i don't.. but, does that error persist if you add a browser check in the $layout.svelte? Just to be sure this file isn't called on the server. I wonder if that would help.

It may depend on the versio of sk, there might be a change I didn't catch up to yet

@thormuller Instead of using the window object to save the app instance, I have used this and it seems to work.

import { initializeApp, getApp, getApps } from 'firebase/app';

const firebase = (getApps().length && getApp()) || initializeApp(firebaseConfig);

Thank you both. To @acoyfellow's point, there was just a bit update to SK and an update to Vite. I'm in the midst of that update, so perhaps this is an artifact of the swirl. I'll definitely try your solution if the update doesn't fix things.