Skip to main content

Vanilla JS Login System Using A Custom API Full Series - #80


Published: December 10, 2021


Estimated Reading Time
2 minutes
Video Duration
1:58:02 minutes

In this video, we will create a form validator for a simple login page using HTML, SASS, and Vanilla JavaScript. Basically, we use JS to create classes that will validate the login variables based on our needs then we will store information in the browser for authentication.

I do not use Bootstrap, jQuery, or any other frameworks. This method can be used on local browsers, web apps, and even on your server since it is all front-end code.

Next, we convert data from MySQL to JSON format using PHP, OOP, and PDO. This is a simple way to create information that can be read by an external application. In this tutorial, we create an application that makes data accessible on different platforms regardless of code. We create a REST or RESTful API that takes data from a server opens it to your applications. Converting the data to JSON is the first step to building your own API.

Finally, we tie it all together. Using JS Fetch, we send a username and password as JSON to our API, validate that against our database, then finally return with an error message or a single user account.

This project will teach you about the basics of JS fetch and how to encode and send JSON data using JS. It will also show you how to get that JSON data and interpret it in a way our API can understand and return the correct information or messages.

Become a Patreon to show support and get exclusive access to content: https://www.patreon.com/devdrawer

Applications Used

Visual Studio Code v1.43: https://code.visualstudio.com/

WAMP v3.2.0: http://www.wampserver.com/en/ -js

Computer Hardware:

Windows 10 Pro: https://amzn.to/3q5TyZw (Amazon)

Samsung 500GB External SSD: https://amzn.to/2ViAAAF (Amazon)

Samsung 970 EVO Plus SSD 1TB - M.2 NVMe: https://amzn.to/36jDwDy (Amazon)

Rosewill Hive-750S R750W PSU: https://amzn.to/36jiDbs (Amazon)

Phanteks Eclipse Tempered Glass Case: https://amzn.to/39qou0B (Amazon)

MSI Arsenal Gaming AMD Ryzen Motherboard: https://amzn.to/36hpAKm (Amazon)

MSI Gaming GeForce RTX 2060 Super 8GB: https://amzn.to/36hMyRm (Amazon)

LG 34UM69G-B 34-Inch 21:9 UltraWide IPS Monitor: https://amzn.to/2HSRxyI (Amazon)

Corsair 64GB (4 x 16GB) DDR4 Memory: https://amzn.to/3mlmQkI (Amazon)

AMD Ryzen 7 2700X Processor: https://amzn.to/3qdQIBF (Amazon)

Dell XPS 15 9500 15.6" Laptop / Windows: https://amzn.to/3fKEz2w (Amazon)

Lenovo ThinkPad T15 15.6" Laptop / Linux: https://amzn.to/2Jnmn33 (Amazon)

Camera:

Fujifilm X-T3: https://amzn.to/3llKBb5 (Amazon)

Fujinon XF18-55mmF2.8-4: https://amzn.to/3mfTkNb (Amazon)

Audio:

Audio Technica AT2020: https://amzn.to/2VgxU6K (Amazon)

Blue Snowball iCE: https://amzn.to/3lo1jGC (Amazon)

DISCLAIMERS:

I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.