Current section: Protecting Routes 6 exercises

Creating an Auth Utility

Loading solution


00:00 Because we're going to need this on multiple routes, I want to make a utility for it. So we're going to make auth.server be our utility. Kelly moved a bunch of stuff into here. So there's a couple of things that we were doing in other routes that we've just put into here, like the login and signup functions, all that stuff. So we have all of our auth stuff in one place. And we're going to make another utility

00:19 called requireAnonymous. So let's export a function called requireAnonymous. And here we're going to take a request and that is going to be our request. There we go. And that request, from that request, we can get the user ID. So here we have our getUserID. That's going to pull that from the session.

00:39 It's going to find the user. If the user isn't there, then it's going to automatically log out for us. And then we'll return the user ID if the user is logged in. So all of that logic that we built earlier, that's just been put into this one little function. So we're going to use that function to get the user ID.

00:57 And if there is a user ID, then we're going to throw a redirect so that we can reuse this as a utility and not have to worry about, what did it return and all that stuff. So just use the utility. That'll be nice. And then we are going to, if there is no user ID, then we're good to go.

01:16 We don't do anything. So with that now, we have a requireAnonymous, which we can use in login. And the login page does not have a loader. There's no loader. But we can add one. So let's export a function called loader. We're going to need the request from data function args.

01:36 And then we're going to requireAnonymous from offServer. We'll pass the request. We're going to await, because it is async after all. And then if we don't return anything from this, then Remix is like, whoa, whoa, you made a loader and you didn't return anything? That's kind of weird.

01:52 So we're just going to return JSON as an empty object. And that will satisfy that. And then actually, it's a good idea to requireAnonymous on the action as well, because it wouldn't make any sense for a logged in user to try to submit to login either. So we're going to requireAnonymous on both

02:12 of those. And if I go to slash login, whoops, login, then I go back to the home page. So our util works. That's awesome. And then we can go to sign up and do a very similar thing. In fact, let's just copy this. We could probably copy the action, the top part of the action, too. Check this out, kablooey.

02:31 And then we bring in requireAnonymous and save. And we get the same behavior, sign up, boom, back to the home page. So there you go. That's all there is to it. Get the user ID. So we're just identifying, is the user logged in? If they are, then we'll throw them back to the home page.

02:49 And then we use that utility in our loader in action. And we're in business.