SvelteKit Authentication with Supabase

If you find my content useful and want to support the channel, consider contributing a coffee ☕: hbyt.us/coffee
SvelteKit is a framework for building modern, high-performance, browser-based applications. It was developed by the team behind the popular Svelte framework and is powered by Svelte. Unlike other JavaScript frameworks, it doesn't use a virtual DOM or deliver a bloated and slow application. Supabase is an open-source Firebase alternative that makes it easy to stand up a backend with a Postgres database, Authentication, instant APIs, Edge Functions, Realtime subscriptions, and Storage.
In this SvelteKit tutorial, I demonstrate how to integrate your SvelteKit application with Supabase to enable user authentication.
⭐ Starting Code
github.com/huntabyte/sk-supab...
📁 Final Code
github.com/huntabyte/sk-supab...
💽 Check out my other SvelteKit Videos!
• Svelte & SvelteKit
📚 Resources Mentioned In This Video:
SvelteKit: kit.svelte.dev
Supabase: supabase.com
🚀 Become a channel member: hbyt.us/join
💬 Discord: hbyt.us/discord
🐦 Twitter: hbyt.us/twitter
🖥️ Setup Stuff: hbyt.us/gear
🔖 Chapters:
00:00 - Project Setup
1:45 - Create Supabase Client
3:05 - onAuthStateChange Subscription
4:20 - getServerSession
5:15 - handle Hook
8:00 - Registration
14:20 - Logout
16:05 - Login
18:14 - Progressive Enhancement
📃 Topics Covered:
- How to add authentication to SvelteKit
- SvelteKit & Supabase
- Supabase Server Side Rendering (SSR)
- Supabase Auth Helpers
- What is Supabase?
- What is SvelteKit?
- How to use Supabase with SvelteKit
__________________________________________
(Affiliate links may be included in this description. If you choose to purchase a product from one of those links, I may receive a small commission at no cost to you. Thank you for supporting the channel!)

[@digitaldrreamer]

I love that you make specific content that other KZbinrs don't. Whenever I have something specific that I'm looking for regarding Sveltekit, I check your channel first. If i don't, then its joy of code

[@AbdulWahab-oy3zh]

Heyo, maybe add a disclaimer that the content in this video is outdated now?

[@sebastianmorales9876]

If you keep up the high quality Sveltekit content you will definitely have a million subscribers soon.

[@Huntabyte]

Thank you, Sebastian!

[@neatfastro]

*10 million

[@kvetoslavnovak423]

Any chance for an updated video because of supabase SK auth helpers changes as well best practices for routes protecting ? Thank you very much.

[@mr_clean575]

yes please!

[@JohnSmith-vs9oe]

Thank you! Your tutorials are super detailed and convenient to follow. Even someone totally new can learn a lot from your videos!😃

[@Huntabyte]

You're very welcome! I'm glad to hear that!

[@davidlejolly1657]

Thank you so much, you saved my day. Very clear and detailed explanation !

[@Woeden]

Nevermind.. a lot have changed from this tutorial, what a nightmare Supabase with Sveltekit is.

[@im2godly750]

Love how you explain everything. Thank you for the content!!

[@Huntabyte]

My pleasure!

[@yndev]

Excellent video! I used the official SvelteKit Auth Helper as a starting point, but your usage of hooks is much cleaner. I'll use this video to refactor a bit. Thanks!

[@Huntabyte]

You’re welcome! Glad I could help!

[@daleyc.3008]

If you can't even hit 1M subs, I'll learn PHP in 2023.

[@Huntabyte]

😂

[@MichaelPresecan]

It would be useful for you to know php in 2033

[@kristovbellicose3553]

Time to get started.

[@richardfeynman-sd3rg]

Anyone watching this recently, note that there have been some major changes going from sveltekit-auth-helpers 0.8.x to 0.9.0, so some of the stuff in the video is a bit outdated. :)

[@Trav164]

Yup, running into the same issues here.

[@JavierSuarez-qi7so]

@@Trav164 absolutely outrighteous

[@Trav164]

@@JavierSuarez-qi7so got it all working if you take a look at the changes in the docs for sveltekit auth helpers supabase

[@bobbyLovesTech]

Thank you - massively helpful!

[@p_o_z_e]

This video helped me tons when i was trying to do this for a project im working on. Amazing work!

[@richardfeynman-sd3rg]

You deserve 10x more subs, awesome content

