![Cover image for Supabase SSR Auth with SvelteKit](https://media.dev.to/cdn-cgi/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw5zjm2kqsblfruu76s7v.png)
EDIT: Having discussion with Supabase concerning best parctices. My actual recomended way can be followd here The SvelteKit SSR Documentation Examp...
For further actions, you may consider blocking this person and/or reporting abuse
Awesome article, thank you!
Have you tried doing OAuth? Any chance you could add this to the article too?
Thank you for your interest.
I definitely plan to look into OAuth as well.
Something I noticed when duplicating a logged-in session on 2 browser tabs. If I log out on the second tab and click around on the first tab, the behavior is 'interesting'.
I am still seeing the same behavior on the browser (logout button is still visible). I added a console.log on onMount and noticed it doesn't get printed when following this sequence of actions.
Not sure if related, I am using TS, and the IDE warns me on the line
onMount(async () => {
that:
Svelte: Argument of type () => Promise<() => void> is not assignable to parameter of type () => (() => any) | Promise<never>
Thank you for your efforts. I'll take a look!
Hey, this video explains this problem well and suggests a solution:
Hope it helps anyone else as well!
To reload the layout view after clicking on a navigation item do this:
This appends a CSS class if the URL does not match the path name.
I have updated the tutorial. Now everything works correctly and in sync. The point was to properly implement invalidation listeninng to supabase.auth.onAuthStateChange.
Please test the app and let me know if it works for you as well.
Let me first say, thank you so much for this awesome article!
I am however wondering about the warning I keep getting:
Using the user object as returned from supabase.auth.getSession() or from some supabase.auth.onAuthStateChange() events could be insecure! This value comes directly from the storage medium (usually cookies on the server) and many not be authentic. Use supabase.auth.getUser() instead which authenticates the data by contacting the Supabase Auth server.
Any ideas how to remove this? All of my attempts have fallen flat.
Also, an OAuth article would be awesome!!!
Thank you!!!
Hi, thank you for your thank you :)
Concerning the warning I recommend to follow Supabase recently updated official documentation. I did not have time to update this tutorial. But I guess as long as you call
supabase.auth
methods withsupabase.auth.getUser()
to check JWT validation.Try this
event.locals.safeGetSession
, see the new documentation hereThanks again for the article. I am still not all the way there though. Everything works as expected in development but when I try to deploy on vercel, I get the error:
RollupError: "PUBLIC_SUPABASE_URL" is not exported by "virtual:$env/static/public", imported by "src/routes/+layout.ts".
Hi, thank you for yout thank you.
Concernig Vercel did you set up all your environment varaibles in Vercel? vercel.com/docs/projects/environme...
Awesome article, you have helped me so much as I am new to the JS world. Please do an OAuth one with Supabase+SK as well! Thanks!!
Glad to hear you did like the tutorial.
Great article! I'm new with sveltekit, Is there a form to avoid duplicate load function for session validation?
Hi, thank you.
I am not sure which duplicate load function do you mean? Could you be more specific, please?
Each +page.server.js is checking if user is already looged in. Is there a way to check it in the +layout.server.js?
I would not recommend using +layout.server.js for auth checking. See more details in this discussion
github.com/sveltejs/kit/issues/6315 or this video https://www.youtube.com/watch?v=UbhhJWV3bmI&ab_channel=Huntabyte
Conrening protected routes and redirects in one place you may follow this advice https://www.youtube.com/watch?v=K1Tya6ovVOI&ab_channel=Huntabyte and move the logic to src/hooks.server.js
Thank you for this post kvetoslanovak!
Works perfectly! 😁😍
Thanks for the great article!
Pls share the ./utils/addUserprofileToUser.js file
Thank you, I am sharing this function in a second edit in the bottom of the article.
just started a new project and decide to use these two; great article!
but I was wondering what the addUserprofileToUser function did?
Thank you, I have added the explanaton as a second edit in the bottom of the article.
Thanks for the tutorial. What would the app.d.ts file look like for those of us in love with typescript?
I am just discussing the update of the official documentaton with Supanase. This documentaton uses TS and can be found here: supabase.com/docs/guides/auth/serv...
In previous documentation for Supabase Auth Helpers there is src/app.d.ts supabase.com/docs/guides/auth/auth...