Qwik for Instant-Loading Websites & Apps


Miško Hevery

Miško Hevery

Qwik Creator (Previously Angular)
Qwik for Instant-Loading Websites & Apps

Check out a free preview of the full Qwik for Instant-Loading Websites & Apps course

The "Authentication" Lesson is part of the full, Qwik for Instant-Loading Websites & Apps course featured in this preview video. Here's what you'd learn in this lesson:

Miško adds authentication to the application. The onRequest method is added to the layout and behaves like middleware, catching every request to the server. A condition is added to check for a cookie and redirect the user to the login if it is not present.


Transcript from the "Authentication" Lesson

>> We should probably add a back button here, so let's just fix that quickly. Because I keep wanting to click it, and I can't. What's going on here? We have JavaScript? It's disabled. No, what did I do? It's the wrong one, it's the form. Okay, edit. Okay, well, whatever, back button has unnecessary brackets here.

Okay. So let's say we wanted to have this behind a login screen, right? So how would you do that? So a typical login is done through cookies, right? So let's make a new route called contacts/login. Let's go to routes. Index, sorry, login/index.tsx. And in here, export default component.

I can type, I promise. Okay. Okay, so, we have our todo. And, actually, I'm gonna change this to index!, So that I don't get any of the chrome of the page, right? [COUGH] And this will be pretty simple, it's just gonna be a form, right? And the form is, And this needs to do a post.

Okay, so we're gonna need onGet, [COUGH] Request, What was the method called? Now, I can't remember, RequestHandler. Const endpoint, wow, look at that, so good. endpoint, so now we have to have Resource value endpoint. OnResolved, Resolved, Say it again.
>> Value endepoint, as opposed to endpoint, line 15.

>> Resource value, and there it is.
>> Okay. Login is unknown, why is it unknown, endpoint, because I have to import this, so that's happy, that's happy. What am I doing here? This goes with this guy. So that goes here. Here we go, all right. So the onGet just returns no username, no password, and no error, right?

That's the initial, think so, now, at this point, yes, let me, Okay, so now I can type, and of course, I don't have a onPost handler, so let's do that. Wow, this is so good, mind blown, how in the world does that do that? I have no idea, oops, what just happened?

Okay, seriously, how does it know that? But let's see, formData, we grabbed the form data from data username. Yep, sure, look, guys, it even generated a fake route for me, that's. Okay, response.redirect to contacts. Yep, that sounds right too. [LAUGH] Otherwise.
>> When you ship Microsoft enough code, they figure out what you want next.

>> [LAUGH] How? All right, autopilots, you are, okay, I believe that's correct, [LAUGH] let's see. Because I didn't do the code to say value=, login.username here to persist that, and then placeholder should say username. And here, placeholder should say user password. Look at that, that's amazing. Look at that, it's just crazy.

So if I do admin, look at that, it redirects, that's crazy. Okay, I just, sorry, I can't get over this. Okay, but this is a lie, right? We're not actually logged in, we didn't actually do anything. So, the first thing we need to do is basically say, if you navigate to one of these pages that are protected, you need to check to see if there's a cookie.

And if there's no cookie, off the login you go. So, the easiest way to do that is to go to the contacts and find the layout. And in the layout, we add a onRequest method. So, export const onRequest, meaning I don't care, onRequest. Which means I don't care if it's a get, post, delete, whatever the verb is, I wanna know about it.

And so, in this particular case, we are gonna go cookie. And we're gonna say, cookie.get. Can I make up a cookie here? Now, you'll probably have to have some code that verifies the cookie. I am skipping over that, right? This is kind of, you are wrong. So I'm just gonna do it very, very simply, and say, look, if the cookie is empty, if I don't have the cookie, then I'm gonna assume that I'm not logged in.

Again, this is not what you would do in the real world. In real world, you have to put some kind of encrypted data in there, and then decrypt it and see if it's valid. Or check it against session, or something more complicated than this, right? So, if I don't have a cookie, then I need to redirect, so I will say throw response.

Response, because this has to be RequestHandler. Let's just leave it void. [COUGH] response.redirect. So I wanna go to the login, but I wanna say redirect and response.url, yes, request.url. Request, request, right? We wanna take the current URL, put it in there, so that we know where to come back to.

I think that's it. And look at that, it already redirected us, right? So we were at /contacts, we got redirected to login, so now we need to log ourselves in. And so, if you go back to the login, It's not just we redirect ourselves to contacts, we should redirect ourselves to the redirect ID.

But before we can do that, we need to set a cookie, right? cookie, cookie.set. So what was the cookie name? Okay, again, you wouldn't do true, cuz that's a horrible cookie. [LAUGH] Let's see, I'm sure there's third party libraries that do this kind of stuff, right? So it's something that you wanna do over here.

And so, the thing we want over here, so actually before I do that, it stays the same URL, right? So then we just need to do, we need to redirect to request.search. How do we do this? Right, request. Request, and then is request, response, url, params, platform, okay, so that's the URL.

Okay, so we have to do the URL. So we get the URL. And then I believe you have to say const redirectUrl=new. Yes, my gosh, how did you get that, redirectUrl. So now, if I don't type anything here, it doesn't work. But if I do admin, it should have redirected me.

I think when you're setting a cookie, I think you have to say which path you are for, and you wanna say for everybody. I think that's what the issue is. Yes, there we go. So now, we have that bit as well, and of course, you could add one for doing a logout, which just deletes the cookie etc.

So the point of this is that, where's my layout? The point of this is that you can guard everything in a subdirectory with a top level onRequest, which doesn't care whether it's an onGet or onPost or onDelete, and it gets to execute. And this particular middleware can then basically says, you're not logged in, and so just redirect everybody under this location to a different URL.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now