Exploring Service Workers

Login & Logout Routing

Kyle Simpson

Kyle Simpson

You Don't Know JS
Exploring Service Workers

Check out a free preview of the full Exploring Service Workers course

The "Login & Logout Routing" Lesson is part of the full, Exploring Service Workers course featured in this preview video. Here's what you'd learn in this lesson:

Kyle discusses routing behaviors for authenticated users visiting login and logout pages. Explanation is given for why the behavior of cache routing is designed to mimic the server.


Transcript from the "Login & Logout Routing" Lesson

>> Kyle Simpson: Let's finally talk about my strategy for handling those special URLs, because there's definitely some nuance there that we should look at, let's talk about the /login. As I mentioned, /login redirects itself to the add-post page if you are logged in, so if you're online, I want to do something where I try to let the server do that redirect.

So, I want the server to revalidate that you are either logged in and it does a redirect or you need to login, so I'm gonna defer to the server if we're online, but if we're not online, then I wanna do something different. If I can tell that we're not online but I still think you're logged in, then I wanna go ahead and just show you the /add-post page, cuz my assumption is you probably still are logged in, I don't know for sure, but you're probably logged in.

Why not go ahead and show you the /add-post page? If you're not online and you're not logged in, then I would do exactly what the server would do, which is I'd give you the login page. And if all of that failed and for some reason I didn't have the login page, my final fallback is give you the offline page.

Do you see the way that I thought through that flow? I'm basically turning my service worker into a proxy that mimics the logic that I have on my server, and the reason for that, and this is a big take away, the reason for that is I want for the user to have as close of an experience offline, or server broken, as when the server is online.

And so I'm deliberately thinking about how my server behaves, and I'm mimicking that logic even in the offline cases, in my service worker.
>> Kyle Simpson: All right, let's skip over logout, we'll come back to that one, add post it's similar, but kind of the inverse of the login. This one, definitely, we have to already have been logged in, so if I'm online, I'm gonna go ahead and make a request and then if I'm logged in, so I make a request if that works great.

If not, I want to pick one of these two pages to try to pull from the cache, if I think that you're logged in and you're accessing add posts then I wanna pull out posts from the cash. But if I don't think you're logged in, then I just gonna assume that you probably want the login page, okay?

If that works great and otherwise, basically I've got nothing else to do other than to redirect you to the homepage, because it doesn't make sense to show you the offline page in this case because I do know that if you're not logged in, and we don't have any of that cached, there's no more fruitful thing for you to do in this route.

So let's go ahead and take you back to the home page.
>> Kyle Simpson: If I'm not online, but I'm logged in, just try to show you the add-post page and if that fails, then show you the offline page. And if I'm not online and I'm not logged in, then show you the login page, and otherwise fall back to the offline page.

>> Kyle Simpson: Finally, let's look at the logout, cuz this one is a little bit more interesting than the other two. In the case of a /logout where we're online, definitely let the server handle it. So if we're online, make the call to the server, if the server tells us that we're redirecting, just go ahead and do the redirect.

We could just return res here, but I'm just gonna go ahead and forcibly say, let's redirect to the homepage, cuz that's where I know we're going. So it's a judgement call whether you should return res here or not, but anyway, if that fails, meaning it wasn't a redirect, then I should check to see if I am logged in meaning I tried to contact the server cuz I think we're online, but that failed.

So what do I wanna do? I wanna pretend as if we logged off. So the way that I'm gonna pretend as if we logged off, is I'm going to send a message to the page, here's my send message. I'm gonna send a message to the page and tell the page, delete the cookie.

So the page is gonna delete the cookie, I'm gonna wait 100 milliseconds to make sure that that cookie has actually been deleted, and then I'm gonna redirect you to the home page as if you'd actually done a full logout. So even if you're offline and you click the logout link it looks like it allows you to log out.

It's deleted the cookie so even though the session might still be on the server, you're effectively logged out cuz you don't have that session cookie anymore. If I am not online but I am logged in, I'm gonna do the same thing, I'm gonna force you to log out, delay by 100, redirect to the homepage.

And if I'm neither logged in nor online this is a no op, so let's just go to the homepage.

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