Authentication and Authorization in Modern Web Applications

Authentication verifies identity. Authorization determines access permissions. Both are security-critical and must be implemented correctly from the start. Retrofitting auth is expensive and risky.

Authentication methods: password-based (most common), social login (Google, GitHub via OAuth), magic links (passwordless email), passkeys (WebAuthn), and multi-factor authentication (MFA).

OAuth 2.0 and OpenID Connect: OAuth delegates authorization (access to resources). OIDC adds authentication (identity verification). Together they power 'Sign in with Google' and similar social login flows.

JWT (JSON Web Tokens): stateless tokens containing encoded user claims. Short-lived access tokens (15-60 minutes) with refresh token rotation provide security without constant database lookups.

Session-based authentication: server stores session data, client holds a session ID cookie. More secure (sessions can be revoked instantly) but requires session storage infrastructure (Redis).

Password security: hash with bcrypt or Argon2 (never MD5 or SHA). Enforce minimum length (12+ characters). Check against known breach databases (haveibeenpwned). Support password managers.

Auth libraries: NextAuth.js/Auth.js (Next.js), Clerk (hosted, full-featured), Supabase Auth (with Supabase), and Lucia (lightweight, framework-agnostic). Building auth from scratch is rarely justified.

Role-Based Access Control (RBAC): define roles (admin, editor, viewer), assign permissions to roles, and assign roles to users. Check permissions on both client (UI visibility) and server (API enforcement).

Middleware protection: verify authentication in middleware to protect routes before page rendering begins. Next.js middleware runs at the edge for fast, pre-render authentication checks.

Security practices: HTTPS everywhere, httpOnly cookies for tokens, CSRF protection, rate limiting on auth endpoints, account lockout after failed attempts, and security logging for audit trails.