Protecting Routes with Auth, Guest, and Admin Middleware

In This Lesson

We'll learn about the auth and guest middleware included when we created our AdonisJS 6 project. Then, we'll create our own named middleware that will allow us to restrict page access to only users with the admin role.

Created by: @tomgobich
Published: 1 year ago

Join the Discussion 0 comments

Be the first to comment!

Transcript

So if you recall back to a couple of lessons ago, we added that guest middleware to our authentication routes. So since we're authenticated here as John Doe,
we should not be able to go into /auth/login. Whenever we attempted to do that, it redirected us right back to our homepage because we're already logged in.
If we jump back into our text editor here, hit Command + P and dive into our routes. The reason for that happening is because we applied that guest middleware specifically to all four of these routes.
And then we applied the auth middleware specifically to our logout route. Guest will only allow a user to view a page or perform an action if they are unauthenticated.
Auth then is the inverse. It will only allow a user to perform an action if they are authenticated. So we can actually use that methodology here to create a router.group.
And let's give this a prefix of admin. So we're gonna create an administrator only section here. We'll also name this as admin as well. But right now let's go ahead and just do router.get,
do slash so that slash admin matches this particular route right here. And let's just do an inline route handler for right now. So we do ctx, return, you are here.
Let's give that a save to fix all our formatting. So if we hit slash admin, at this point in time, anybody would be able to hit it and they would get back you are here. If I were to open up a new private
or incognito window here, go into localhost 3333/admin, hit Enter. Oh, looks like we're unable to connect. Let's see what happened. Oh yes, we forgot to give the inner route here a name.
So let's jump back into our text editor as index. Okay, jump back into our browser, give that a refresh. Okay, so we're unauthenticated at this point because we're in a brand new private browser session,
but we're able to see you are here A-okay. So the first thing that we're gonna wanna do is apply the auth middleware to this entire admin group
because we don't want non-authenticated users to be able to get in here. Furthermore, we probably don't want non-admins to be able to get in here as well, but we'll take care of that next.
So let's do use middleware auth, give that a call, and save, jump back into our browser. And now if we give this a refresh, since we are unauthenticated,
we're gonna get redirected back to our login page, or it will attempt to. Our login page is at /auth/login, so we do need to fix that as well. So let's hide that away.
This is our auth middleware, so let's jump into there. And we just need to switch redirect to /auth/login, jump back into our browser.
And at this point, if we were to try to jump back into admin, okay, there we go. So now we got successfully redirected back to our login page. So let's go ahead and close out this private browser session
and jump back into our authenticated browser session. And now let's try to dive into /admin. So now we're back to being able to access it because we are authenticated.
We hide this back away, close out our auth middleware. Let's make this a little bit more stateful. So you are here, give ourselves backticks,
comma, ctxauthuser.fullname, just so that we can verify that we are indeed authenticated
as ctxauthuser.roleidrole. So now we'll be able to also see the user's role. So if we jump back into our browser, give that a refresh, there we go.
So you are here, John Doe, as one role. So a role with an ID of one. If we jump back into our enums, we have a roles enum.
One is a basic user, two is an admin. So since this is our admin application section, let's go ahead and create a new middleware that will only allow users with a role ID of two
for our admin into this section. So we'll jump into our terminal, give our server a stop, node, base, make, middleware, call this admin, run that.
And we're gonna wanna create this as a named middleware. So we'll create it there. It has given us an admin middleware file as well as registered it within our kernel TS file.
So if we actually dive down into our kernel TS file right down here, scroll down, we'll see right here's our silent auth middleware that we created a little bit ago. Scroll down a little bit further.
Here is our new admin middleware. So we can access it and apply it to individual routes using the key admin. You can customize this here if you want. And it will use the file @middleware,
admin middleware to perform that action. So let's go back to our middleware and dive into our new admin middleware. We want this middleware to run before our route handler.
So we wanna perform this check before the next function call here. So we'll do it right here. So let's first grab whether or not they are an admin.
So we can do is admin equals ctx auth user.roleId equals roles, import that from our enums.admin.
So if the user is authenticated and our user property is populated and that role ID for that user equals our enum admin role, which is a value of two, then is admin will be truthy.
So we could do if not is admin, you can either return or redirect the user somewhere as guest and auth middleware are doing,
or we could do something like throw new exception with a message, you are not authorized to perform this action.
Provide an options for this exception of an error code. So E not authorized with a status code of 401. So now if the user is not an admin
and they try to attempt to view our admin section, they'll see a 401 error. So the last thing that we need to do is hit command P, jump into our routes and switch from using auth
to our admin middleware. So with that saved, if we jump back into our browser, give this a refresh. It looks like we ran into another error. Oh, nope, okay, I just forgot to start server backup.
NPM run dev, give that another refresh there. There we go, so now you are not authorized to perform this action with an error status of 401. If however, we jump into pgadmin, let's go find this user.
So we'll right click on users, view edit data, just do all rows here. Okay, so we're working with John Doe, our user ID of seven. And right now the role ID is one.
Let's give that a double click and switch that to two and head up to this save data changes button right here, where you can hit F6 and that will just persist the change that we made here within this table.
Let's go ahead and close this back out. And now if we refresh this, we're back to being authorized because we now have a role ID of two. So we're an admin.

Let's Learn AdonisJS 6

113 Lessons

14h 15m

Introduction

Fundamentals

Building Views with EdgeJS

Database and Lucid ORM Basics

Lucid ORM Relationships

Working With Forms

Authentication & Middleware

Filtering and Paginating Queries

User Watchlist

User Profiles

Admin Panel

Stop losing your best ideas!

Use our integrated note feature to capture and organize your key insights. Take a note at any timestamp and jump instantly back to that moment in the video with a single click.