The Problem with Using Layouts for Auth

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.

⭐ Starting Code

📁 Final Code

💽 Check out my other SvelteKit Videos!

📚 Resources Mentioned In This Video:

📃 Topics Covered:
- How to add authentication to SvelteKit
- How to protect routes in SvelteKit
- Hooks in SvelteKit
- SvelteKit Middleware
- SvelteKit Protected Routes
- Handle hook SvelteKit
- How do hooks work in SvelteKit?
- What does the handle hook do in SvelteKit?
- Auth Guard in SvelteKit
- How to guard routes in SvelteKit
- What is SvelteKit?
- How to authenticate users in SvelteKit
- Layouts in SvelteKit
- Protect routes with layouts in SvelteKit
- SvelteKit Security

__________________________________________

(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!)

[Huntabyte]

I don't know about you all, but I'm a for protecting large groups of routes in the handle Hook.

[boian-inavov]

Thanks for bringing exposure to this! Since the layout call is cached on continuous redirections it shouldn’t actually be used for auth, but hooks should be, since they’re running on every request as middleware. Still it seems like an easy mistake to be made, so people should definitely be mindful of this case 👏

[maskman]

Wow, I really learned a lot from your tutorials about Sveltekit, this is the best and the most valuable learning resources for people who want to quickly dive in Sveltekit application development, I have actually got stuck in authentication for quiet a while because I have no idea how hooks, locals, etc. work and what do they do until your tutorials come out and it save my day, thank you so much 🙏🙏🙏

[richardfeynman-sdrg]

This is high quality stuff, the kind of errors most people would make and gloss over. Hoping now that sveltekit 1.0 is out, it starts to get some serious industry traction.

[RedBlade]

Wow this was awesome! Thank you so much for this! Hopefully you'll do more security / structuring videos!

I'll try to support you financially next year because these vids are so valuable for me! Keep it up

[whatever]

The problem is that you shouldnt be running these checks on the client anyway.

[codewithguillaume]

Dude gonna watch this as soon I am at home

[adamshand]

I was making this mistake and being confused by why it wasn't working as I expected. Thanks!!

[_phenomen]

Supabase's SvelteKit starter guide is a security disaster

[DavePerth]

Thanks Hunter - letting you know the github links are broken, but you can find them in all Repositories...

[SumanthChinthagunta]

I was using login check wrongly in layout, thanks for explaining

[hknsegw]

Thank you so much, I was doing exactly the example of the beginning

[lwinklly]

This video appeared in my recommended loads of times over the past year and I never clicked it, I only remembered now it because I just found out our site has this problem lel

[samifouad]

it's not necessary to make another request just to validate a user, it works but for latency reasons it's easier to work with JWT in an http only cookie as they can be a tool to quickly validate the request as authentic without an extra network request to do the same work

[jangxyz]

1 year later, for some reason cloning the exact same repo#main does not seem to show the behavior. It always runs "Run Layout Auth Check" for the same scenario. Any idea why? Curious as it is running the same sveltekit version (1.0.0)

[otockian]

The real problem here is that the database call isn't passing the auth token along before it pulls data so that the backend ensures your authenticated and have access to the data. That's the real issue, in fact even with the fixes you did, someone could still spoof and call that call to get customers and still get them. Fix that, and everything you showed here is fixed, and then yes you can do the rest of the stuff. But all backend calls for any sensitive data that should be scoped to a role, should pass that data along.

[sourabh]

Thanks for another great tutorial. Could you please create a video for firebase and sveltekit authentication?

[MikeHTMLAllTheThings]

Great insight, totally didn't consider this.

[ricardoamendoeira]

The main issue here is the server returning data without making any security checks, that's the main issue to be addressed. The server should never return non-public data without checking for a valid token or session.

Get that done and all this client side validation becomes purely a UX improvement, as it should be, because you can't force attackers to go through your client side code before making requests to your server.

[IBakeCookies]

What if you copy +layout.server.ts, create +layout.ts and paste the same logic there? Wouldnt that solve the issue?