SvelteKit combined with server side authentication with Supabase
Just started to look into SvelteKit. Coming from Vue and lately working with Laravel I must say you pretty much feel at home. Kinda the best of two worlds :) Well, that's another topic. When digging into SvelteKit I had been thinking about digging into Supabase for a while so here we are!
If you are just here for the implementation check below :)
Looking around a bit for some basics on how to best integrate Supabase with SvelteKit we started on Supabase's own documentation, Quickstart: Svelte. Pretty basic and well explained.
Here the first hiccup comes when using SvelteKit. Server-Side Rendering (SSR) trying to just use the guide directly will not work in SvelteKit because of the SSR. One solution would be to just wrap all Supabase logic into browser checks. Kinda lose the point then. Have tried out Next and Nuxt before but have had the same issue there to understand the powers of how to use SSR. In my experience, I must say they all have pretty much the same architecture.
Getting back to it I kinda felt the need to get a bit of control. Now when I have been using Laravel where you have full control in your controllers it's a pretty nice approach. So the first attempt was to make use of some basic endpoints. /login and /signup. Here we also want to have some kind of route guard that you cannot access private (un-authenticated) pages. How can that be archived?
Thinking I can't be the first to think this. So google! sveltekit supabase 👀 First articles is just using supabase in the client-side. Some use it client-side and as authStateChange it triggers a method to update the cookie server side. A combination of me not understanding and that both SvelteKit and Supabase are pretty new did not make it better to understand. So here we have another post. Hopefully, I can explain what I found and how I made it.
What I wanted was the following:
The first few attempts here failed totally. Did some quirky implementation to be able to expose the user session so one can use it to call Supabase Server side. Did not feel good. Also, I ended up implementing guard checks for each page.
Another big fail I had was not understanding how the hook file worked. Hooks is a place that gets called for every request. By using the handle method one can receive the request and return the response. The big thing I missed here is that handle also resolves the page that is requested before it is returned.
Finally, I found out about service_role key that one could directly talk with the database from my endpoints. The thing to note is that this will not have any rls so if one should fetch data from the database one needs to manually handle that. Need to dig into this more.