[@ilikesvelte]

Hey! Thanks for your clear and structured videos. Although most of it can be read in the docs, it's refreshing to see somone other than me working it through. :) That said, I had a build failure during deployment in vercel because of the quotationmarks in the .env file. After I removed them everything works fine. :)

[@Huntabyte]

Sorry, I never commit .env files to my repos, I typically set them within Vercel and when I do that, I remove the quotation marks!

[@goshmain982]

Bro you amazing. I want to learn everything about sveltekit from you. you are my hero.

[@JoyofCodeDev]

Great video! 😄

[@Huntabyte]

Thank you, Matia!

[@henririon]

Thanks a lot for this very clear tutorial! I wish you more than 1M subscribers !

[@Huntabyte]

Thank you!

[@kayodionizio2886]

Really well explained❤‍🔥 I'm searching for supabase sveltkit tutorial and even the supabase website confuse me😂

[@theIbraDev]

Just a heads up for those finding this now, this won't work with the new SSR auth.

[@YuGoCheff]

Thanks for the videos Hunter! :) Now that you have worked with pocketbase and supabase - which one do you personally prefer? My use case would be a small/mid SaaS project for a side hustle. Thanks for any input! :)

[@WolfManThoughts]

the getSupabase method is not available in the latest version of auth helpers package. Need a workaround for that.

[@skydivertyler]

Hi Hunter, I am eagerly await-ing a potential video explaining how to handle auth with Supabase 0.10, as they changed the login flow. Is this something you have on the table? (Will you resolve this promise soon? Lol) Thanks for reading. You make great things.

[@liamb5555]

Great video! You are 1 sub closer to your goal of 1 mil by the end of the year :)

[@Huntabyte]

Thank you!!

[@babyfeavel71]

Very nice content! I hope you can make a video on “Supabase CRUD app with SvelteKit”🎉

[@Willcodeforpokemon]

is there anyway we can get an update video? thank you for the content!

[@ofeenee]

How come you installed supabase sdk and helper as dev dependencies @1:36? Aren’t they supposed to be included in the final built and in runtime as part of the main project?

[@sean_reyes]

what extensions are you using on your vscode for proper type safety helpers?

[@sikandarbhide5354]

Can we get the Updated Video

[@Killtec]

at 7:29 in interface Locals you write session: Session | null and in PageData you go session: import(etc).Session, but you already did an import and used Session, why not just write Session in PageData like session: Session | null;, am i missig something here?

[@Huntabyte]

No! I'm was just being an idiot haha! I copied one of them over the first time so I just kept it, either way works but choose one or the other.

[@fomofilter]

Everything worked perfectly upto and before the progressive enhancement chapter even with the following error "Error: Not found: /cart.json" which I am trying to correct before moving on ... any ideas?

[@goshmain982]

One fascinating thing I notice is how can you remember all this supabase functions.

[@Huntabyte]

Trust me, I rehearsed this video a few times before recording, there are a lot of things I do remember, but some little details still trip me and everyone else up!

[@UdayaKumar-fg5in]

Can you please explain the same concept using csr only since hooks will not be helpful if we are going with only csr. Thanks in advance!

[@DanielRios549]

For me it says on terminal "No storage option exists to persist the session, which may result in unexpected behavior when using auth", something about "persistSession" option

[@estebancordoba555]

man nice video, just suscribed! do you mind creating this example but using and API in nodejs please? with jwt and 0auth stuff?

[@paterfamilias01]

good stuff

[@Huntabyte]

Thank you!

[@CrimeBeanus]

almost made the 1 mil goal XD

[@Huntabyte]

So close!

[@mr_clean575]

Since this was made a year ago, if I use the github repository from this, is there anything I would need to update with new versions of svelte?

[@dongums]

can you teach about user role in supabase, properly protect routes with supabase?

[@addidix]

How can the error message for incorrect login credentials be displayed to the user upon page reload?

[@naolfekadu6101]

I have additional user data I fetch from a table, like the subscription and all, who and where should I store this information so that it's persistent and available through our the app, Keep in mind I also need the data for redirection so on the server

[@MrAndrebooysen]

Hi Hunter, it seems the Supabase auth helpers library has changed since your video. The createClient and getServerSession methods are no longer there, I had to stop following your tutorial after t the 5 min mark.

[@vrlettuccine]

SAME

[@hiranga]

Is this setup comparable or much the same for going with Firebase + Sveltekit?

