Web Security & Identity Architecture

Authentication Basics

Master the complete web identity lifecycle: Authentication vs Authorization, slow password hashing (Argon2id/bcrypt), secure session cookies, MFA, Passkeys, and route protection.

15 Comprehensive Chapters Interactive Lifecycle Simulator 8 Assessment Questions OWASP Security Guidelines
INTRO

The Foundation of Web Trust

Every web platform that handles user data, private dashboards, or transactions requires a reliable mechanism to identify users and safeguard their sessions.

Modern web authentication combines cryptographic hashing, stateless transport layers, secure cookie flags, and authorization policies to protect users against unauthorized access, data theft, and impersonation.

01 & 02

Authentication (AuthN) vs. Authorization (AuthZ)

Authentication (AuthN)

“Who are you?”

The process of verifying the identity of a user or system attempting to access the platform (e.g. email + password, passkey, or OAuth token).

Outcome: Validated User Identity (Logged In)
Authorization (AuthZ)

“What are you permitted to do?”

The process of checking whether an authenticated user has the necessary permissions/roles to perform an action or view a resource.

Outcome: Role-Based Access Control (Admin / Member)
03 & 04

Password Hashing vs. Reversible Encryption

Critical Rule: Never Store Plaintext or Reversibly Encrypted Passwords

Reversible encryption requires a secret key. If the key or server is compromised, all user passwords are exposed. Passwords must ALWAYS be stored using one-way slow cryptographic password-hashing algorithms with unique random salts.

OWASP Recommended Algorithms:

AlgorithmTypeOWASP StatusWhy It Is Preferred
Argon2idMemory-hard slow hashTop RecommendedResistant to GPU, ASIC, and side-channel cache attacks. Winner of Password Hashing Competition.
bcryptAdaptive work-factor hashRecommendedBattle-tested over 25+ years. Configurable computational work factor.
PBKDF2Key derivation functionAcceptableFIPS compliant. Requires high iteration count (600,000+).
MD5 / SHA-256General-purpose fast hashBANNED for passwordsToo fast. GPUs can compute billions of SHA-256 hashes per second to brute force passwords.
05

Sessions and Secure Cookie Flags

Because HTTP is a stateless protocol, the server issues a session token upon successful login. For browser applications, storing this token in an HTTP Cookie with strict security flags is the industry standard:

Set-Cookie HTTP Header
Set-Cookie: session_id=s_9f82kd01a89c; Path=/; HttpOnly; Secure; SameSite=Lax; Max-Age=604800;
XSS Defense

HttpOnly

Blocks client-side JavaScript (like document.cookie) from reading the session token. Stops cross-site scripting session theft.

Transport Protection

Secure

Ensures the browser only transmits the cookie over encrypted HTTPS connections, preventing plaintext network eavesdropping.

CSRF Defense

SameSite=Lax

Prevents the cookie from being sent along with third-party cross-site requests, neutralizing CSRF exploits.

06

Modern Authentication Methods

Standard

Password + Salted Hash

Knowledge factor. User enters password; server verifies against Argon2id/bcrypt hash.

Multi-Factor

MFA / 2FA (TOTP)

Combines knowledge factor with possession factor (6-digit authenticator app token via RFC 6238).

Federated

Social Login (OAuth 2.0 / OIDC)

Delegates identity verification to trusted providers (Google, GitHub, Apple) via signed ID tokens.

Next-Gen

Passkeys (FIDO2 / WebAuthn)

Phishing-resistant asymmetric public-key cryptography unlocked via device biometrics (Touch ID, Face ID).

07-11

Route Protection & Security Essentials

In modern frameworks like Next.js, authentication checks are executed server-side via Edge Middleware before protected route rendering:

middleware.ts (Protected Route Guard)
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(req: NextRequest) {
  const sessionToken = req.cookies.get('session_token')?.value;

  if (!sessionToken && req.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', req.url));
  }
  return NextResponse.next();
}

export const config = {
  matcher: ['/dashboard/:path*', '/settings/:path*'],
};
12-15

Authentication Best Practices & Checklist

Production Security Checklist
  • Always enforce HTTPS on all routes.
  • Hash passwords with Argon2id or bcrypt with unique per-user salt.
  • Store session tokens in HttpOnly; Secure; SameSite=Lax cookies.
  • Apply Rate Limiting to login, register, and password-reset endpoints.
  • Use cryptographically random, short-lived (15 min) single-use tokens for password resets.
  • Support Multi-Factor Authentication (TOTP / WebAuthn Passkeys).

🔥 Live Interactive — Authentication Flow Simulator

Inspect the end-to-end authentication lifecycle across Browser, Server, Database, and Session layers.

Lifecycle Simulator
Browser Server Database

1. User Registration & Password Hashing

The browser submits credentials over TLS. The server salts and hashes the password using Argon2id or bcrypt before saving to the database.

Code Execution & Payload:
// Server-Side Password Hashing
const salt = crypto.randomBytes(16);
const passwordHash = await argon2.hash(password, {
  type: argon2.argon2id,
  memoryCost: 65536, // 64 MB
  timeCost: 3
});
await db.users.create({ email, passwordHash });
Security Guarantees & Controls:
Passwords are NEVER saved as plain text or reversible encryption
High-entropy salt generated per user to prevent Rainbow Table lookups
Enforce strong password length and complexity validation
Mini Challenges: Test Your Security Instincts

Answer these real-world architectural scenarios to reinforce your understanding.

Challenge 1: AuthN vs. AuthZ
A middleware check rejects a user attempting to delete a database table because their role is "Viewer". Is this Authentication or Authorization?
Challenge 2: Spot Insecure Storage
A company stores passwords in MySQL using SHA-256(password). Is this secure?
Challenge 3: Cookie Security Flags
Which cookie setting prevents document.cookie theft if an XSS vulnerability exists on your site?
Challenge 4: Phishing Resistance
An attacker creates a fake login page at paypa1.com. Which credential is immune to this phishing attack?
Knowledge AssessmentQuestion 1 of 8

What is the fundamental difference between Authentication and Authorization?