Hey All, to prevent any future confusion, the git repository and the code in the tutorial are a tiny bit different but still work the same way. I provided comments for these two files to show you the difference. TL;DR => The payload for the JWT generator was different. jwtGenerator.js => github.com/l0609890/pern-jwt-tutorial/blob/master/server/utils/jwtGenerator.js dashboard.js => github.com/l0609890/pern-jwt-tutorial/blob/master/server/routes/dashboard.js I also notice that I used a post request when accessing our dashboard. This is not right! It should be a get request , because I am simply requesting information. Your application will still work;however I want to make sure you guys get the best practice so don't do what I did.
Hi. Great tutorial but how do we fix the "App.js:25 GET localhost:5000/auth/is-verify 403 (Forbidden)" error message 55:53 when we are on the Login page? Thanks
@@erce1000 im getting the same thing, with a "jwt malformed" message in the server console. Although it doesn't seem to be affecting the functionality. What gives!?
12:00 for anyone following along in 2024, you need to change to Also replace render={props => with just element = {} inside each This is because in react-router v6 props are passed internally Also, Redirect has been replaced with Navigate 20:00 btn-block has been replaced with w-100
Wow! This was so good! Thanks so much for your 2 part series. I'm working on one of my first React apps and your tutorials were by far the best I've seen. I learned a lot! Thank you! Please continue making more!
If you are using this tutorial in 2022, react-router-dom v6 uses Router instead of Switch. Also react-toastify is configured differently in current version.
Thank you AGAIN and AGAIN for these helpful series !!! The way you explain everything is simple and clear ! Now i'm able to make a PERN app with auth 🤩🤩🤩. Keep up with the good work and I'll continue to follow your tutorials.
AMAZING TUTORIAL!!! I should change some kinds of elements because of changed React, but doesn't matter...tutorial the best what I know!!! Awesome, I really confused in this topic, but now I sent this video to all my friends))) Thanks a lot
Your videos have been amazing and they've taught me so much. Thanks a lot bro I'll be sure to check out your other videos when I want to learn something new :)
Hey! Thank you so much for this tutorial, I learned a lot and it was a very good experience. I really like your way of teaching, you are always extremely optimistic and happy :D Again, thank you so much!
if you're getting this error: Attempted import error: 'Route' is not exported from 'react-router-dom'. you need to also install the 'react-router' package
I can successfully register a user, but getProfile() in the Dashboard.js component is throwing the following error :"Unexpected end of JSON input". This doesn't happen when I use the Login.js component with the same credentials. ... update: I figured it out. I changed the server's /register route from "RETURNING *" to "RETURNING user_name, user_email" because i heard it was best practice to never return passwords (even hashed). However, user_id was needed, and since that was not being returned it messed up the token generation.
I keep getting GET localhost:5000/auth/is-verify 403 (Forbidden) when I load localhost:5000 and also localhost:5000/register and login.. and when i submit the regist/login form I get: POST localhost:5000/auth/register 401 (Unauthorized) and my files exactly like the video. Any ideas?
Just finished the todo list and part 1 of this. Just wondering, how does passport come into play, do we really need it if we are using jwt like you did in part 1?
I was super stoked about this until I realized that many of your modules have been updated. React 18 syntax has changed, react-router-dom has changed. Yah getting to this video was discouraging with how much has been updated. I'll work around this by using the context api. I bet life is busy friend but if you ever get an opportunity to update these please do. There is such a lack of pern stack material out there
Hey, thanks for your great tutorials. I got the same problem as some other people by following this guide and trying to deploy this with your "how to deploy to heroku" guide. I saw the question already asked but could not find any answer to it. Why does this not work after the deploy to heroku? Register and Login perma give the error (500 server error). Is there any solution to it?
Hey Henry. I love the vids so far, but I have a request. Can you show how to upload this app to Heroku? I tried following your other deployment video, and made some tweaks, added config vars, etc, but I can't get the login and registration to work (500 server error). HELP!
I know I might be dealing with an issue outside my scope of understanding but now that I've encountered this problem, I really wanna solve it. It seems to be the way the front-end is authenticating. Someone suggested it may be better to use cookies.
how can i handle this error? ''react_toastify__WEBPACK_IMPORTED_MODULE_2__.toast.configure is not a function'' i don't know how to change 'toast.configure' function. please share the code :(
hi, thanks for this amazing tutorial. i got a little question, dont we need to check if we get the response.token before we put in in the local-storage and the setAuth method to true (inside the register and login componnent)? when i enter incorrect password or email i am still get transferred to the dashboard.
hi, I cloned your project, and both the client side and server are running in their respective terminals but when I fill registration form then I don't receive any message, nothing happens!, Any solution?
wery good tutorial, but i have a question: Is there a way so if i enter site by tiping it in, or reloading it will not load Login site first? when making more sites it always starts login site, and than redirects it to the dashboard site like it says in router. Is it ok to change isAuthenticated to true? it will always redirect to login anyways.
Hi! I'm not sure how to connect to my localhost:3000 to view the changes on react... any tips on this? I can't find any resources online as well. What i previously understand is that you need a html file but from following your tutorial i don't seem to see any...? is nodemon being used? or npm start or something? thanks!
You said you just finished downloading the client, so I thought I should follow too. Then after I download it, turn out everything been coded, so what am I supposed to do? It really confuse me when you jump around file to delete this part, and not delete this part, but then go to other file and delete the file completely. Why didnt you just set up everything from 0 again, like from creating the client folder. Yes it will take more times, but isn't tutorial supposed to clear all the confusion and not making one? I mean this is 180 from the experience I got on the first part.
@@jumbo999614 Hi, do u have discord to help me? I keep getting GET localhost:5000/auth/is-verify 403 (Forbidden) when I load localhost:5000 and also localhost:5000/register and login.. and when i submit the regist/login form I get: POST localhost:5000/auth/register 401 (Unauthorized) and my files exactly like the video.
@@friendsplaytime3588 Did you test with POSTMAN? If it works, then it must be Frontend which can be any files in Client folder. Error 403 (forbidden), that means it doesn't get your JWT token at AUTHORIZATION middleware. Also, did you start 'npm start' on both Server and Client? I wish I could post all files in client folder here but it's really long code. Anyway, I use Controller for Router's POST and GET and middleware which makes it easy to manage.
Hey All, to prevent any future confusion, the git repository and the code in the tutorial are a tiny bit different but still work the same way. I provided comments for these two files to show you the difference.
TL;DR => The payload for the JWT generator was different.
jwtGenerator.js => github.com/l0609890/pern-jwt-tutorial/blob/master/server/utils/jwtGenerator.js
dashboard.js => github.com/l0609890/pern-jwt-tutorial/blob/master/server/routes/dashboard.js
I also notice that I used a post request when accessing our dashboard. This is not right! It should be a get request , because I am simply requesting information. Your application will still work;however I want to make sure you guys get the best practice so don't do what I did.
Hi. Great tutorial but how do we fix the "App.js:25 GET localhost:5000/auth/is-verify 403 (Forbidden)" error message 55:53 when we are on the Login page? Thanks
@@erce1000 Should be a POST request, the github repos shows it as post now
@@erce1000 im getting the same thing, with a "jwt malformed" message in the server console. Although it doesn't seem to be affecting the functionality. What gives!?
Contents are a bit outdated, but this is gold for someone looking out for starting pern stack with a tight time constraint.
Here i am lol. PERN stack assignment for company interview. I was able to understand the holistic view easily with henry's teaching.
This video should be the 'hello world' tutorial to full-stack development!
12:00 for anyone following along in 2024, you need to change to
Also replace render={props => with just element = {} inside each
This is because in react-router v6 props are passed internally
Also, Redirect has been replaced with Navigate
20:00 btn-block has been replaced with w-100
Wow! This was so good! Thanks so much for your 2 part series. I'm working on one of my first React apps and your tutorials were by far the best I've seen. I learned a lot! Thank you! Please continue making more!
More pern stack video s please. X 2!!
Thank you for the help, it would have taken me such a long time understanding this on my own. Cheers! 👏 ✌️
If you are using this tutorial in 2022, react-router-dom v6 uses Router instead of Switch. Also react-toastify is configured differently in current version.
Thank you AGAIN and AGAIN for these helpful series !!! The way you explain everything is simple and clear ! Now i'm able to make a PERN app with auth 🤩🤩🤩. Keep up with the good work and I'll continue to follow your tutorials.
More pern stack video s please.
Thankyou for making this concept so easy to understand. Your videos are amazing. Keep up the good work 🔥
AMAZING TUTORIAL!!! I should change some kinds of elements because of changed React, but doesn't matter...tutorial the best what I know!!! Awesome, I really confused in this topic, but now I sent this video to all my friends))) Thanks a lot
Very good tutorial. Watched 1 part as well and everything works perfectly. It's so hard to find good tutorial, but this was just perfect. Thank you.
Your videos have been amazing and they've taught me so much.
Thanks a lot bro I'll be sure to check out your other videos when I want to learn something new :)
Hey! Thank you so much for this tutorial, I learned a lot and it was a very good experience. I really like your way of teaching, you are always extremely optimistic and happy :D Again, thank you so much!
great series. i hope you guys continue. thanks...
AWESOME, thank you. You should post more...
PERN payment methods please.
I'm so much confused on the 2nd part. The 1st vid was really good and nice.
Great vids :) Too bad there is no more material! Are you posting on another account?
if you're getting this error: Attempted import error: 'Route' is not exported from 'react-router-dom'. you need to also install the 'react-router' package
when we refresh browser it shows nothing... i mean it should display login page default but nothing shows ... help please
I can successfully register a user, but getProfile() in the Dashboard.js component is throwing the following error :"Unexpected end of JSON input". This doesn't happen when I use the Login.js component with the same credentials.
...
update: I figured it out. I changed the server's /register route from "RETURNING *" to "RETURNING user_name, user_email" because i heard it was best practice to never return passwords (even hashed). However, user_id was needed, and since that was not being returned it messed up the token generation.
Wow,, you are really great.. It’s great video for me.. Thank you
I keep getting GET localhost:5000/auth/is-verify 403 (Forbidden) when I load localhost:5000 and also localhost:5000/register and login.. and when i submit the regist/login form I get: POST localhost:5000/auth/register 401 (Unauthorized)
and my files exactly like the video. Any ideas?
facing the same problem here
Just finished the todo list and part 1 of this. Just wondering, how does passport come into play, do we really need it if we are using jwt like you did in part 1?
I was super stoked about this until I realized that many of your modules have been updated. React 18 syntax has changed, react-router-dom has changed. Yah getting to this video was discouraging with how much has been updated. I'll work around this by using the context api. I bet life is busy friend but if you ever get an opportunity to update these please do. There is such a lack of pern stack material out there
how did you fix them ? i am working on a project and i will apreciate id you would tell me what did you do to work? helpppp please i got stuck
Wonderful!!! When do you plan on creating a udemy course?
Is there any chance that you do a video of how to do auth with redux and the pern stack? I know it's hard, but I'd really like to learn it.
Thanks so much for this!
Hey, thanks for your great tutorials. I got the same problem as some other people by following this guide and trying to deploy this with your "how to deploy to heroku" guide. I saw the question already asked but could not find any answer to it. Why does this not work after the deploy to heroku? Register and Login perma give the error (500 server error). Is there any solution to it?
thank you your tutorial was very helpful
hi, after cloning his project, it is running but the screen is all white, do you know how to run it?
I dont understand what are you doing by passing {...props} to every component and where do you make use of that. Can u help me understand? Thanks!
Hey Henry. I love the vids so far, but I have a request. Can you show how to upload this app to Heroku? I tried following your other deployment video, and made some tweaks, added config vars, etc, but I can't get the login and registration to work (500 server error). HELP!
I know I might be dealing with an issue outside my scope of understanding but now that I've encountered this problem, I really wanna solve it. It seems to be the way the front-end is authenticating. Someone suggested it may be better to use cookies.
here is the git repository. If you're at all able to provide some insight, I'd greatly appreciate it :) github.com/vincanger/PERN-music-notes
how can i handle this error? ''react_toastify__WEBPACK_IMPORTED_MODULE_2__.toast.configure is not a function''
i don't know how to change 'toast.configure' function. please share the code :(
Very good tuto but unfortunately not working with React Router V6 :/
is there a similar guide that shows how to handle 'admin' accounts?
hi, thanks for this amazing tutorial. i got a little question, dont we need to check if we get the response.token before we put in in the local-storage and the setAuth method to true (inside the register and login componnent)? when i enter incorrect password or email i am still get transferred to the dashboard.
never mind, just saw you already did it.
Why not use react hooks? instead of render props ?
hi, I cloned your project, and both the client side and server are running in their respective terminals but when I fill registration form then I don't receive any message, nothing happens!, Any solution?
wery good tutorial, but i have a question: Is there a way so if i enter site by tiping it in, or reloading it will not load Login site first? when making more sites it always starts login site, and than redirects it to the dashboard site like it says in router. Is it ok to change isAuthenticated to true? it will always redirect to login anyways.
hello! I'm getting the same problem... have you managed to fix it?
Hi! I'm not sure how to connect to my localhost:3000 to view the changes on react... any tips on this? I can't find any resources online as well. What i previously understand is that you need a html file but from following your tutorial i don't seem to see any...?
is nodemon being used? or npm start or something? thanks!
start your server with nodemon than npm start on client
How to duplicate the useEffect method in React.Component?
use componentDidMount instead of useEffect (React.Component)
You said you just finished downloading the client, so I thought I should follow too. Then after I download it, turn out everything been coded, so what am I supposed to do? It really confuse me when you jump around file to delete this part, and not delete this part, but then go to other file and delete the file completely. Why didnt you just set up everything from 0 again, like from creating the client folder. Yes it will take more times, but isn't tutorial supposed to clear all the confusion and not making one?
I mean this is 180 from the experience I got on the first part.
holy shit
And... Sequelize?
Has anyone gotten this tutorial to work?
I completed this tutorial. You're getting error? Maybe I can help.
@@jumbo999614 Hi, do u have discord to help me? I keep getting GET localhost:5000/auth/is-verify 403 (Forbidden) when I load localhost:5000 and also localhost:5000/register and login.. and when i submit the regist/login form I get: POST localhost:5000/auth/register 401 (Unauthorized)
and my files exactly like the video.
@@friendsplaytime3588 Did you test with POSTMAN? If it works, then it must be Frontend which can be any files in Client folder. Error 403 (forbidden), that means it doesn't get your JWT token at AUTHORIZATION middleware. Also, did you start 'npm start' on both Server and Client?
I wish I could post all files in client folder here but it's really long code.
Anyway, I use Controller for Router's POST and GET and middleware which makes it easy to manage.
@@friendsplaytime3588 i got the same error. is this solved already?
22:32 why do you have that test@gmail.com and a password already placed whenever you refresh??????????????????? anybody knows?????????????????
its because of autocomplete, you can make it off if you don't want that to happen by placing autoComplete="off" in input field
55:36 got error why not explain to us?
when i refresh the page it shows login page for instance ? why ?