[@Huntabyte]

It should be!

[@nicholassingh138]

God sent. Is there anyway I can book a 1hr session with you ?

[@Huntabyte]

Message me on Discord with more information into what you are looking for and I will let you know!

[@CodeNCut]

Thoughts on doing a tutorial on SvelteKitAuth with other providers? The recent Auth.js example is pretty terse and didn't really show a best practices implementation from a security perspective.

[@Huntabyte]

Yeah I'm looking into it/waiting till it gets to a more stable release (to prevent my video from becoming outdated in a short period of time)!

[@amorfati8277]

Very Nice Video and Great explanation. I have to ask as to why you created an endpoint for the logout functionality? Why couldn't you use same actions for logout? Or is there merit to using the endpoint? Thank you in advance

[@Huntabyte]

Thank you! I could have certainly used an action for it, however, I just chose to use an endpoint!

[@ABsazerNer]

can I use supabase as local backend not in cloud and deploy it locally?

[@Huntabyte]

You sure can!

[@FreeSki4Life720]

Instead of conditionally rendering something on the index page based on the session, how would you go about redirecting the user to the login page?

[@Huntabyte]

Inside the load function of the +page.server file, I would run if (!locals.session) { throw redirect(303, ‘/login’) }

[@chrisdavis3143]

This is awesome! Do you have any insights on how to implement a simple site password, where someone needs to fill out a password to access any page of the site?

[@sean_reyes]

can you do a social provider login? should that still be server side? or is the purpose of making everything server side is to just make it possible for my site to work without javascript?

[@Huntabyte]

Coming very soon. When building apps with SvelteKit, I always start out with Server-side first, and then slowly progressively enhance the client-side where possible and practical.

[@theshy6717]

how did you make the tabs on the left panel? it looks good and helpful

[@Huntabyte]

It's just vertical tabs on Microsoft Edge!

[@theshy6717]

@@Huntabyte I’m sold

[@rlBrave]

Can you make the same tutorial for AppWrite? Would be amazing!!

[@Huntabyte]

Spent a few hours today on stream trying to see if their SDKs support this currently, may have to make a custom port but I am certainly working on this!

[@AnjitaGhimire-de9nr]

Please do the Phone auth with twilio, supabase and sveltekit. PLease...

[@Thomas-pg1xi]

When I log the session on the frontend I have access to access_token and refresh_token isn't this an security issue?

[@Huntabyte]

The browser has to send the tokens with client-side requests. This enables both client and server-side communication with Supabase.

[@beautiful-css]

Hello :) What browser do you use? Thank you!

[@Huntabyte]

I use Microsoft Edge!

[@tommo0]

what's the point of the progressive enhancement javascript at the end? everything seems to work perfectly without it, like the sessions are handled properly and I never get displayed the wrong elements, so why write a JS function to do the same thing as what happens when we POST, why not just omit the JS entirely and stick to the HTML form (when applicable for simple apps)?

[@Huntabyte]

Feels more snappy and provides a better user experience. You don’t have to of course, but it’s a nice touch to make your interactions feel more seamless/less clunky.

[@tommo0]

@@Huntabyte thank you so much for the response! and keep up the supabase content, it's amazing

[@DanteMishima]

But how would I handle multiple users with this method 🤔

[@rbt5664]

This seems to only work on an older version of sveltekit If I make a new repo I get these errors: 4:35:26 PM [vite] Error when evaluating SSR module /src/lib/supabase.js: 4:35:26 PM [vite] Error when evaluating SSR module /src/hooks.server.js: Idk if its supabase or sveltkit the problem

[@Huntabyte]

Supabase updated it's auth-helpers library for SvelteKit. :( I will release a new video soon.

[@rbt5664]

@@Huntabyte Thx! I can’t wait to see it!

[@adammalec9315]

@@Huntabyte looking forward to!

[@naeemrind1776]

Plz make a video about CRUD Todo or Notes app with svelte using local storage.

[@codingcambodia]

how to make protected routes

[@matthewpaquette]

lol I had to confirm my email. I was going insane. session kept coming back null

[@maskman4821]

Sir, how do we protect route if we have login and member pages ?

[@luminox1]

Usually the procedure is to check server side for a client session, if there's no session you either redirect to login/throw a 401. That check would be in +page.server.ts of the page you want to protect ,could also be on +layout.server.ts depends on how you structure your stuff

[@Huntabyte]

