Securely using JWT on the Edge: Authentication in NextJS Middleware!

Handling JWT-based authentication inside of NextJS middleware is super fast, and very useful but can be a bit tricky to implement. Let's look at best practises for implementing JWT auth inside of NextJS middleware, eliminating the need to call a separate API route to handle the JWT authentication. We'll also pass back the JWT from a tRPC backend route back to the client.
⭐ Our startup: wordful.ai
Thanks for watching, have fun implementing JWT-based authentication inside of your NextJS app!

[@hepsko2318]

Hi, I liked the protected routing using middelware. But what if, for example, we are using an external backend, you would still recommend using this approach, minus the token verification (because that is already happening on the backend)?

[@codingwithrendi]

You have saved my life josh :)

[@developer_hadi]

Bro please complete the booking system playlist, the idea looks awesome

[@raymondmichael4987]

Did he abandoned it already!?😢

[@joshtriedcoding]

@@raymondmichael4987 Hell nah this series is going on, just not every video right after another :^)

[@raymondmichael4987]

@@joshtriedcoding the man himself. Just what I wanted to hear. We’re all turned in

[@mohaniya15]

Which snippet extension do you use? I like the way you can just write state and the useState is autocompleted.

[@aerotheory]

He has a video: How to create Custom Snippets in VSCode (with examples)

[@Sasuke-px5km]

Hello is there any handling refresh token using axios related to this video?

[@justiceessiel6123]

What is the "on the edge "exactly..

[@nuuklu3189]

well explained. is there a github link ?

[@bongjames2222]

nextjs 인증강의를 검색하던중 찾았습니다. 감사합니다. nextjs 를 처음배우는데 영어를 몰라서 자동번역으로 보면서 겨우겨우 따라하고 있습니다.

[@devotee9606]

Thanks

[@saharilarshad1628]

Useful knowledge.. Hope, next will be NextAuth with the JWT access token Register, Login and User Access Role..!

[@ghalitsar2730]

awesome video ! , can u implement refreshToken on the next video ... cant wait for another video from u

[@alowais900]

Yes please! Agreed, a refreshToken would be awesome.

[@ambrosebeavers]

Hey Josh I notice that when I redirect the upload still shows the path of the previous page. Any way to fix that

[@vernevens1598]

Who is vercel and why would i give a hoot about their best practices?

[@easy-peasy-tutorials]

if we have to show user data in /dashboard page , how can we do that we can do so by getServerSideProps but what if we have to show userData in Navbar(email) , /profile page for client-side we can use useEffect BUT what if we have to show data in Navbar, dashboar,profile page on the very first page load

[@christianstamati]

how to can i implement logout? I just need to delete the cookie on client side?

[@timur.shhhhh]

what does Edge mean, I often hear it, but I can’t understand it, because English is not my main language, is it like a browser from Microsoft?

[@rizkifahruroji5047]

Thank You. this is very petrified doing authentication in middleware. but something strange happened to my nextjs app in production mode. I logged out and changed the maxAge in the serial cookie to -1. cookies deleted successfully but i can still access admin page. sometimes the data displayed is data from other users at different levels who have logged in on their respective devices. Please help and sorry for my english

[@muhammadbilal6865]

his method isnt the best

[@alexiglesias5166]

I'm having the same problems

[@nasirify]

OH GOSH!!! Thanks JOSH :)

[@webber5629]

If user is logged in and if they still wanna access /login then how to redirect them to " /" page

[@dawitminale2775]

is it the same for next 13 ?

[@kirielbe]

Hi, where can I find this example on your github?

[@chamir4614]

Where did you get that wallpaper? It's really really cool!

[@joshtriedcoding]

Cheers dude, the service providing that was called Wallpaper Engine on Steam

[@nguyennam5056]

Why can not i see you set cookie?

[@LeagueofLegendMoment]

hi Josh, your video helpful with me, when i do with my project, it run perfectly in local, but when i deployed on vercel, the middleware not working, it mean the JWT - verifyToken not working, token isn't authenticated. Can you help me.

[@kamalheydari8612]

hey, I'm having the same issue. Have you found any solutions for it?

[@ashankarunaratne3424]

Hey Josh thanks for this, I'm using this for my new project but I'm having an issue how do I protect dynamic routes? for example I want to protect this route "/customer/[id]"

[@joshtriedcoding]

It's easiest to validate the JWT through a middleware and allow a next() only if the token is valid

[@ashankarunaratne3424]

@@joshtriedcoding Thanks Josh 🍻

[@jotaroisdarius1918]

Thank you so much!

[@agimalma5321]

bro i haved try this, and i have problem because this not use the next auth to get the session user, my asking is "how to get session user in dashboard ? or how we can show user who login to the app"

[@joshtriedcoding]

Within next-auth, you can use the getServerSession or client side useSession for that

[@Mark-lg2qe]

Do you have a github link?

[@bongjames2222]

혹시 trpc 를 사용하지 않고 middleware 를 만든 영상도 있습니까?

[@LazyShady]

Dang..Im using normal NextJs and im stuck on the OnSuccess part.

[@joshtriedcoding]

You could return this from the middleware like {success: true, data: ...} and then check for the success property in your trycatch! :D

[@LazyShady]

@@joshtriedcoding dude thats such a better idea. Right now im using axios to post formdata to nextApi and waiting for a response 200 to router.push 🫢

[@joshtriedcoding]

@@LazyShady cheers man

[@ambrosebeavers]

Wonderful!

[@oopss794]

6:57 is using next-auth more secure?

[@joshtriedcoding]

next-auth gets a lot of things about web-app security right out of the box and encourages security best practices, such as avoiding using password auth

[@raymondmichael4987]

Is it possible to automatically logout the user immediately when the cookie expire? 😊,

[@developer_hadi]

No but when he try to send a request you can check if his token is expired and if it is, you can logout the user

[@raymondmichael4987]

@@developer_hadi thanks buddy

[@kevinpuchaicela6737]

thansk!

[@webber5629]

Code please ?

[@aerotheory]

trpc route structure changed.

[@joshtriedcoding]

Yeah I was a bit confused at first, they did it again

[@andrebozzato]

top!

[@marcinburzynski8082]

just so you know. `!!"" === false`