Authentication and Authorization in Frontend Systems

Frontend security is crucial because it is the first defense against malicious actors who might exploit vulnerabilities in a dynamic, interactive interface. Attackers leverage weak authentication methods to inject harmful scripts, steal tokens, or perform unauthorized actions, leading to data loss, financial harm, and irreparable damage to user trust. Thus, understanding and implementing robust authentication and authorization mechanisms is indispensable for any System Design.

In this lesson, we explore the twin pillars of security, authentication and authorization, and why they are indispensable in designing secure, user-friendly systems.

Authentication

Authentication (who you are?) is verifying a user’s identity. It’s the digital equivalent of showing our ID at the entrance of an exclusive club. The primary goal is to ensure that the person or entity attempting to access the system is indeed who they claim to be.

In the context of frontend System Design, authentication typically begins with a login form where users enter their credentials—commonly a username and password. But modern authentication is much more than a simple check against stored credentials; it involves sophisticated protocols, token management, and often multi-factor authentication (MFA) to enhance security.

How does authentication work?

When users input their credentials, the frontend application doesn’t merely validate the input; it initiates a secure dialogue with backend services. Let’s consider a typical login process in an online banking app:

• User input: The user enters their username and password into a secure login form.

• Data transmission: The frontend sends the credentials over an encrypted connection (HTTPS) to the backend authentication server.

• Credential verification: The server compares the provided credentials with those stored in a secure database.

• Token issuance: If the credentials match, the server issues a token—often a JSON web token (JWT)—that serves as proof of the user’s identity.

• Token storage: The frontend stores the token, typically in memory, cookies, or local storage, to include in future requests.

Authentication techniques

Authentication methods have evolved significantly to address modern security challenges. Here are some of the common types used in frontend systems:

• Basic authentication: This is one of the simplest forms, where the user’s credentials (username and password) are sent with each request, often encoded in Base64. While easy to implement, it lacks robustness because credentials are transmitted with every request, even over HTTPS. For instance, a client with the username “Bob” and password “pass123” will be embedded in the header as follows:

Note: The Authorization request header represents the username and password as User:pass123 encoded in the Base64 format. The Basic keyword before the encoded text signifies that this request header is for basic authentication.

Once entered, this username and password are sent to the server, which verifies the user. This process is illustrated below: