Awesome tutorial. Fair warning as a beginner, it took me much longer than the 49 mins of the video to be able to code along and get everything working. There's a lot of things that were deprecated in newer versions of React and took some digging and googling to figure things out, but in the end, that made the learning better. Also, if you just clone the repo he provided, you won't be able to follow along as well since the final code is much different than the beginning. Better to code along to understand his thought process. Thanks for the video, Mehul
for those who are following this now, useHistory is no longer a part of react-router-dom, instead make use of useNavigate() hook such as navigate("/login", { replace: true })
Love the video mate. Just a note though that the React-Dom-Router process you listed has since been updated in their V6. You need to add a 'Routes 'bracket around the 'Route' (as well as adding 'Routes' to your import), then swap out your 'component' for 'element', and wrap Login and Register in a self-closing tag (i.e. component={Login} becomes element={})
Great stuff man. Helped me a lot. But at the end it is very chaotic like you were going against the time :) Beside that it is awesome. Everything i neeeded in one place.
@15:22 I am still getting an empty object {}, I can see the data in payload in network tab in browser, and If i send a request using POSTMAN it logs it in the console and to the database
If you're watching that tutorial a few months after that video do yourself a favour and do not follow it. Or at least try to install the node dependencies used in that video. If you're using newer versions a lot of stuff won't work. I wasted a lot of time trying to fix NPM issues.
First do 'npm i jwt-decode'. After installing jwt-decode, go to the Dashboard file and change the import statement to 'import jwt_decode from "jwt-decode"' Then in the useEffect statement change jwt.decode to jwt_decode.
im getting the following error: Uncaught ReferenceError: process is not defined in node_modules/jsonwebtoken/lib/psSupported.js. please help me resolve this error, ive searched over an hour
Strange. Installing jsonwebtoken on server side was fine. But in order to use it on the dashboard page which is in the client side. cd client and npm i jsonwebtoken is giving me tons of error about crypto and stream!!!!!!!!!!!!!!!!!!!!!!!!!!! THEN USE in client u can remove it and install >npm i jwt-decode its work to me
Module not found: Error: Can't resolve 'jsonwebtoken' Do you have any idea how to solve this error? It happened when I was halfway through the authentication part
Hey Mehul, can you make the video on how to deploy mern stack applications? I am facing some issues each time I try and takes hours to figure out so a proper guidance would help.
Hi sir , a big fan of how to teach, please continue using vs code as the coding ground , its much more easy to use and understand all small bits and pieces than codedamn playground
Sir at time stamp 21:35 i did not see mongodb warning..just showing server running at 1337...i followed each step carefully cross checked it but still could not find...using vs code with npm ...please reply
1. Its just populating the data for the user. A function like posting in facebook. 2. jwt.sign({ id }, process.env.JWT_SECRET, { expiresIn: maxAge }); // create jwt with expiration. maxAge is in seconds to log out the user, create a function that sets the expiration to 1 second
hey, i would like to know your extensions, especially in predicting the next lines. THANK YOU FOR THIS VIDEO, IT HELPED ME A LOT FOR OUR CAPSTONE PROJECT
Bro please, make a video on how to don't let any url to send requests to my api, using cors, I mean that I want only a specific urls to send requests with specific methods to my api, and also do the front end because I could implement the server but with the front end there's an error i don't know how to do the headers thing
I think most peoples struggle to launch production app. Confusing which server to choose, need to think about server limits and when to switch to cloud services for images and so on..
Q1 How to deploy it on free cloud / host for testing. Q2. How can admin upload files so that users can access them . Rest your teaching is valuable Thanku
Am I the only one who has problem with the line "import jwt from 'jsonwebtoken'" in the client side in the dashborad file? if anyone had this problem and was able to solve it, please let me know how!
Nice video! But I get this error when using jwt in frontend: Module not found: Error: Can't resolve 'crypto' in '/home/miguelangel/dev/computerscienceia/screenser/client/node_modules/jsonwebtoken'
Hello. I have some problem when I try to get token from local storage. It show me null when I print it. And in video doesnt say sometging about where we set actually this token to localstorage
How do you use localStorage? I think I initially was following another person when attempting to work on my project and he had created a localStorage.js file in a util folder inside his client directory. So just curious as to how you are actually making use of it
I implemented this, when login successfull it will navigate to my dashboard page, since it's admin template, but got error like " is not able to match the url "/dashboard" because it does not start with the basement, so the won't render anything . Please help me it's urgent
I faced a problem when send x-access-token from react to node server. When I handle it in Node server. It says thats this toen is undefined. whats the problem. Who can help me
@@kaushikrishi01 nothing much, the fact that you can deploy your project anytime with 1 click. Im a mern lover, but we have to choose productivity from time to time. And ofc, the SEO, the SEO my friend.
@@DEV_XO I haven't explored nextjs yet. Does nextjs somehow remove the need to connect your app to a mongodb + express back-end? Or is it like a mern stack app only with nextJS used instead of reactJS?
@@chetan9533 In next js you don't need to create two seperate app like the node server and react server. It is a mixture of both. There are actually multiple ways in which you can connect to db in next js. It depends on the size of data. You can check out the course on next js from codedamn. There are many great resources available on yt also.
I am getting this error "MongooseError: Operation `userData.insertOne()` buffering timed out after 10000ms at Timeout. (C:\Users\aakashgoswami\Desktop\React Development\Authentication\server ode_modules\mongoose\lib\drivers ode-mongodb-native\collection." plz help me out.
@codedamn You encrypted the password on the server side, but user is sending the password in request body as plain text. what if someone attacks in between your frontend and and backend call? how would you handle that case. Please explain. Thank you .
I’m stuck at 13min. I can’t get the fetch output to appear. I don’t see the same errors or (in the network tab) ‘register’ routes under the “Name” column
Hi... I am getting a below error "Unable to get local issuer certificate". Please help on this heroku login Warning: Ignoring extra certs from `C:\path\to`, load failed: error:02001005:system library:fopen:Input/output error » Warning: heroku update available from 7.53.0 to 7.63.4. heroku: Press any key to open up the browser to login or q to exit: Error: unable to get local issuer certificate
Great tutorial! That helped me alot. Just one note: I did some queries with mongosh in parallel and it seems to have problems with the collection name 'user-data' (doing an db.user-data.find() produced an error message). After renaming the collection to (e.g.) 'users', problem was gone.
![Blox Fruits Dragon Rework Update [Full Stream]](http://i.ytimg.com/vi/EqDAp8udhm0/mqdefault.jpg)
Learn Complete MERN Stack Web Development on codedamn: cdm.sh/fullstack
Sir you don't think that we should avoid using mongoose and use mongodb driver's ???
What vsc theme is that?
Awesome tutorial.
Fair warning as a beginner, it took me much longer than the 49 mins of the video to be able to code along and get everything working. There's a lot of things that were deprecated in newer versions of React and took some digging and googling to figure things out, but in the end, that made the learning better.
Also, if you just clone the repo he provided, you won't be able to follow along as well since the final code is much different than the beginning. Better to code along to understand his thought process.
Thanks for the video, Mehul
can you please provide the new code bro?
True, although compared to other channels, I was able to keep up with this video quite easily.
for those who are following this now, useHistory is no longer a part of react-router-dom, instead make use of useNavigate() hook such as navigate("/login", { replace: true })
Thanks
U r right
So so helpful! Thanks!
Also, You can use window.location.replace("/login")
Love the video mate. Just a note though that the React-Dom-Router process you listed has since been updated in their V6. You need to add a 'Routes 'bracket around the 'Route' (as well as adding 'Routes' to your import), then swap out your 'component' for 'element', and wrap Login and Register in a self-closing tag (i.e. component={Login} becomes element={})
Further to this - useHistory is deprecated, and replaced with useNavigate 😀
I just blindly did that thing and got error, later reinstalled old version
Yeah the easier is to follow and to stick with v5, but thought i'd post in case anyone needs to use v6 for other reasons
@@alastairtooth6252 then you have learned nothing and just copy pasting...
@@reddinagaravikumar1402 then you are just imposter between programmers
this is the most to-the-point video on this subject I have yet found. thank you!
I learned so much here. Thank you!
Owo you are just 22 years old and doing amazing things...hats off
This was a great tutorial. You have explained how things will work in production as well as development in a very easy manner.
Cleared so much of my confusion from this video. Mainly the development vs production part in many things like server, cors etc. Great video Mehul.
Glad to help!
i have never seen this type of video on youtube. Thank you so much sir 💗
I mean it when I say, you don't know how much you have help me. I have been struggling to get this right and thanks to you I finally got it
man your content is awesome and command on the language is cool i didnt skipped a beat till i finished 👌👌
waiting for more MERN projects
Thank You very much!!
Great stuff man. Helped me a lot. But at the end it is very chaotic like you were going against the time :) Beside that it is awesome. Everything i neeeded in one place.
7 minutes in but loving this video so far!
bhai saab itna kuch ek video me op bhai
Hitesh Sir alternative is here !, Great Work .
You are so good at teaching! Thanks for the tips, helped a lot!!
I hear the MEN stack is your favorite, is that true?
Amazing video! Nice teaching! Good job👍
Mehul, please! Docker and all CI/CD stuff in the part 2! it would be fantastic! big please here :D
and yep, thank you!
thumbnail is dope ♥️♥️
Brilliant explanations. Brilliant video structure. Excellent video overall. Subscribed!
Best video which I needed 🙏
@15:22 I am still getting an empty object {}, I can see the data in payload in network tab in browser, and If i send a request using POSTMAN it logs it in the console and to the database
Same error bro. did you find any solution to it?
@codedamn such a gem, for learner like me. Thanks for all your efforts.
If you're watching that tutorial a few months after that video do yourself a favour and do not follow it.
Or at least try to install the node dependencies used in that video. If you're using newer versions a lot of stuff won't work.
I wasted a lot of time trying to fix NPM issues.
Right now liked & shared this video.. currently learning javascript so in future I'll work on this 😊 thanks 🙏🏻
I am excited to watch part 2
Bro❤❤❤thanks It’s an ultimate course …🥺🥺🥺 I don’t know how to thank you brother
I watched tons of videos for auth this is the best one
i can't use 'import jwt from 'jsonwebtoken' due to a webpack v5 issue. Pleaseee helpppp ?
First do 'npm i jwt-decode'.
After installing jwt-decode, go to the Dashboard file and change the import statement to 'import jwt_decode from "jwt-decode"'
Then in the useEffect statement change jwt.decode to jwt_decode.
@@FreeLeaks You saved me from a heart attack... Thanks man.
addicted to your video's
want this type of MERN projects
Amazing video btw 👌
Damn I'm flattered , thanks for the tutorial
Awesome tutorial!!
Very nice tut, good explanation!
im getting the following error:
Uncaught ReferenceError: process is not defined in node_modules/jsonwebtoken/lib/psSupported.js. please help me resolve this error, ive searched over an hour
Strange. Installing jsonwebtoken on server side was fine. But in order to use it on the dashboard page which is in the client side. cd client and npm i jsonwebtoken is giving me tons of error about crypto and stream!!!!!!!!!!!!!!!!!!!!!!!!!!! THEN USE in client u can remove it and install
>npm i jwt-decode
its work to me
Module not found: Error: Can't resolve 'jsonwebtoken'
Do you have any idea how to solve this error? It happened when I was halfway through the authentication part
it seems there was some syntax changes in jwt, view their latest documentation
Thanks buddy! this helps a lot.
Giant help!!!Thank you soooo much
Hey Mehul, can you make the video on how to deploy mern stack applications?
I am facing some issues each time I try and takes hours to figure out so a proper guidance would help.
u cannot just import jsonwebtoken inside react
after webpack 5. its give polyfill error
how to solve that ??
@@sarthakmoriya541 use react-jwt instead
Thanks a lot for the great tutorial! ❤
Great tutorial 👍👏
Gem of a tutorial!
I love your content ❤️
awesome thinking process
Hi sir , a big fan of how to teach, please continue using vs code as the coding ground , its much more easy to use and understand all small bits and pieces than codedamn playground
What is something you find fundamentally difficult with playgrounds right now? Trying to improve the experience there too
Hey! Express is pretty smart. They can automatically select (application/json)
thank you so much 😍
Sir at time stamp 21:35 i did not see mongodb warning..just showing server running at 1337...i followed each step carefully cross checked it but still could not find...using vs code with npm ...please reply
Make sure mongodb service is running
Local storage or cookies which one is better approach
you make it so easy thank you so much :)
What is the purpose of the quote functionality (for example, see 48:45)? Also, anyone figured out how to implement the logout feature?
1. Its just populating the data for the user. A function like posting in facebook.
2. jwt.sign({ id }, process.env.JWT_SECRET, {
expiresIn: maxAge
}); // create jwt with expiration. maxAge is in seconds
to log out the user, create a function that sets the expiration to 1 second
Vscode theme u'r using??
can you do the logout function too
hey, i would like to know your extensions, especially in predicting the next lines. THANK YOU FOR THIS VIDEO, IT HELPED ME A LOT FOR OUR CAPSTONE PROJECT
Bro please, make a video on how to don't let any url to send requests to my api, using cors, I mean that I want only a specific urls to send requests with specific methods to my api, and also do the front end because I could implement the server but with the front end there's an error i don't know how to do the headers thing
I think most peoples struggle to launch production app.
Confusing which server to choose, need to think about server limits and when to switch to cloud services for images and so on..
Thank you ! great vide !~
NEEDED THIS 🤝🤝🙏
Q1 How to deploy it on free cloud / host for testing. Q2. How can admin upload files so that users can access them . Rest your teaching is valuable Thanku
Thanks, super tutorial
Am I the only one who has problem with the line "import jwt from 'jsonwebtoken'" in the client side in the dashborad file? if anyone had this problem and was able to solve it, please let me know how!
Nice video! But I get this error when using jwt in frontend: Module not found: Error: Can't resolve 'crypto' in '/home/miguelangel/dev/computerscienceia/screenser/client/node_modules/jsonwebtoken'
Hey I am have same issue did you find any solution to it
amazing tutorial
Great Content
Iam getting error at user registration if I entered new email but response showing duplicate email
Hello. I have some problem when I try to get token from local storage. It show me null when I print it. And in video doesnt say sometging about where we set actually this token to localstorage
VM34:1 Uncaught (in promise) SyntaxError: Unexpected token '
I have solved that, what I did is I remove /api/register i just put only /register
@@sarfarazpycoder7870 i faced this issue specifically for the /api/quote fetch call found in Dashboard.js
Thanks for such awesome videos, always waiting for your new videos, will be glad to get t-shirt giveaway
How do you use localStorage? I think I initially was following another person when attempting to work on my project and he had created a localStorage.js file in a util folder inside his client directory. So just curious as to how you are actually making use of it
Hi you can't use 'import jwt from 'jsonwebtoken' on the frontend due to a webpack v5 issue. Does anyone know how to solve this?
same issue
same thing
same issue
have to use npm i jwt-decode
@@dgalhotra2091 after installing what should be done?
I implemented this, when login successfull it will navigate to my dashboard page, since it's admin template, but got error like " is not able to match the url "/dashboard" because it does not start with the basement, so the won't render anything . Please help me it's urgent
But how to expire token on user logout?
shldve probably used typescript but yeah great video! thanks
I faced a problem when send x-access-token from react to node server. When I handle it in Node server. It says thats this toen is undefined. whats the problem. Who can help me
I think it's vulnerable to store jwt inside localStore, including anyone can get access if they has token?
i am impressed.
Which theme and font you are using. Please 🙏 tell me bhaiya!!!
Still worthy to build a mern app isntead of a nextjs app? I used to love mern, until I discovered next, what do u think about it?
Nice videos also!
hey, can you simplify what you found good in next
@@kaushikrishi01 nothing much, the fact that you can deploy your project anytime with 1 click. Im a mern lover, but we have to choose productivity from time to time.
And ofc, the SEO, the SEO my friend.
@@DEV_XO I haven't explored nextjs yet. Does nextjs somehow remove the need to connect your app to a mongodb + express back-end? Or is it like a mern stack app only with nextJS used instead of reactJS?
@@chetan9533 In next js you don't need to create two seperate app like the node server and react server. It is a mixture of both. There are actually multiple ways in which you can connect to db in next js. It depends on the size of data. You can check out the course on next js from codedamn. There are many great resources available on yt also.
@@mitejmadan8672 ohhhh ok thanks.
Thank you so much!!
why you not use refresh token
Can I use a postgres database and follow the same process as shown ?
How is vscode automatically suggesting the code can anyone tell the name of the extension?
13:34 when you get frustrated naming a file 😂
haha i noticed too XD
I am getting this error "MongooseError: Operation `userData.insertOne()` buffering timed out after 10000ms
at Timeout. (C:\Users\aakashgoswami\Desktop\React Development\Authentication\server
ode_modules\mongoose\lib\drivers
ode-mongodb-native\collection."
plz help me out.
sir, what does that 22 years indicate on your home screen?
hi, is MERN good for quick development?
Which VSCode Theme are you using?
When i use the value={whatever} it doesent allow me to write in it in the application. The form is like disabled, any idea why?
Hi,
have you defined the onChange handler? i had a similar problem before defining
@codedamn You encrypted the password on the server side, but user is sending the password in request body as plain text. what if someone attacks in between your frontend and and backend call? how would you handle that case. Please explain. Thank you .
I’m stuck at 13min. I can’t get the fetch output to appear. I don’t see the same errors or (in the network tab) ‘register’ routes under the “Name” column
same error . how to rectify pls someone say
Hi...
I am getting a below error "Unable to get local issuer certificate". Please help on this
heroku login
Warning: Ignoring extra certs from `C:\path\to`, load failed: error:02001005:system library:fopen:Input/output
error
» Warning: heroku update available from 7.53.0 to 7.63.4.
heroku: Press any key to open up the browser to login or q to exit:
Error: unable to get local issuer certificate
Great tutorial! That helped me alot. Just one note: I did some queries with mongosh in parallel and it seems to have problems with the collection name 'user-data' (doing an db.user-data.find() produced an error message). After renaming the collection to (e.g.) 'users', problem was gone.
Yes, that’s because you had a dash in collection name. In that case write it like this: db['user-data'].find... and it would work
@@codedamn Ah.... thank you! Didn't know this solution yet.
Does anyone know what is the color theme of his VS ????
What about logout flow?
Which theme is this and share extension list... awesome theme I think is it dark one pro???