Login Validation & Authentication, Javascript Tutorial - #74

[@zeehutt7876]

It’s cool to see the Dom work and server side stuff and all of that come together. Shows just how much I don’t know but all the Codecademy courses I’ve taken have me somewhat recognizing everything. Now it’s time to try this to see if I actually get the concept.

[@DevDrawer]

Hey there. It is a good start and hopefully it helps you put all of the parts together and it clicks. You never know until you try :)

[@jamabdulghafoor1210]

That's something I was looking for. Thanks🧡

[@DevDrawer]

Glad you like it, be sure to watch the next 2 videos too and you can see how to implement it on your website with validation.

[@HaHoang-il5uy]

I see your way is very good, but I want to ask about the problem is how to secure "auth", if an experienced user like a hacker, they just need to go to F12 - Application - local storage and reserve auth = 1 then they can skip the login step. Thanks

[@DevDrawer]

You are correct. For this tutorial, its main purpose was to set up the form and validate it. I believe this is part 1 of 3. By the 3rd tutorial, we are passing variables back and forth to a custom API we built to handle the auth. However, it will still use the auth code that can be edited. Again this is just for the tutorial that is showing you how to validate inputs, validate against an API, and store data. I would use this but also use some of my other videos to secure it more with JWT. You can see some of that series here: kzbin.info/www/bejne/qmWWdYWPaKqYb9k You are making me think I need to do a series that kinda combines both series from start to finish. This series focuses more on the usability of the frontend code and JS FETCH whereas the other series focuses more on the security aspect of it and data-driven API usage. I think I am going to create a new series that combines all of this into one fully-working, secured project that you can implement just from the series instead of jumping back and forth. Keep in mind, most of my videos focus on a singular thing at a time so security is not covered in this video but the frontend look of it is. I will make a new series that covers all of this in more detail for users that want a fully working project out the gate. Thanks and I hope this helps.

[@juheehong7445]

does this series also deal with sign-ups for when new users don't yet have a login/password?

[@DevDrawer]

It does not, it goes over validation of the form and how to pull from the database, but you can use the fundamentals of the PHP classes to create an account endpoint which you can then hit and save the data to the database table. You can do this in the mean time, but I think I am going to do a video on this topic since usually I already have the dummy accounts in my DB to use and I don't think I have a video regarding creating new accounts. Thanks for the idea. Give me some time to get it but I will get something pushed out over the next few weeks.

[@kamw73]

@@DevDrawer I need to find the video for this too!

[@techandnavid]

Im having an issue with my style.scss file at 3:12. I am not able to "watch" it as that option does not come up in my VS code. I've tried some extensions and looked around but I can't seem to find a fix. Is there something I should have done but haven't?

[@DevDrawer]

I use the VS Code extension "Live SASS Complier". You can see how I use and set it up in this video: kzbin.info/www/bejne/qqnKY5l5hdiMj7c

[@gothfrog69]

Goth frog says thanks!!!

[@DevDrawer]

Umm, you're welcome. Thanks for watching.

[@Mintirafro]

At 20:45 I got the same typo error as you It's kinda hard not having vsCode correct you when needed most

[@Mintirafro]

Good God, my error messages weren't displaying because in the code was written innexText instead of innerText

[@DevDrawer]

Was that an error in my code or did you mistype?

[@Mintirafro]

@@DevDrawer the innexText typo was mine, but we both wrote "SibIling" instead of Sibling. Also, you corrected yourself in the video

[@DevDrawer]

Gotcha. I am glad you figured out the issue. Misspellings are alwasy tricky, for me atleast.

[@ayodeleayomidotun4115]

const form = document.querySelector(".loginForm"); I am having problem with this line this is the error i am getting👉 Uncaught SyntaxError: Unexpected identifier

[@DevDrawer]

Make sure you are creating this constant outside of the class on the login.js page. If you need to reference the code and verify your code against it, you can view the source code here: github.com/thedevdrawer/js-login/blob/main/js/login.js

[@prosper5227]

@@DevDrawer even with your code it still gives a "document is not defined " error

[@in2rythem]

cannot get dashboard.html error? any advice pls

[@DevDrawer]

Have you checked out the other videos that finish this series? You are referencing the first video of 3. Here are the other two: Create JSON Using PHP and MySQL, A Simple API - #75: kzbin.info/www/bejne/o2nVn3l-mZetmbs That video will show you how to create the API to hit for the login information. If you already have a DB setup and are using it, you can reference the following video to actually use the authentication for #74 and log into the site: JS Fetch with PHP RESTful API, Login Authentication - #76: kzbin.info/www/bejne/a6bNoZqhadSYacU I hope that helps. #76 should give you the completed details on how to get to your dashboard. If not, respond here and I will see what I can do.

[@in2rythem]

@@DevDrawer I have not. I'm trying to see if code is being grabbed successfully with the submit button but this error is stopping me from finishing the tutorial. I'm stuck at around 14min mark.. there was nothing explaining dashboard.html at the start of this I am completely lost... Thanks

[@in2rythem]

@@DevDrawer I've managed to find the issue. Thanks anyway for offering to help :)

[@DevDrawer]

I am glad you worked it out. Let me know if you run into any other issues.

[@karumby6595]

Hi, how can i display the username after the login?

[@DevDrawer]

So this video is part one of three. The other parts show you how to connect it to a database, and how to use JS fetch to populate the data. Part 2: kzbin.info/www/bejne/o2nVn3l-mZetmbs Part 3: kzbin.info/www/bejne/a6bNoZqhadSYacU Both of those videos will show you how to actually use real data to post from and create a log-in.