I'm new to html/js/css and in one of the tutorials it was going over getting input for username/password. This brought a curiosity about how would I make it so that when someone creates an account the data is stored in a secure way. I know that the password would need some sort of encryption/ decryption process but not sure at all what I would need to do to store the credentials so the user's account would validate each correct attempted sign-on.
My best guess at this point is that it may use one of the below. If someone could confirm or suggest what I should start looking into.
Window.localstorage
window.sessionStorage
I'd appreciate any and all assistance.
Typically you would store the user's information in a database that is accessed through an API (Application Programming Interface).
In a real application, you might use a HTTP POST to /api/login request to send the username and password to a backend server. The backend might respond with an API token that you could then store in localStorage or sessionStorage.
This token could then be used for subsequent requests to the API to display or update the user's information. When the token expires, the user would have to log in again.
Alternatively, you might log in using a HTML form. Your user might visit a page at /auth/login and enter their details into a HTML form. Upon submitting the form, a request is sent to the backend which generates a cookie that will be included with every request.
In either case, the encryption of the password happens in the backend, where it can't be seen by the user or other parties. Generally, you would use a one-way secure hash such as bcrypt.
When the user tries to log in, you apply the same hashing algorithm to the password they gave. Then you compare it to the hashed password that you have. If they are the same, you grant the user a token/cookie. Otherwise, you don't.