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={})
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.
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.
When you start implementing jwt, if you get the 'BREAKING CHANGE' error in regards to webpack 5 then do the following. npm i jwt-decode **instead of importing jwt from 'jsonwebtoken'** import jwt from "jwt-decode";
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
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
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.
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.
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
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..
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
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.
@@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.
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'
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
@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
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
if you get this error message Error message "error:0308010C:digital envelope routines::unsupported", try writing this line on your start script: "start": "react-scripts --openssl-legacy-provider start". if you get this error "'React' must be in scope when using JSX" try writing this to your imports: import React, { Component being use goes here } from 'react';
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
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
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
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
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!
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.
Owo you are just 22 years old and doing amazing things...hats off
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
this is the most to-the-point video on this subject I have yet found. thank you!
This was a great tutorial. You have explained how things will work in production as well as development in a very easy manner.
Mehul, please! Docker and all CI/CD stuff in the part 2! it would be fantastic! big please here :D
and yep, thank you!
I learned so much here. Thank you!
man your content is awesome and command on the language is cool i didnt skipped a beat till i finished 👌👌
i have never seen this type of video on youtube. Thank you so much sir 💗
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.
You are so good at teaching! Thanks for the tips, helped a lot!!
I hear the MEN stack is your favorite, is that true?
When you start implementing jwt, if you get the 'BREAKING CHANGE' error in regards to webpack 5 then do the following.
npm i jwt-decode
**instead of importing jwt from 'jsonwebtoken'**
import jwt from "jwt-decode";
but i then get error jwt.sign is not recognized
waiting for more MERN projects
Thank You very much!!
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
want this type of MERN projects
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
Hey! Express is pretty smart. They can automatically select (application/json)
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.
Bro❤❤❤thanks It’s an ultimate course …🥺🥺🥺 I don’t know how to thank you brother
Right now liked & shared this video.. currently learning javascript so in future I'll work on this 😊 thanks 🙏🏻
Brilliant explanations. Brilliant video structure. Excellent video overall. Subscribed!
@codedamn such a gem, for learner like me. Thanks for all your efforts.
Amazing video! Nice teaching! Good job👍
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.
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
bhai saab itna kuch ek video me op bhai
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..
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
Best video which I needed 🙏
7 minutes in but loving this video so far!
Hitesh Sir alternative is here !, Great Work .
thumbnail is dope ♥️♥️
u cannot just import jsonwebtoken inside react
after webpack 5. its give polyfill error
how to solve that ??
@@sarthakmoriya541 use react-jwt instead
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.
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.
I watched tons of videos for auth this is the best one
Thanks buddy! this helps a lot.
can you do the logout function too
addicted to your video's
I am excited to watch part 2
thank you so much 😍
shldve probably used typescript but yeah great video! thanks
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!
Vscode theme u'r using??
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
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
Sir your communication skills really amazing I'm big fan of your voice and communication ♥️♥️
Where are you from
@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?
Very nice tut, good explanation!
would be nice if you used mysql, more usable in the real world
Giant help!!!Thank you soooo much
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
NEEDED THIS 🤝🤝🙏
if you get this error message Error message "error:0308010C:digital envelope routines::unsupported", try writing this line on your start script: "start": "react-scripts --openssl-legacy-provider start".
if you get this error "'React' must be in scope when using JSX" try writing this to your imports:
import React, { Component being use goes here } from 'react';
Damn I'm flattered , thanks for the tutorial
Thanks a lot for the great tutorial! ❤
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
you make it so easy thank you so much :)
Its better to show the final app in the intro of the video,
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?
But how to expire token on user logout?
awesome thinking process
Awesome tutorial!!
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
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
Great tutorial so far....👌👌
btw is it fine to skip semicolons
or is it a bad impression ?
react is a javascript framework..so in javascript you always put semicolons
Hi, this is very good, well done! But can't you do it a bit slower anyway this is a beginner type like me😉. with respect!
Gem of a tutorial!
Which theme and font you are using. Please 🙏 tell me bhaiya!!!
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
Great tutorial 👍👏
hi, is MERN good for quick development?
Amazing video btw 👌
can you make a video on google authentication in mernstack
instead of using mongoose or monk, Why no one prefer mongodb driver?
I love your content ❤️
Thank you so much!
Which theme is this and share extension list... awesome theme I think is it dark one pro???
Thanks, super tutorial
Thank you ! great vide !~
Which VSCode Theme are you using?
plese tell about mern stack future
mern vs wp devvloper which best|?
amazing tutorial
Can I use a postgres database and follow the same process as shown ?
sir, what does that 22 years indicate on your home screen?
why you not use refresh token
13:34 when you get frustrated naming a file 😂
haha i noticed too XD
I have tried so much but req.body is giving undefined every time 15-16 min
i am impressed.
Iam getting error at user registration if I entered new email but response showing duplicate email
what on earth is a quote
Hey there,
Do you have a project for a bug tracker using MERN?
I think it's vulnerable to store jwt inside localStore, including anyone can get access if they has token?
What about logout flow?
why dont you guys show the project link?