Middleware in nextjs | Nextjs fullstack course

Welcome to a youtube channel dedicated to programming and coding related tutorials. We talk about tech, write code, discuss about cloud and devops. That’s what we do all day, all year. We roll out a lot of series and videos on our channel.
All the learning resources such as code files, documentations, articles and community discussions are available on our website:
chaicode.com/
You can find our discord link, github link etc on the above website.
Twitter/X link: x.com/hiteshdo...
Discord link: hitesh.ai/discord
Learn React with 10 projects: • Let's learn react from...
Learn Docker: • A practical guide on D...
Learn Kubernetes: • Complete Kubernetes Co...
How does a browser works: • How does a browser wor...
How nodejs works: • How node JS works | En...
Learn Redux-toolkit: • Learn Redux Toolkit in...
Learn NextJS: • Nextjs Full stack course
Learn Typescript: • Why to learn Typescript
Learn Javascript: • Welcome to new JavaScr...
Learn React Native: • React Native Mastery: ...
Learn Zustand: • React state management...
Learn Golang: • How to get started wit...

[@dhruvrajsinhgohil6715]

You are the gem in the coding community that literally saved me from figuring out where to learn nextjz from basic to advanced

[@lOmaine777]

at 5:57 can we use "response.cookies.delete('token')" intead of manually setting it as using "response.cookies.set(...)" ?

[@S--xc4rv]

thanks for this playlist... 2:19 => first we have to set it up : [ ctrl + shift + i ] -> [ ctrl + shift + p ] -> (make sure you are on application ) enter then we can just use [ ctrl + shift + i ] to open application section

[@SuryaKarigar]

Noice ❤

[@sayakbasak587]

if matcher: [ '/', '/profile', '/login', '/signup', '/profile/:path*' ] is updated with :path* then we cannot visit any URL after /profile

[@prateekkukreja9664]

From where are you getting the profile UI idea? 😂😂

[@akashdeepwadhwa5828]

i have doubt is it completely okay to get started with mern stack development with no prior experience in full stack like php sql .. and all thaT

[@KanhaSingh-j4g]

Sir which extensions to used for auto suggestion. Please suggest.

[@Opethefoodie]

bro thank you so much, i love you for this video. i like how you didnt use next auth and was helpful for me that wanted to build my custom login. i have a request also, can you do one for google login as well?

[@hellish9868]

in middlewre how to implement it for user roles like admin and normal user for specific path

[@sumitsinha995]

there must be some issue bhaiya for every new user a have to close the nextjs application ,then to restart it.Same for verifying also.

[@jeelvachhani380]

what extentions are you using can you please give us a video for that or give me names of those???

[@andrewbeef8758]

sir uninstall the color indent extension that will fix the messed up indentation and use prettier

[@mohammadyeasin6569]

can we use session instead of cookies. another thing i want to know that can anybody bypass the cookiee or is it secure?

[@raghu_1995]

Anyone please help me, I am doing same but token not saving in cookie storage

[@imkir4n]

Wow wow this is so unexpected 😍 3 in a row thank u

[@HiteshCodeLab]

🎉

[@himanshumehar6568]

which extensions are using in vs code for suggest code

[@itzzzyashu]

Sir which suggestions extensions are you using🥲♥️

[@NAYMURWEB]

Hey hitesh, why I can't get the cookies like you get, I try several way, but I didn't get it , it's says always empty and I believe most to the dev get's error when they try to get the token value or maybe not, but is there any one who get token like hitesh get

[@shiv3373]

How do we fetch user data from a server component?

[@100xcoding]

i'm having error 21:00 after create a middleware error: `source` does not start with / for route {"source":"login"} Error: Invalid middleware found

[@avishetty8]

Hitesh, You have Brilliantly explained how a reactJS/expressJS developer can switch to nextJS. However, NextJS boasts about a lot of features in authentication. It is a very complicated system. I would request you to kindly explain how we can do, exactly the same, but using authJSv5/next-auth features. As it is said that it does many things magically. I wonder how the magic works and how we can make it work for us. Can we expect such a tutorial from you. 🤔

