How Sign-In and Sign-Up Work in Web Applications

Hello developers! In this blog post, we will learn and understand how user management, including sign-in, sign-up, user verification, logging status, is done in web applications.

In web applications, the sign-in and sign-up processes are fundamental components for user authentication and authorization. But how are they done? And if we want to add user management to our web applications, do we need any Auth SDK, or can we build it without any SDK?

If we understand the logic behind these processes, then we can build our own SDK or write logical code and easily manage user authentication and authorization. So let's begin the discussion of user management.

Sign-Up or User Registration

This is the first step of user management. We show a registration or sign-up form to the user where they provide necessary information such as username, email address, password, etc. The information we need to manage a user in our application depends on the type of application.

The user management pages are not just for user visits to our app, but for a good user experience and impression, it is good to style and give a look to these pages.

It is best to ask the user for only that information which we need to manage their profile. For user transparency, we must mention how and which information is used for what purpose in our privacy policy and terms of use.

At the time of registration, we only ask for information for the first step of use. It means we ask for only those details or minimal details which are needed in user creation, and then further ask for more information as the user wants to use our application or service.

After the user fills the form and presses the submit button, we must validate the user's information to meet certain criteria (e.g., valid email format, password complexity requirements) on the client-side first and/or then on the server-side, and show messages to correct any information that does not meet that criteria. We must encrypt or hash any sensitive information at the client-side before submission and store encrypted data.

Once we get the user information on the server, then before creating the user, we first ensure that any user does not already exist, then create a user, meaning storing that information in the database.

Information Verification

This is an optional step, but nowadays almost all websites ensure that the provided information actually belongs to the user, and we may include this step before user creation. For verification of humans or bots, we use Captcha, and for email and phone, we send a link or OTP to the user's email.

But how do we verify this information? If we consider OTP verification, then how do we verify OTP? After sorting the user's information, we also store the created OTP before sending it to the user with the time of creation so that we do not send unnecessary OTPs to the user because storing can fail, and set an expiry time.

After the user enters OTP, we make another HTTP request and in the processing of this request, we fetch the stored OTP and verify it with the expiry time. If verified, then mark the stored information as verified by a boolean value or as you want and report any failure to the user with a proper message.

Sign-In

In the sign-in process, we prompt the user to input their credentials (typically username/email and password) into a login form. We send filled credentials to the server for authentication. At the server, we verify the provided credentials against those stored in the database.

Upon successful verification, we create a session for the user. Typically, the session includes a unique identifier token, an id by which we fetch user information, and time to track the expiry of the session. This session is stored on the user's browser using cookies or local stores.

Logged-in Status

When a user visits our website and runs scripts, we find session information in the user's browser. If the user's browser has our stored session information, then it means the user is in a logged-in state; otherwise, they are logged out. When the user is logged in, we send this session to the server to fetch more user information.

So these are the steps to manage users in our web application, and this blog is written based on email login, but we can authenticate users using OAuth. I hope you learn and understand all steps. Happy Coding!