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
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.
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.
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
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
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
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 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?
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???
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.
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. 🤔
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 👍
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
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
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?
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"); } }
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 ❤
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.
Great contents, Thanks.
02:12 -> in chrome you can create your own shortcut and set the Application trigger directly.
how ?
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😂
after making this project i start the journey of new world in javascript framework thanks sir
at 5:57 can we use "response.cookies.delete('token')" intead of manually setting it as using "response.cookies.set(...)" ?
19:07 i was confused about middleware but you made it easier. Thanks
Happy to help
Wow wow this is so unexpected 😍 3 in a row thank u
🎉
i'm having error 21:00 after create a middleware error: `source` does not start with / for route {"source":"login"}
Error: Invalid middleware found
This is the best next js course 🤩🤯
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.
Love the series.
Time stamps for the topic are required sir.
Go ahead and add them. Comments should also add value
so happy i found that it is one-of -kind content. btw what is the plugin that showed the data here 38:02
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
Thanks brother, I was looking for this thing since long time.❤❤❤❤😁😁
brother why don't u add timestamp for each topic that are being covered ?
if
matcher: [
'/',
'/profile',
'/login',
'/signup',
'/profile/:path*'
]
is updated with :path* then we cannot visit any URL after /profile
Sir which suggestions extensions are you using🥲♥️
sir uninstall the color indent extension that will fix the messed up indentation and use prettier
what extentions are you using can you please give us a video for that or give me names of those???
great series sir. how to make the toast work?
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
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
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
which extensions are using in vs code for suggest code
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
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.
can we use session instead of cookies. another thing i want to know that can anybody bypass the cookiee or is it secure?
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?
legendary content
which theme you are using hitesh sir ?
sir lovely explain pls keep it ! would you use redux?
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???
what select("-password") do? i think we findOne user by Id and grab all data and send throw request.json ..
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..
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.
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. 🤔
sir whicj extansion you are using for auto css code genarate
Series is finished in one day. woah
Not finished, more to come.
What theme are you using?
A greate teacher in tech
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 👍
How do we fetch user data from a server component?
Damn that is so fast! Thank you sir!
You are welcome
Thank you bro making this kind of awesome video, Bro could you please tell me which AI Autocompletion extension you used in your video?
What are your thoughts on zig language?
😅
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
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?
I can't sent cookie through header from server components
Anyone please help me, I am doing same but token not saving in cookie storage
Wait, what full stack king is here? He never disappoints his viewers
😁😁
34:40 yeahhhh (yeahhh boy) 😂😂
I really like your video it help me alot❤❤
how vs code is showing that all request details
Thank you! I did not expect to enjoy, but I did thanks to you!
love your series
want more
thank you
From where are you getting the profile UI idea? 😂😂
hey what;s the vs code theme name
bookmark
27:19
What extension is autocompleting you code ?
Copilot
Do we have this course in learncodeonline??
I don’t own learncodeonline anymore. It’s sold.
Upload remaining videos also
Awesome! thank you!
Thanks man u are the best
love the series
Awesome.
Thanks 🙏
Most welcome 😊
Great job!!!!!!!!!
*process
Thanks ❤
Welcome!
👋👋👍👍
👌👌👌
❤❤❤
❤
🙏👍
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! ❤
oooooooppppssssss❤😂
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🫡❤❤