How Authentication Actually Works in Web Apps

You log in to a website, and somehow it remember you. But how does it actually work behind the scenes? where does your login state get stored? Let's find out!

In our previous post, we discussed the difference between authentication (AuthN) and authorization (AuthZ). Now, let's take a closer look into how authentication actually works in web applications.

Before we start to write any code, we'll start by understanding the concepts behind how authentication works. Because once you get this foundation, the implementation will be much easier to understand.

How Web Apps Handle Auth (Big Picture)

Here is the basic flow when you log in to a web application:

1. User enters their credentials (like username and password) on the login page.
2. The web application sends these credentials to the server for verification.
3. If its valid, the server needs a way to "remember" the user.
4. On the next request, the client sends back that "proof" to stay authenticated.

But, how does the server remember you? and how does the client prove that it's really you on the next request?

There are two main approaches used today:

• Sessison-based Authentication (traditional, server-side)
• Token-based Authentication (modern, API-friendly)

We will explore both of these approaches in detail.

Session-based Authentication

This method has been around for a long time and is commonly used in traditional web applications, especially those that render HTML on the server side.

How It Works

1. Login: User submits their credentials to the server.
2. Server Verification: The server checks the credentials against its database.
3. Create Session: If valid, the server creates a session for the user and stores it in memory or a database. It generates a unique session ID.
4. Set Cookie: The server sends a cookie containing the session ID back to the client.
5. Future Requests: On future requests, the client automatically sends the cookie with the session ID.
6. Server Checks Session: The server checks the session ID from the cookie against its session store to verify the user's identity.

Pros and Cons

Pros	Cons
Simple to implement	Doesn't scale well in distributed systems
Cookies are automatically handled by browsers	Vulnerable to CSRF attacks if not properly secured

Token-based Authentication

This method is more modern and has been widely used, it often use JWT (JSON Web Tokens).

How It Works

1. Login: User submits their credentials to the server.
2. Server Verification: The server checks the credentials against its database.
3. Generate Token: If valid, the server generates a token (like JWT) containing user information and signs it.
4. Send Token: The server sends the token back to the client.
5. Store Token: The client stores the token (usually in local storage or memory).
6. Subsequent Requests: On subsequent requests, the client includes the token in the Authorization header (e.g., Bearer <token>).
7. Server Verifies Token: The server verifies the token's signature and extracts user information.

Pros and Cons

Pros	Cons
Scales well in distributed systems	More complex to implement
Stateless (no server-side session storage)	Tokens can be stolen if not properly secured
Works well with APIs and mobile apps	Token revocation can be challenging

Where Do We Store the Token?

When using token-based authentication, the client needs to store the token somewhere in the browser. There are a few common options:

Cookies

• Pros: Automatically sent with every request, can be secured with HttpOnly and Secure flags.
• Cons: Vulnerable to CSRF attacks if not properly secured.

Local Storage

• Pros: Easy to use, persists across sessions.
• Cons: Vulnerable to XSS attacks, as any script on the page can access it.

Conclusion

Let's recap what we've learned about how authentication works in web applications:

• Web apps need a way to remember users after they log in.
• There are two main approaches: session-based and token-based authentication.
• Session-based Authentication: Uses server-side sessions and cookies to remember users. Simple but doesn't scale well.
• Token-based Authentication: Uses tokens (like JWT) that the client stores and sends with requests. More scalable and works well with APIs.
• Storage Options: Tokens can be stored in cookies or local storage, each with its own pros and cons.

What's Next?

In the next post, we'll explore how to implement token-based authentication in a web application using JWT, including code examples and best practices for securing your tokens. Stay tuned!