Looking for a pattern to handle Firebase Auth (client-side auth)

[jakobsturm]

Hi together,

as there were a lot of changes in the last few weeks (and my Sveltekit version was quite outdated 😅) I am going under a big refactor of my codebase. While rewriting some parts I realised that I do not like the way I handle the firebase auth and the auth store in my project. Therefore I am looking for a pattern that helps me handle it better.

My problem is that the firebase auth is handled client-side - when a user logs in, I save the user's information in a store. That works great for the client side - but if I want to load some data via +page.server.ts I do not have access to the user id there (and I get that, that makes a lot of sense). Prior I was thinking of saving the user id and some information in a session - but now session is removed.

What would you suggest? How do you handle it in your project when you are using a client-side auth library?

Thanks a lot!

[j4w8n]

I'm using supabase oauth. Not sure how much it parallels to firebase, but I'm using the $page store with invalidate(). Still a work in progress, and I haven't updated the readme in a while.

https://github.com/j4w8n/sveltekit-supabase-oauth

[acoyfellow]

I use Firebase auth on all SK projects. upon client side login, post idToken to a server endpoint.

In that endpoint, I verify the token, then create a session in Firestore. Set a cookie in __session with an ID.

Then in hooks.js, you can use that cookie to retrieve session data and return it to the client by setting event.locals.user

[kvetoslavnovak]

If Supabase example may be relevant here is my repo using hooks.js and getSession to populate event.locals with user and accessToken.
https://github.com/kvetoslavnovak/SvelteKitSupabaseAuthApp

[j4w8n]

Did you know getSession() has been removed in an updated release?

#5883

[kvetoslavnovak]

Yes. I guess it is quite easy to update the pattern according to the new way to store user data in the page store instead of the session store.
i did not have any time to update my repo to apply the latest SvelteKit changes.

[faustodc]

As @acoyfellow has said, but also, you can use firebase-admin after being authenticated if you need to use firestore for example for SSR.

This is a good example, although, it doesn't apply the latest Sveltekit changes:
https://github.com/ManuelDeLeon/sveltekit-firebase-ssr

[janzheng]

Not completely related to Firebase but this is helping think how to refactor Session: https://www.loopwerk.io/articles/2022/sveltekit-session-refactor/