Who Are You? Authentication
Learn how login systems work and keep your data secure.
Why Authentication Matters
Without authentication, anyone could see and modify your data. Authentication answers the question "Who are you?" — it verifies your identity so the app knows which habits, todos, and projects belong to you.
The Hotel Analogy
Authentication is like a hotel key card
When you check in (login), the front desk (Supabase Auth) verifies your identity and gives you a key card (JWT token). Every time you want to enter your room (access a page), you swipe the card (send the token). The hotel door (middleware) checks if the card is valid and for the right room.
Key Authentication Concepts
JWT (JSON Web Token)
A compact, signed token that contains your user ID and expiration time. The server can verify it without looking up a database — the signature proves it hasn't been tampered with.
Middleware
Code that runs before a page loads. In StudyTracker, the middleware reads your JWT cookie and redirects unauthenticated users to /login. It's the bouncer at the door.
OAuth
A protocol that lets you log in using an existing account (Google, GitHub). Instead of creating a new password, you delegate authentication to a trusted provider.
The Authentication Flow
Watch the step-by-step flow of what happens when you log in to StudyTracker — from entering your credentials to accessing protected pages:
Step 1 of 7
User opens /login
The user navigates to the login page. The (auth) route group renders a clean layout without the sidebar — just the login form.
Two Layers of Protection
StudyTracker uses two layers of auth verification: (1) Middleware checks your JWT before any page loads — if invalid, you're redirected to /login. (2) API routes independently verify the JWT before returning data — even if someone bypasses the middleware, the data stays protected.
localStorage — it's accessible to any JavaScript on the page. StudyTracker uses HTTP-only cookies for JWT storage, which JavaScript cannot read, protecting against XSS attacks.Test Your Knowledge
What is a JWT?