Exactly what @Luminox mentioned. At the top of the +page.server load function or action -> if (!locals.session) { throw redirect(303, '/login') }

[@nicholassingh138]

Are you going to also explain how the RLS works? Example if we only want to show the jobs created from a user alone in their dashboard that they only have access too

[@maskman4821]

Thank you so much 🙏

[@sjfieksnd]

is it safe?

[@ofeenee]

Why cancel() again? How come it’s still submitted even when you run cancel @19:25? I don’t get it… 😔

[@Huntabyte]

Since I’m running signOut on the client, I don’t need to send it to the SvelteKit server to take care of it.

[@ofeenee]

@@Huntabyte oh! It’s like deleting the cookies using the browser api instead of requesting a response from the server with headers to expire the cookies on the very same browser. Smart! Thank you for the reply and the clarification!

[@ofeenee]

@@Huntabyte also, awesome videos! I can see you getting to 1M by the end of the year! Keep it up, and thank you for the great content!

[@CodeEnthusiast78912]

i cannot get it working, im getting this error:" Cannot destructure property 'supabaseUrl' of 'getConfig(...)' as it is undefined." Can you please tell us the javascript version of what you are doing, I don't know typescript and supabase doesn't have a javascript guide either.

[@KOPE7]

please change import { createClient } from '@supabase/auth-helpers-sveltekit' instead of import { createClient } from '@supabase/supabase-js'

[@CodeEnthusiast78912]

@@KOPE7 i tried both, still get the same error

[@KOPE7]

@@CodeEnthusiast78912 I noticed that I omitted the 'await' in signUp method.

[@CodeEnthusiast78912]

@@KOPE7 i made it work finally, somehow xD

[@ryan.northcott]

@@CodeEnthusiast78912 What did you do!

[@greendsnow]

Meldiron has a good library in Appwrite too. Appwrite is much more scalable compared to Supabase.

[@alrojohnmercado4199]

Please do tutorial for upload,fetch image using supabase in svelte

[@scott_itall8638]

I find auth so hard

[@sikandarbhide5354]

This Video is Compeltety Outdated

[@zuzukouzina-original]

Why is that so? Can you be more specific?

[@johnddonnet5151]

This video is completely outdated, they changed everything

[@Huntabyte]

Unfortunately, KZbin doesn't let you go back and update old videos :/

[@MrBiggydicks]

Big ol' like. would love this to continue into maybe integrating protected routes or even a dashboard type thing where the only non-protected routes are the register and login pages

[@Huntabyte]

Thank you! Will do!

[@techytimo]

Thanks for this! Quick question... What prettier or vscode setting is making your {list, of} imports and (list, of) arguments get organized each on its own line when you save the file? Check time 2:34 on the video

[@Huntabyte]

No, I didn't mean `LayoutServerData`, you may need to restart your TS server. I'm using Rome for code formatting, so I believe that is what's taking care of the import organization!

[@techytimo]

@@Huntabyte Ignore the LayoutServerData question that I removed. My issue was not naming the layout.server.ts with a plus before it

[@techytimo]

@@HuntabyteI just checked our Rome and liked it! Why keep prettier and eslint configs then though?

[@dongums]

how to protect routes properly? handle hook.server only works on first load or reload but then clicking link it doesn't run

[@trixchronicles]

Very clear video Hunter! I was following supabase docs + your videos and I had some questions: 1) Why do we need to call await getServerSession inside +layout.server.ts ? Since we stored the session in locals in the hooks.server.ts can't we just return that ? e.g. return { session: event.locals.session }; 2) Not shown in video, but would you use the supabase client stored in locals or import the client from $lib/supabase when doing queries in your pages/layouts.svelte

[@Huntabyte]

The reason we await getServerSession is because of the auth subscription. If there is a change in auth state, we invalidateAll which triggers that load function to rerun, thus updating the session.

[@trixchronicles]

​@@Huntabyte I was going through your lives and my question was almost exactly what you were asking here : kzbin.info/www/bejne/oV6zY35ths2sgbM

[@ryan_roga]

I mean.... You did also have a video that clearly says don't put your auth layer in your layouts. How would you modifiy this to put it in hooks.server.ts like your other video??

[@Huntabyte]

The session is set in locals.session by the handle hook (see 5:15) . The session we're returning on the layout is strictly to give access to the user details on the client side for UI stuff (showing logged in email, etc.) via PageData. Anything auth wise for server side endpoints/load/actions you would want to check with if (!locals.session) { throw redirect/error }. Just make sure you apply that to every server load function and action that you want to protect, not just the layout.

