Protect Your API - Next Auth Middleware

Pro Next JS: bit.ly/3MXZMGG
In this video, we will look at how we can protect our API made with next js using middleware or to be specific next auth middleware.
Previous Video:
Next Auth Sign in With Credentials:
• Next Auth Sign in With...
Source code: github.com/ndp...
Other Next JS Related Videos
• Next JS
Social Media Links
Instagram - / fsniraj
Twitter - / fsniraj

[@fsniraj]

Some of you have this concern, when you use ['/admin'] for matcher config. only the /admin is going to be private not all admin routes like /admin/posts. You can use ["/admin/:path*"] to restrict all of the admin path.

[@richardkirigaya8254]

what is :path* ? lets say i want to restrict a "create" route in the admin page, so it becomes ["/admin/:create*] ? And if i have 5 pages in the admin page i have to repeat this 5 more times ??

[@rogerhoffmann]

@@richardkirigaya8254 path is anything after admin, you don't need to replicate for each route

[@faruksardar8829]

Simple, Easy to Understand,
Thank for so much Niraj for this video

[@markkkkk07]

AMAZING!! Simple, fast and understandable explanation

[@ingolesubodh]

goddamn bro you are awesome !! you will go big soon

[@wazzadev7209]

Your next auth tutorials have been helpful and very straight forward, thanks.

[@Iacapuca]

This approach only works for JWT tokens at the moment, next-auth middleware dos not support session based auth.

[@tomyyoung2624]

Yes a fix,
Especially for a client website

[@vladsvyrydonov1793]

Very nice, just everything I was looking for.

[@BuntyWP]

Very clean and simple explanation. Thank You

[@mertdr]

Thanks for the video. One question though, how could you use withAuth for multiple cases on middleware routes? After NextJS removed support for multiple middleware files, withAuth looks like pretty useless. Creating a standard NextJS middleware function and catching session and then applying rules is a better idea, am I right?

[@user-cz7sb2iz4b]

2 days looking for solution thank you

[@antoniuneacsu6811]

Can you declare matchers so that it matches all routes except /login?

[@himanshu3984]

when deployed on vercel middleware is broken it just redirect to signin even i try login and successfully loggedin it do not consider protected routes of nextauth and always redirect to signin when i access them

[@blu5037]

Awesome video, man! many thanks :)

[@evgeniy3370]

Hi. if the "pages" folder is nested in the "src" folder, which is located along with the middleware file in the root of the project, will the middleware work?

[@vatsalcodes]

how to change the redirect url when we try to access secured page without being authenticated

[@user-xu1xb5iz5w]

do one video of how to connect with an api and fetch users in login

[@iqbalherlambang5865]

thanks

[@beverlyHillsAgent]

in this example, no matter which page you go to, if you are an admin, the url will be rewritten to admin page. In other words, no matter which page you go to, it will always show the admin page?

[@cdromance2705]

How do you get your VSCode to show the param definitions on hover for the jwt callback at 6:22? Having something like this in my ide would make my life much easier.

[@isaacpriestley]

I'm using Rails devise-jwt as my backend, and I'm trying to figure out how to take the JWT created by my backend and use it in my Next client...

[@SSango-hk9sm]

Hie Niraj great tut once again. I have a question. I have two tables a users and workspaces table linked by a one to many relationship. I would like to implement an onboarding experience whereby after the user is signed in I would like to check if that user has a workspace linked to his/her user account if not then redirect to the page where you can create the workspace. I'm failing to figure out how I can implement that in the middleware. I'm using postgre and prisma adapter by the way.

[@deathdefier45]

Hey Niraj, is it possible to user a matcher that works on dynamic pages that use a slug? Please help me with a solution if you know how to, Thanks!

[@rh9037]

I'm running into the issues where role doesn't seem to exist in the (params.user?.role) callback function of [...nextauth].ts. I added it in the list of returns for a user but it still doesn't seem to exist. Has anyone else run into this issue?

[@giorgosterzis3331]

I have added this to export const config = { matcher: ["/shop/portal/:path*"] }. But, when I try to access/shop/portal I get "TypeError: Class extends value undefined is not a constructor or null". Can anybody help?

[@mpowereer6992]

But i can still go to /signup page or /signin page, how to prevent from visiting this routes when being authenticated?

[@ivanmakevic8258]

how do you authenticate users if they want to login with gmail or github for example?

[@k2nnethtan949]

Possible to further the next episode with Prisma mongo?

[@amadacruse4193]

Thx for awesome tutorial sir. My problem is that i added exactly these two lines on my middleware.js on root folder export { default } from "next-auth/middleware"
export const config = { matcher: ["/", "/admin/privilages/dashboard"] } and i can still visit these pages..... its like middleware doesnt woek at all. any idea why. ty in advance!

[@Peter-yd2ok]

did you solve this?

[@madhawapriyashantha3722]

i had the same issue .i fixed it by renaming middleware.ts to _middleware.ts

[@Peter-yd2ok]

@@madhawapriyashantha3722 but isn't that old way of creating a middleware?

[@madhawapriyashantha3722]

@@Peter-yd2ok yep but i had installed next 12.0

[@Peter-yd2ok]

@@madhawapriyashantha3722 ohh. I had tried this old middleware syntax but then i got errors while deploying.

[@shahriardhruvo6281]

Wow, great video

[@prasadbeligala]

Thanks for the simplified explanation. At 6:46 can we add more user roles and redirect to different routes?

[@fsniraj]

I think so the only way to find out is just try.

[@prasadbeligala]

@@fsniraj At the end found a way to do it.. :) Looks like middleware is the best way to restrict access on the server. Thanks again for this valuable video Niraj

[@haian_]

Hi, please implement with next js 13

[@shfsakib339]

Hi. Is there any way to prevent user not to go admin pages and also prevent admin for go to user pages. I don't wanna make folder for each user and check startwith [ if(url.startwith('/admin')) ] the example given in google. Please help if you can. I'm new to nextjs.

[@masonpool5257]

He explains it in the video, if you set up the 'export const config = { matcher: []}', you can specify which routes require an auth token. example: export const config = { matcher: ["/admin", "/dashboard/:page*"](for all pages along the dashboard route)}

[@kakun7238]

the jwt callback is not working for me
the roles is there when i console log the params object but not in the response after signing in

[@fsniraj]

Session and the jwt callback only works on the first login so make sure you removed the cookie from application tab and then try.

[@kakun7238]

@@fsniraj I did that too but if I bind it to email or any other pre fixed token attribute I get the response through jwt callback
Sorry to bother you but another question too can't we redirect the user after login when using a custom login?

[@fsniraj]

If you need any custom behavior when you have to do some experiments with your code. And to redirect after login you can use useSession hook and the next/router.

[@wazzadev7209]

I have a question, what if you want to make some routes admin protected and others basic user protected routes?

[@fsniraj]

You can check the incoming request url and try to log the req object. And according to the request you can change rewrite or redirect response.

[@wazzadev7209]

@@fsniraj thanks again

[@dawid_dahl]

"Go to hell" 😂

[@fsniraj]

I will definitely book a seat for you as well.😆

[@ashimov1970]

why among indians pronouncing "sh" correctly is a huge issue?

[@glibaudio]