Middleware in nextjs | Nextjs fullstack course
Vložit
- čas přidán 29. 06. 2023
- 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/hiteshdotcom
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... - Věda a technologie
You are the gem in the coding community that literally saved me from figuring out where to learn nextjz from basic to advanced
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.
after making this project i start the journey of new world in javascript framework thanks sir
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
Noice ❤
Great methodology to explain the core things. We have learnt a lot about the prices of authentication.
Well done Ritesh SIR
He is hitesh; not ritesh
However there is a Itesh😂
Great contents, Thanks.
02:12 -> in chrome you can create your own shortcut and set the Application trigger directly.
how ?
at 5:57 can we use "response.cookies.delete('token')" intead of manually setting it as using "response.cookies.set(...)" ?
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.
Wow wow this is so unexpected 😍 3 in a row thank u
🎉
Sir which extensions to used for auto suggestion. Please suggest.
in middlewre how to implement it for user roles like admin and normal user for specific path
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???
19:07 i was confused about middleware but you made it easier. Thanks
Happy to help
legendary content
which theme you are using hitesh sir ?
Thanks brother, I was looking for this thing since long time.❤❤❤❤😁😁
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
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?
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 👍
what extentions are you using can you please give us a video for that or give me names of those???
sir lovely explain pls keep it ! would you use redux?
Thank you bro making this kind of awesome video, Bro could you please tell me which AI Autocompletion extension you used in your video?
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.
sir whicj extansion you are using for auto css code genarate
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
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
can we use session instead of cookies. another thing i want to know that can anybody bypass the cookiee or is it secure?
so happy i found that it is one-of -kind content. btw what is the plugin that showed the data here 38:02
what select("-password") do? i think we findOne user by Id and grab all data and send throw request.json ..
great series sir. how to make the toast work?
sir uninstall the color indent extension that will fix the messed up indentation and use prettier
Sir which suggestions extensions are you using🥲♥️
which extensions are using in vs code for suggest code
How do we fetch user data from a server component?
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
bro but is this a threat to the backend development or can we develope streaming application using nextjs
love your series
want more
thank you
if
matcher: [
'/',
'/profile',
'/login',
'/signup',
'/profile/:path*'
]
is updated with :path* then we cannot visit any URL after /profile
Damn that is so fast! Thank you sir!
You are welcome
I can't sent cookie through header from server components
i'm having error 21:00 after create a middleware error: `source` does not start with / for route {"source":"login"}
Error: Invalid middleware found
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?
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.
Anyone please help me, I am doing same but token not saving in cookie storage
Thank you! I did not expect to enjoy, but I did thanks to you!
A greate teacher in tech
I really like your video it help me alot❤❤
how vs code is showing that all request details
Love the series.
Time stamps for the topic are required sir.
Go ahead and add them. Comments should also add value
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.
It's because you are creating model everytime api calls..
What are your thoughts on zig language?
😅
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. 🤔
What theme are you using?
hey what;s the vs code theme name
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
Try to use "use client" directive in the component where you want apply the bootstrap.
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
Awesome! thank you!
love the series
Upload remaining videos also
Series is finished in one day. woah
Not finished, more to come.
34:40 yeahhhh (yeahhh boy) 😂😂
Wait, what full stack king is here? He never disappoints his viewers
😁😁
Thanks man u are the best
What extension is autocompleting you code ?
Copilot
Do we have this course in learncodeonline??
I don’t own learncodeonline anymore. It’s sold.
Great job!!!!!!!!!
Awesome.
Thanks 🙏
Most welcome 😊
*process
bookmark
27:19
👋👋👍👍
👌👌👌
❤
❤❤❤
🙏👍
Thanks ❤
Welcome!
oooooooppppssssss❤😂
love from pakistan
💣💣💣 in a row 😅
Same for tomorrow
okay im leaving it : |
why?
@@morshedulislamriaad6496 I can't really understand it , so I'm going through my revisions of JS and React so understand it better
@@kushsharma862 Correct Choice! ❤
Error: The edge runtime does not support Node.js 'crypto' module getting this error in jwt.verify code
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");
}
}
I have touched the verification part in “me” route.
Also, agree with your approach.
Bhaiya love the way you teach things thanks a lot🫡❤❤