[@infinitecodes]

This is the best next js course 🤩🤯

[@maoridi1696]

first of all awesome tutorial and thanks a lot. Second of all what is this INSANE extension that gives you the request response on the vscode editor???

[@smithchristian4251]

Very good series, and I love the explanation! Can we have next series on RBAC with Next.js with AWS Cognito user pool and identity with amplify. I am very excited to learn.

[@mayanktripathi9897]

Hey guys , i need your help i stuck on this error in AxiosError: Request failed with status code 404 when I click the getUserDetails button to fetch / display the id.

[@TenzDelek]

sir i think there is an issue regarding the model, when i first fetch the id to profile it working fine and also when i visit the [id] it showing fine but when i go back and re click on the getdetail button in profile.tsx it is generating error which is saying like OverwriteModelError: Cannot overwrite `User` model once compiled.

[@codeClassy]

It's because you are creating model everytime api calls..

[@yudi281]

Error: The edge runtime does not support Node.js 'crypto' module getting this error in jwt.verify code

[@rgagankumar5191]

Love the series. Time stamps for the topic are required sir.

[@HiteshCodeLab]

Go ahead and add them. Comments should also add value

[@animWorldTherapy]

what select("-password") do? i think we findOne user by Id and grab all data and send throw request.json ..

[@rovu7260]

Awesome! thank you!

[@NoorAziz-j1m]

Thanks brother, I was looking for this thing since long time.❤❤❤❤😁😁

[@jefferyaaron3462]

I found a security issue where you can type in the user can just put value name token and any value to sign in but i fixed it by verifying the token then redirecting i couldnt do the verifying in the middleware so i did it i the me route

[@VarunKumar-n1d]

sir the last part of video make me completely confused how that getuserdetails and the code written in helpers part how data is getting fetched how can i clear this doubt

[@nickrathee8891]

34:40 yeahhhh (yeahhh boy) 😂😂

[@A.Dalton]

so happy i found that it is one-of -kind content. btw what is the plugin that showed the data here 38:02

[@sachin_dev]

👋👋👍👍

[@AnasOuadi-p2t]

Thanks man u are the best

[@MayankSahu-n1t]

A greate teacher in tech

[@ratanib5458]

I can't sent cookie through header from server components

[@anik2929]

sir whicj extansion you are using for auto css code genarate

[@absiddik7841]

Thank you bro making this kind of awesome video, Bro could you please tell me which AI Autocompletion extension you used in your video?

[@mohdali-yq8gq]

Great methodology to explain the core things. We have learnt a lot about the prices of authentication. Well done Ritesh SIR

[@adharshd493]

He is hitesh; not ritesh However there is a Itesh😂

[@sachinsoni5044]

Damn that is so fast! Thank you sir!

[@HiteshCodeLab]

You are welcome

[@codedusting]

What theme are you using?

[@jitingoyal5087]

how vs code is showing that all request details

[@anandstephan6020]

after making this project i start the journey of new world in javascript framework thanks sir

[@pradneshkhedekar5279]

In getDataFromToken helper file, do we really need connect()? because when we are using User model in that we have called connect(). Really great series, thanks for such insightful videos 👍

[@risinggfx9236]

legendary content which theme you are using hitesh sir ?

[@palgun.]

What are your thoughts on zig language? 😅

[@herahadi]

great series sir. how to make the toast work?

[@kushsharma862]

okay im leaving it : |

[@morshedulislamriaad6496]

why?

[@kushsharma862]

@@morshedulislamriaad6496 I can't really understand it , so I'm going through my revisions of JS and React so understand it better

[@itzzzyashu]

​@@kushsharma862 Correct Choice! ❤

[@amansarma417]

Sir I had one query is it a good practice to do connect() on every API page or does it happen only once even if we call it multiple times on every page kinda like a Singleton class?

[@chhupiseth]

I really like your video it help me alot❤❤

[@Mr_Addy1]

hey what;s the vs code theme name

[@aashutoshchouhan9783]

👌👌👌

[@abuhossain4274]

sir lovely explain pls keep it ! would you use redux?

