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.
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.
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, 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
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
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";
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..
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.
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
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
@@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.
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
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.
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!
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
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'
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
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
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';
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
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 was a great tutorial. You have explained how things will work in production as well as development in a very easy manner.
this is the most to-the-point video on this subject I have yet found. thank you!
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
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!
waiting for more MERN projects
Thank You very much!!
i have never seen this type of video on youtube. Thank you so much sir 💗
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 👌👌
Owo you are just 22 years old and doing amazing things...hats off
You are so good at teaching! Thanks for the tips, helped a lot!!
I hear the MEN stack is your favorite, is that true?
Mehul, please! Docker and all CI/CD stuff in the part 2! it would be fantastic! big please here :D
and yep, thank you!
Amazing video! Nice teaching! Good job👍
Brilliant explanations. Brilliant video structure. Excellent video overall. Subscribed!
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.
bhai saab itna kuch ek video me op bhai
@codedamn such a gem, for learner like me. Thanks for all your efforts.
7 minutes in but loving this video so far!
want this type of MERN projects
Right now liked & shared this video.. currently learning javascript so in future I'll work on this 😊 thanks 🙏🏻
Bro❤❤❤thanks It’s an ultimate course …🥺🥺🥺 I don’t know how to thank you brother
thumbnail is dope ♥️♥️
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.
Best video which I needed 🙏
Hitesh Sir alternative is here !, Great Work .
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.
Thanks buddy! this helps a lot.
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
I watched tons of videos for auth this is the best one
I am excited to watch part 2
Very nice tut, good explanation!
Damn I'm flattered , thanks for the tutorial
thank you so much 😍
addicted to your video's
Giant help!!!Thank you soooo much
Hey! Express is pretty smart. They can automatically select (application/json)
Thanks a lot for the great tutorial! ❤
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
you make it so easy thank you so much :)
Awesome tutorial!!
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
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..
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.
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
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
Amazing video btw 👌
Gem of a tutorial!
NEEDED THIS 🤝🤝🙏
can you do the logout function too
shldve probably used typescript but yeah great video! thanks
Great tutorial 👍👏
I love your content ❤️
u cannot just import jsonwebtoken inside react
after webpack 5. its give polyfill error
how to solve that ??
@@sarthakmoriya541 use react-jwt instead
Thank you ! great vide !~
Thanks, super tutorial
Thanks for such awesome videos, always waiting for your new videos, will be glad to get t-shirt giveaway
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.
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
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.
Thank you so much!
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!
amazing tutorial
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
Vscode theme u'r using??
@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?
Great Content
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
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
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
Sir your communication skills really amazing I'm big fan of your voice and communication ♥️♥️
Where are you from
i am impressed.
hi, is MERN good for quick development?
@codedamn Great Video and Effort behind this.
Get some sleep dude.
very helpful.
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
Yeay 🔥🔥🔥🔥
Which theme and font you are using. Please 🙏 tell me bhaiya!!!
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';
But how to expire token on user logout?
this is gem
Who love MERN 👊
Thank You
would be nice if you used mysql, more usable in the real world
can you make a video on google authentication in mernstack
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?
why you not use refresh token
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
Which theme is this and share extension list... awesome theme I think is it dark one pro???
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
instead of using mongoose or monk, Why no one prefer mongodb driver?
I have tried so much but req.body is giving undefined every time 15-16 min
tahnks
What about logout flow?
It's awesome
Wow🔥