[@JavierSuarez-qi7so]

2:44 I can´t go pass that phase, because it gives me the error that Module '@supabase/auth-helpers-sveltekit' has no exported member 'createClient'." I just love how a tutorial that is 4 month old its already deprecated because some nerds just decided to change the code again.

[@Huntabyte]

Yeah it seems that way :/

[@Scott-fl4xr]

@@Huntabyte Any chance you plan to edit/comment/replace this video with the Supabase client changes? Your tutorials are awesome and while I agree that it is annoying to see breaking changes, Supabase does indicate that the integration is in beta and likely will have breaking changes. Maybe after they have graduated to an official production version?

[@digitaldrreamer]

Hey @huntabyte. Can you please make a new video on the new Supabase Sveltekit SSR or Lucia V3? A comprehensive one please. I've nearly gone mad on finding simple and reliable authentication. I'd really appreciate if you did 🙏🙏🙏

[@fegreat2462]

new version of supabase auth help don't have getSupabase

[@ryan_roga]

Any idea why this: import { createClient } from "@supabase/auth-helpers-sveltekit"; import { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } from "$env/static/public"; export const supabase = createClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY); Would be giving me the error: Error: supabaseKey is required. at new SupabaseClient (... ode_modules\@supabase\supabase-js\dist\main\SupabaseClient.js:57:19) at createClient (... ode_modules\@supabase\supabase-js\dist\main\index.js:35:12) at createBrowserSupabaseClient (... ode_modules\@supabase\auth-helpers-shared\dist\index.js:316:46) at Proxy.createClient (file:///.../app/node_modules/@supabase/auth-helpers-sveltekit/dist/createClient.js:18:28) at .../app/src/lib/db.ts:4:24 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async instantiateModule (file:///.../app/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:52224:9) When my .env file looks like: PUBLIC_SUPABASE_URL="[secret_shhh].supabase.co" PUBLIC_SUPABASE_PUBLIC_ANON_KEY="[secret_shhh]" NODE_ENV="development" Assume redacted values are correct Supabase values. I've triple checked those.

[@Huntabyte]

Have you logged the environment variables to make sure SK is actually receiving them properly?

[@ryan_roga]

@@Huntabyte I did try that, yes. In the end I had to destructure env and then pull each of those values out of that. I also had to use dynamic, as static wouldn't return any env variables. Any ideas why that is? Yours seems to work fine. 🤷‍♂️ import { env } from '$env.dynamic.public'

[@TheRealJuggaloJoel]

broken. Cannot destructure property 'supabaseUrl' of 'getConfig(...)' as it is undefined. TypeError: Cannot destructure property 'supabaseUrl' of 'getConfig(...)' as it is undefined. at getRequestSupabaseClient (file:///C:/Users/Joel/Desktop/projects_2023/tech_zone/tutz/supaDupa/node_modules/@supabase/auth-helpers-sveltekit/dist/utils/supabase-request.js:10:13)

[@buiucnhan7715]

My Visual Code shout at me that import {PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } from '$env/static/public' is invalid, i don't know if I done it right

[@Huntabyte]

You have to have your dev server running before it'll pick up your environment variables!

[@vinithsriram]

Getting this error 4:36 (Module '"@supabase/auth-helpers-sveltekit"' has no exported member 'getServerSession')

[@Huntabyte]

The library updated - I haven’t gotten a chance to update the repo yet!

[@vinithsriram]

@@Huntabyte Firstly thank you for the response, so instead of that what should i use?

[@Huntabyte]

@@vinithsriram Use the Supabase Auth Helpers SvelteKit docs - they have a step by step to get setup

[@djubadjuba]

Is the library @supabase/auth-helpers-sveltekit used in this video deprecated as of today April 26th, 2023?

[@Huntabyte]

No, but it has changed a lot since this video.

[@anksvans]

will you be doing a similar tutorial but with the new SSR auth introduced by Supabase?

[@Huntabyte]

Yes!

[@kozmikhero6749]

@@Huntabyte Omg thank you! I've been learning web dev using sveltekit for the last two months and I've been having so much trouble using the new "@supabase/ssr". I'm making a rather large project with supabase/prisma/sveltekit and I might wait till you make this video to explain things clearly! Other parts of the project will call my attention for now