Creating a Basic Log In/Sign Up System Using JavaScript ONLY (No PHP or Server-Side)?

Question

We have been given a challenge at university to create an appointment booking system using client-side programming only, which has went well so far. I am currently trying to create a very straight-forward login system so that users can view and reschedule their bookings on the website, however my internet searches have provided very little help.. I found this article (https://github.com/zellwk/zellwk.com/blob/master/src/posts/2020-02-05-frontend-login-system.md) which I thought was straight forward but jumps around a lot and I am not sure what the final JS layout is supposed to resemble, and I'm having a tough time trying to figure out how to connect my code to it (sorry JS newbie).

Anyway, I wondered more if its even possible to do, can I store credentials to my localStorage? Should I use JSON? I will include my basic form code, but I am more looking for advice and/or if anyone can point me in the right direction of an article where I can learn how it's done, all I can find is PHP/MySQL login tutorials.

          <form id="basiclogin" name="basiclogin" onsubmit="basicLogin()" class="col-sm-6">
                    <div class="row">
                        <input type="textbox" placeholder="Username" name="email">
                        <input type="textbox" placeholder="Password" name="password">
                        <input type="submit" value="Submit">
                    </div>
                </form>

Answer 1

to build any login system you need several parts:

1. form where credentials will be entered, e.g. email and password
2. place where to store data. Any kind of database. To play with, you can store to browser's storage while you entered tags client-side and local-storage.

Check https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB Of course this data storage is local for client, client can view it and do whatever wants with it. If you need real auth, you must have backend. Either run yourself something like nodejs express server which would connect so some kind of data storage again to store data, or keep that 'in memory' aka some object, array or else, of course that would be lost after service restart. to keep data in file system - use the bare minimum some file, for any kind of more realistic app - database from sqlite which can run without any database installations to something crazy like AWS DynamoDB.

3. collect data from form and forward it to place where you have your data storage solution and check if credentials are correct. If database is something like MySQL which runs on server, you will have to send data to backend, use POST request.

4. check against previously saved data if your credentials are correct and return identifier for the user which would be deleted on logout. This often is session id for PHP apps, for JS some kind of authorization token which later can be used to call backend again to authorize user and list, remove, update some data in database which belongs to this user.

So when you have place where you store data of user credentials you need to accept data from form, forward it to the backend or client side function which would check against your stored data if this login data is correct if so - create session id, auth token or whatever temporary identifier which would identify the user and that's it, user can authenticate with it.

If you can not use server side, use local storage, Web SQL, IndexedDB. pick one, find some samples how to save data and get out of it. So you could register and login.

open dev tools and here are your options:

it's of course totally insecure while client has full access to the database and also it has no "internet" thing, while it runs in your browser only.

of course i talk here about absolute bare minimum to make concept of login "happen", hopefully it helps you on your way to learning how systems work :)