[@pratikbobade2854]

Next Js does not support the bootstrap js library because of Server Side rendering can you provide a solution for It? The reason there are main things in Js library table search table HTML button which take massive time in tailwind

[@augustocesar6281]

Try to use "use client" directive in the component where you want apply the bootstrap.

[@pratikbobade2854]

use client doesn't work because the js library applies on DOM so it gives a document not found error those solutions present in StackOverflow don't work for the next js upgraded to version 13.4

[@ExclisiveArt]

i can only say awesome series. I started nextjs with another awesome tutorial that served me as a good starting point, and i stumbled on your tutorial which was the best selection to take at the level i currently am now.

[@mohammadhamza7487]

love from pakistan

[@kingcoder760]

love your series want more thank you

[@faisalmushtaq2287]

19:07 i was confused about middleware but you made it easier. Thanks

[@HiteshCodeLab]

Happy to help

[@margamvinay]

Upload remaining videos also

[@faisalmushtaq2287]

Great contents, Thanks. 02:12 -> in chrome you can create your own shortcut and set the Application trigger directly.

[@singhanuj620]

how ?

[@varunj9598]

Wait, what full stack king is here? He never disappoints his viewers

[@HiteshCodeLab]

😁😁

[@shubhamk1111]

💣💣💣 in a row 😅

[@HiteshCodeLab]

Same for tomorrow

[@webber5629]

What extension is autocompleting you code ?

[@HiteshCodeLab]

Copilot

[@shantanukulkarni8883]

Thank you! I did not expect to enjoy, but I did thanks to you!

[@mohdali-yq8gq]

*process

[@johnsondsouza4722]

bookmark 27:19

[@premsmishra]

Do we have this course in learncodeonline??

[@HiteshCodeLab]

I don’t own learncodeonline anymore. It’s sold.

[@sumitbhardwaz]

oooooooppppssssss❤😂

[@shibildas]

love the series

[@stephanjames1536]

Great job!!!!!!!!!

[@greenshaheen6716]

Series is finished in one day. woah

[@HiteshCodeLab]

Not finished, more to come.

[@icoderdev]

❤

[@akshayborsaniya]

❤❤❤

[@gastonartazayanez3730]

Awesome. Thanks 🙏

[@HiteshCodeLab]

Most welcome 😊

[@rishiraj2548]

🙏👍

[@hirocode3134]

Thanks ❤

[@HiteshCodeLab]

Welcome!

[@webber5629]

You didn't check If the jwt Token is valid or not like if I put anything with the name of token in the cookies I can login to the page. I implemented that verifying token in my project like this you can modify as your need : middleware.js : import { NextResponse } from "next/server"; import { verifyJwtToken } from "./app/libs/auth"; export async function middleware(req) { const token = req.cookies.get("jwt")?.value; const path = req.nextUrl.pathname; const isPublicPath = path === "/login" || path === "/register"; const verifiedToken = token && (await verifyJwtToken(token).catch((err) => { console.log(err); })); if (isPublicPath && token && verifiedToken) { return NextResponse.redirect(new URL("/", req.nextUrl)); } if (!isPublicPath && (!token || !verifiedToken)) { return NextResponse.redirect(new URL("/login", req.nextUrl)); } } export const config = { matcher: ["/login", "/register", "/"], }; libs/auth.js : btw "jose" is a npm package that allows to verify the jwt token in the frontend and it returns true or false if the token is valid or not. import { jwtVerify } from "jose"; export const getJwtSecretKey = () => { const secret = process.env.JWT_SECRET; if (!secret || secret.length === 0) { throw new Error("The environment variable JWT_SECRET is not set."); } return secret; }; export async function verifyJwtToken(token) { try { const verified = await jwtVerify( token, new TextEncoder().encode(getJwtSecretKey()) ); return verified.payload; } catch (error) { throw new Error("Your token is expired"); } }

[@HiteshCodeLab]

I have touched the verification part in “me” route. Also, agree with your approach.

[@vallabhwasule1553]

Bhaiya love the way you teach things thanks a lot🫡❤❤