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