Today I spent a significant portion of my day architecting the session management layer and multi-factor authentication (MFA) flow for my new Complete Advanced Auth Application.

Here is a quick overview of the goals and technical standards I've implemented:

1. The Multi-Layered Authentication Flow

To make this app enterprise-grade, I'm combining traditional password-based authentication with a secure, secondary two-factor system.

• Layer 1: Secure Credentials with Argon2id password hashing.
• Layer 2: Device-level OTP (One-Time Password) generation utilizing TOTP algorithms (compatible with Google Authenticator).
• Layer 3: Real-time token blacklisting inside Redis for compromised sessions or immediate logout enforcement.

2. Session Hashing & Store Implementation

Instead of simple stateless JWTs (which are difficult to revoke in real-time), I'm utilizing a database-backed hybrid session strategy. JWTs are stored in secure HTTP-only cookies, but their unique IDs are checked against a super-fast Redis blacklist cache on every request.

Here's the core Redis session invalidation routine I developed:

import Redis from "ioredis";

const redis = new Redis(process.env.REDIS_URL || "redis://localhost:6379");

export async function revokeSession(userId: string, sessionId: string): Promise<void> {
  const sessionKey = `user:${userId}:session:${sessionId}`;
  
  // 1. Check if the session exists in our store
  const exists = await redis.exists(sessionKey);
  if (!exists) {
    throw new Error("Session not found or already revoked");
  }

  // 2. Perform a multi-transaction delete and add to blacklist
  const multi = redis.multi();
  multi.del(sessionKey);
  multi.sadd(`blacklist:sessions`, sessionId);
  multi.expire(`blacklist:sessions:${sessionId}`, 86400); // 24 hours expiry
  
  await multi.exec();
  
  console.log(`[AUTH] Session ${sessionId} for User ${userId} successfully revoked.`);
}

Next Steps

Tomorrow I'll be implementing Rate Limiting on the login endpoints using a Redis token bucket algorithm, followed by standard OAuth integration for Google and GitHub accounts.

Here’s a consolidated summary of the major things you’ve worked on throughout this Auth/Backend + Engineering project journey so far:

---

🚀 Project & Engineering Work Summary

🔐 Authentication & Backend System Development

You’ve been progressively building a full authentication + backend engineering system from scratch.

Completed / Explored Areas

• React frontend authentication flow
• Context API–based auth handling
• Transitioning auth/data handling into Redux Toolkit
• Login form architecture
• API integration flow
• JWT/session-based auth concepts
• SQL database integration
• Sample realistic database seeding
• Relational database schema understanding
• JOIN query analysis and optimization
• Team/task relational data modeling

---

🗄️ SQL & Database Engineering

Topics You Worked On

SQL Querying

You explored:

• SELECT
• JOIN
• Aliasing
• Relationship mapping
• Task-user assignment systems

Example area:

SELECT
    tasks.title,
    tasks.status,
    users.name AS assigned

You also worked on:

• Understanding why JOINs are used
• Data normalization mindset
• Realistic enterprise database structures

---

🧠 System Design & Scalable Thinking

You explored:

• Large-scale distinct counting problems
• Handling massive datasets (10TB clickstream example)
• Scalable backend engineering thinking
• Distributed-system style interview problems

You’ve started training yourself toward:

• FAANG-level backend/system design reasoning
• Optimization-first engineering

---

🔒 RBAC (Role-Based Access Control)

You recently moved into:

PHASE 12 — RBAC

This is a major backend architecture milestone.

You’re now entering:

• Permission systems
• Roles vs permissions modeling
• Middleware authorization
• Access policies
• Admin/user hierarchy
• Protected route architecture

This is where your project starts becoming “real production architecture”.

---

⚛️ Frontend Engineering Progress

React + Tailwind Work

You worked on:

• Form state handling
• Mobile responsiveness
• JSX improvements
• Component structure refinement
• API-connected UI states
• Empty page debugging
• Rendering/debugging issues

You also focused on:

• Better frontend engineering practices
• Cleaner component architecture

---

🧩 Redux Toolkit Migration

You started transitioning: From:

• Context-based state management

To:

• Redux Toolkit architecture

Including:

• Form data handling
• File upload management
• Centralized state patterns

That’s a strong production-grade direction.

---

🧪 Realistic Engineering Workflow

You followed a phased roadmap structure:

• Day/task-based execution
• Incremental backend progression
• Debugging-first learning
• Practical implementation over theory

Even after breaks, you resumed execution systematically.

---

🏗️ Advanced Project Concepts Explored

Industrial Measurement / 3D Billet Profiling

You also explored:

• Real-time industrial profiling systems
• 3D reconstruction limitations
• PRD constraint analysis
• Engineering positioning strategy
• Avoiding false precision claims

That’s very product-engineering oriented thinking.

---

🎥 Content & Education Layer

Alongside engineering, you also worked on:

• DSA educational content
• Technical explanation structuring
• Student-focused content creation
• YouTube-style explanation techniques
• High-engagement teaching patterns

---

📈 Your Current Engineering Trajectory

You’re gradually moving from:

Earlier Stage

• Basic frontend coding
• UI-only development

Into:

Advanced Stage

• Full-stack architecture
• Auth systems
• RBAC
• Scalable backend thinking
• System design
• Production engineering concepts

---

🔥 Biggest Shift in Your Learning

The strongest evolution in your work is this:

Before

“Build features”

Now

“Build systems correctly”

That shift is massive.

You’re starting to think in:

• architecture,
• scalability,
• permissions,
• database relations,
• production constraints,
• engineering tradeoffs.

That’s the exact transition from junior coding mindset → real software engineering mindset.

To better share my day-to-day coding journey, I've designed and built a brand new Recent Activity Journal / Developer Log page for this portfolio.

The Architectural Design Goals

1. Perfect Design Harmony: The timeline uses standard glassmorphism tokens, border highlights, and visual styles matching the main portfolio section and the tech blog.
2. Instant Client-Side Filtering: Instead of slow page reloads, a debounced search bar and selection pills make filtering by Project/Category feel instant.
3. Pure Server Component Compilation: The entire MDX rendering is compiled on the server side using React Server Components (next-mdx-remote/rsc), keeping client bundle size tiny and improving SEO performance.
4. Fluid Entry Animations: Using framer-motion, each timeline card and glowing node slides up elegantly as it enters the viewport.

Here is a look at the responsive CSS timeline structure I designed:

<!-- Responsive Split Layout Column Structure -->
<div className="flex flex-col md:flex-row gap-6 md:gap-10 items-stretch">
  <!-- Desktop split date column -->
  <div className="hidden md:flex md:w-36 flex-shrink-0 text-right flex-col pt-8">
    <span className="text-sm font-mono text-white/40">May 17, 2026</span>
  </div>
  
  <!-- Central track line & double-border glowing node dot -->
  <div className="flex flex-col items-center relative w-8 flex-shrink-0">
    <div className="absolute top-0 bottom-0 w-[2px] bg-white/10"></div>
    <div className="absolute top-8 w-4 h-4 rounded-full bg-gray-900 border border-emerald-300"></div>
  </div>
  
  <!-- Right dynamic glassmorphic card container -->
  <div className="flex-grow pb-12">
    <!-- MDX and card contents go here -->
  </div>
</div>

By keeping files modularized inside src/components/activity/, the page remains extremely easy to scale and maintain. I'm very happy with how it turned out!