ฝัง
- เผยแพร่เมื่อ 8 ก.ย. 2024
- Not all redirections are created equal, let's learn how to improve how we redirect our users when they attempt to access protected resources without being authenticated.
If you find my content useful and want to support the channel, consider contributing a coffee ☕: hbyt.us/coffee
📁 Final Source Code: github.com/hun...
🚀 Become a channel member: hbyt.us/join
💬 Discord: hbyt.us/discord
🐦 Twitter: hbyt.us/twitter
🖥️ Setup Stuff: hbyt.us/gear
📃 Topics Covered:
- SvelteKit Login
- SvelteKit Form Actions
- SvelteKit Redirects
- SvelteKit Protected Routes
- SvelteKit Load Functions
- SvelteKit Auth Guards
It's the little things that makes the biggest differences when it comes to user experience.
💯. Thanks for the comment my guy!
Good one, thanks for bringing this up! One thing that's missing here is that you would want to urlencode the redirectTo parameter before appending it to your url because any additional search params will get lost if you had 2+ of them on your initial route.
Very good reminder to use the most basic state management: URL!
Thanks for all the hard work! Its little things like this I never would have thought of for my application that makes things much more polished
You're very welcome
Thank you, I was just looking into it the other day. Your implementation seems easy and makes a lot of sense
Glad it was helpful!
Great idea ! Very useful
Add in project via hooks
const protectedRoute: Handle = async ({ event, resolve }) => {
if (event.route.id?.startsWith("/(protected)")) {
if (!event.locals.user) {
const redirectTo = event.url.pathname + event.url.search;
throw redirect(303, `/login?redirectTo=${redirectTo}`);
}
}
return await resolve(event);
};
export const handle = sequence(auth, protectedRoute);
Very good idea! Only problem is you lose the ability to define specific messages for each redirect if you wanted!
Great video. I'm not sure if this is mentioned in the video but this only works with default action as far as I can tell, because named actions replace the search params. For now I have added redirectTo to the form in a hidden field but an alternative solution is welcome.
You should be able to add additional query params to named actions. For example, if you had an action named `createItem`, you could do `?/createItem&redirectTo=whateveryouwant`. I haven't tried this specifically just yet, but I would think that would work.
@@Huntabyte ah, of course. Thank you, will try it out
Great video !!! I have noted something with the form, which is when the actions is default, it works great but when the actions is login for instance, the search in the event is changed to the action pass in the form so "?/login".
You can add something like this to the formAction
` `
That would append the redirectTo to the URL without any issues
It's funny how it looks exactly the same like an app I created just now (we both used an untouched pico.css duh...), and I needed to solve that exact aspect that you are talking about, so cheers, nice tips.
Thank you!
6:40 You can skip the `let message: string` declaration because Svelte's reactive statements will inject a let declaration on your behalf if said statement consists entirely of an assignment to an undeclared variable.
I liked this video so much that I liked it twice without noticing! Keep it up!
Perfect timing. Just today I was thinking I need to do this and voila!
I read your mind!
@@Huntabyte I was thinking that, but then I figured you shot the video yesterday. So you have made skills if you can read my mind before I have even had the thought.
Whenever I am developing I highly consider UX even if it beats the UI haha. Remember the UI designer aint gonna be the one who's going to be looking at the app all day. But it's a bliss when you work with a UI/UX designer, the consideration they put on the designs are tremendously helpful to developers.
Glad I subscribed.
Thank you! I am glad you did as well!
I am new to the svelte/sveltekit but with the background of react/newxjs, I liked this video, it is very informative and the subject is explained well...
I would like to see full authentication app {login credential, oauth, verification, two factor, and so on using sveltekit, lucia, tailwindcss, prisma, postgress such as neon)
thank you.
Great video as always Hunter! Thanks for the tip
Thank you and you're very welcome!
A bit irrelevant a question but can you explain form validation on client side with use:enhance and server side with form actions (both using zod for validation)? In some tutorials I see people use one of the two validation methods instead of both. But when I ask on stackoverflow it is suggested that I do validation on both server and client.
Btw great video, really help me with my project.
Yeah! Check my recent video on forms out, that should answer your question! You should ALWAYS at a bare minimum validate on the server, but of course client is a nice UX touch.
Great stuff! Appreciate this format.
Thank you! More to come!
Great content Hunter! thanks
Thanks, and you're welcome!
Great video as always! Out of curiosity, would the redirect link and message be better suited to a store?
this should have way more views
Shouldn't the query parameters be escaped with encodeURIComponent?
Yes
This is handy. Thanks Sir
Glad you think so! You're welcome!
It's a cool!
The concept is good, but not sure I like the idea of passing a querystring param with something so obvious like "redirectTo"... wondering if it would make more sense to encapsulate this in app state, which would be much harder to inject to. Just a thought. But thanks for sharing.
🔥
Thanks for the video.
I'm not a huge fan of passing the message as a query param because it would allow anyone to forge what is gonna be displayed on the page itself.
Could we do it differently ?
I thought the same. Maybe you could write your own custom error hook that allows you to pass additional parameters in the response and persist them through client side routing or localstorage. Or maybe the up and coming view transitions api will help.
The easiest and maybe most secure fix though might just be to cryptographically sign the redirect url on the server and append the token to it, then validate that token against the redirect url in the page server load.
always impressive content
Thanks for taking the time to comment on so many of my videos, I appreciate you!
Nice explainer!
Thanks!
Nice. I will do this in my app today hehe.
Btw, are you using any special software for zoom in/out effect in your vídeos?
I have seen Screen Studio, which is fantastic but only available for MacOs
I do all the zooming in post production with premier pro!
Hey, thanks for this great video!
Regarding routes; would you know if its possible to create fully dynamic routes using sveltekit? meaning the routes would come from an api and you basically would avoid the folder structure?
Content from URL passed directly to document? That smells like some juicy XSS
Nice concept and I think it's important to keep in mind. However, I see a flaw with the design. I prefer also to hide particular UI elements when a user is not logged in. This is s simple example of course, but I would say that showing the account link to a non authenticated user id bad design
Indeed it is, this design is for demonstration purposes.
How exactly would you implement this? If a logged out user can’t see the url they want to go back to … how will they get back to that url?
I'm using the same approach but for server message, instead of adding it to search params, I'm using a library: `sveltekit-flash-message`
Also a great library made by the creator of superforms :)
This is a valuable lesson, very useful, thank you Hunter, btw can you make a updated Sveltekit + Supabase auth + route guard turorial, Supabase has changed auth api/functions/expressions a lot these days, and also if possible make a chat app with Sveltekit + Supabase realtime, I think people want to have tutorial in this topic 🙏😘🤗🤓😎👍
Already in the plans :)
🔥 🔥
This video is exactly what I needed. How did you do that??
My form action is overriding my url params. ex. "/login?log_in" Any thoughts on a solution?
my solution was to put the redirectto into the forms action="?/login&{data.fromUrl}"
I feel like the redirect message in the url is a bit too open, cause anyone can construct a link with instructions to go on a different website for malicious purposes and it would just be displayed on the webpage, I feel like that should be passed in a way that could only be sent from the server, like headers
Is it possible to use cookies instead of the url params for redirects?
Certainly! You’d just have to grab the cookie contents, convert it to JSON, and return it via the page data!
Very cool tip! This is how a convenient login process looks like. It is cool that it is so easy to implement with SvelteKit.
Just a minor nitpick: it is a bit "ugly" that the message is passed as a URL parameter. It would be nice to have this as a page parameter and sent it somehow during the redirect, just so that it is not visible in the URL. Is this possible?
Hmm, I know it's possible to send via a request body but with the redirect method I'm not sure exactly how that would work. I will have to explore this a bit further
Haven't looked into this much, but would it be possible with a store?
Amazing help and work :) Great stuff. One suggestion, because Your videos are like a perfect little tutorial / docs, maybe name them a little bit more informative like `Redirect to Protected Route after Auth` ? Later it will be very easy to find what You need :)
Thank you!
Nice, but... what's happens with a named action in login server file ? On my side, search params are "overwrite" by action's name, no ?
I think in that case you can still put the redirect URL in the search params. Or in a hidden form field if you can't. However, I'm not sure if say POST actions should be automatically replayed after login 🤔
@@pmj_studio4065 I succeeded by adding the parameter after the action name in the action attribute, like this: action="?/handleLogin&redirectTo=/toto"
Yeah it could be passed as a second param to the `action` if you wanted! I do this quite often.
@@Huntabyte How do I pass this as a second param to the action?
@@Huntabyte Further to my last I did manage to get this working on a named action by getting the search param from the page store and then setting it to the action parameter inside the form enhance function, but not sure if there is a way to do it without using enhance?
I see a potential bug. Try going to /account?update=true&message=bleh … which message will win? Will the message part of the query string be included on the redirect back to account?
Yeah I think you would get redirected first to /login?redirectTo=/account?update=true&message=bleh, and then to /account?update=true - to make that work correctly you need to escape redirectTo with encodeURIComponent.
the github link for the source code is not found..
Fixed!
So events is a session or local storage?
Didnt have a use case yet so didn't reas the docs
Event is the RequestEvent. Locals is a custom object set by the `handle` hook that can be access from other server-side functions. I have a video on hooks if you want to learn more.
@Huntabyte nice thanks alot, all your vidz are informative
UX designers don't get enough credit for all the migraines they save humanity from 😎
Facts 😂
This doesn't work with named actions
Solution:
Assuming your named action is ?/login
Login
Would you put this in a hook or layout to prevent re-writing for every protected page?
5:07
I've watched your other video about protected routes and I think this way of protecting is not secure? Things have changed?
This is in a +page.server not a +layout.server, therefore it is secure 👍
@@Huntabyte would mean you have to check this in every page then? Hooks the best place to check, no?
clickbait title, we all know this information.
I have a suggestion to make the message url safe use: `/login?redirectTo=${fromUrl}&message=${encodeURIComponent(message)}`
But why using the load at all? Why wouldn't be better to do it in a hooks.server.ts handler?
I hate to say it, but it depends. They both accomplish the same thing, this is just a simpler way to add granular control on a per-route basis. For example, on form actions for unauthenticate users I don't want to throw a redirect, I'd want to return an error. There are ways to accomplish this by accessing the request method via the hooks though if you prefer that.