Agent Code Academy
Home/Phase 2: Building
Week 6 of 12

Authentication & Dashboards

Real apps need real security

Objective

Add user authentication and build a professional dashboard.

Deliverable

A secure, authenticated dashboard with data visualization.

Topics

  • Authentication concepts: login, sessions, tokens
  • Supabase Auth integration
  • Protected routes and middleware
  • Dashboard design principles
  • Data visualization with charts
  • Responsive design (mobile + desktop)
  • The /code-review workflow

Activities

  • Add Supabase Auth to your task manager
  • Create login and signup pages
  • Protect dashboard routes from unauthorized access
  • Build a dashboard showing task statistics
  • Add charts visualizing your productivity
  • Make the dashboard responsive
  • Run /code-review on your codebase

Skills You'll Gain

Authentication, dashboards, error handling, /code-review, responsive design

Learning Objectives

By the end of this week, you will be able to:

  1. Explain authentication vs authorization and why both matter
  2. Implement user login and signup using Supabase Auth
  3. Protect routes so only logged-in users can access them
  4. Design and build a dashboard that displays meaningful data
  5. Use /code-review to improve code quality

Lesson

Authentication vs Authorization

These two words sound similar but mean different things:

  • Authentication = "Who are you?" — Proving your identity. Like showing your ID at the door. The login screen is authentication.
  • Authorization = "What can you do?" — Checking what you are allowed to access. Like having a VIP wristband at a concert — you proved who you are (authentication), now the wristband determines which areas you can enter (authorization).

Why does this matter? Without authentication, anyone can see everyone's tasks. Without authorization, a logged-in user could delete someone else's data.

How Login Works Under the Hood

When you log in to a website, here is what happens behind the scenes:

1. You type your email and password
2. The browser sends them to the server
3. The server checks: "Does this email exist? Does the password match?"
4. If yes, the server creates a SESSION TOKEN — a long random string
5. The server sends the token back to the browser
6. The browser stores the token (usually in a cookie)
7. Every future request includes this token
8. The server checks the token: "Is this valid? Who does it belong to?"

A session token is like a wristband at a concert. You show your ID once at the entrance (login), get a wristband (token), and then just flash the wristband to enter different areas (make requests) without showing your ID again.

Why Security Matters

Without authentication:

  • Anyone can see all users' private tasks
  • Anyone can delete any task
  • There is no way to know who created what
  • Your app cannot be used by multiple people

Supabase Auth: Adding Login to Your App

Supabase includes a complete authentication system. Ask Claude Code:

Add Supabase Auth to my task manager. I need:
- A signup page with email and password
- A login page with email and password
- A logout button on the main page
- Only logged-in users should see the task list
- Each user should only see their own tasks

Supabase Auth handles:

  • Storing passwords securely (hashed, never plain text)
  • Creating session tokens
  • Verifying tokens on every request
  • Password reset emails

Protected Routes: The Security Guard

A protected route is a page that only logged-in users can see. If someone who is not logged in tries to visit /dashboard, they get redirected to /login.

In Next.js, you implement this with middleware — code that runs before a page loads, checking if the user has a valid session:

User visits /dashboard
    → Middleware checks: "Do they have a valid session token?"
        → Yes: Show the dashboard
        → No: Redirect to /login

Ask Claude Code to create this middleware for you. You do not need to write it from scratch.

Updating Row Level Security

Now that you have authentication, update your database security so each user can only see their own tasks:

-- First, add a user_id column to tasks
ALTER TABLE tasks ADD COLUMN user_id UUID REFERENCES auth.users(id);

-- Drop the old "allow all" policy
DROP POLICY "Allow all operations" ON tasks;

-- Create proper policies
CREATE POLICY "Users can view own tasks" ON tasks
  FOR SELECT USING (auth.uid() = user_id);

CREATE POLICY "Users can create own tasks" ON tasks
  FOR INSERT WITH CHECK (auth.uid() = user_id);

CREATE POLICY "Users can update own tasks" ON tasks
  FOR UPDATE USING (auth.uid() = user_id);

CREATE POLICY "Users can delete own tasks" ON tasks
  FOR DELETE USING (auth.uid() = user_id);

auth.uid() is a Supabase function that returns the ID of the currently logged-in user. These policies mean: "You can only see, create, update, and delete tasks where user_id matches your own ID."

Dashboard Design Principles

A dashboard is a single page that shows the most important information at a glance. Good dashboards follow these principles:

  1. Hierarchy — The most important information is biggest and most prominent
  2. Clarity — Every number has a label; every chart has a title
  3. Actionable — Data should lead to action ("You have 5 overdue tasks" → click to see them)
  4. No clutter — Show only what matters; hide everything else

For your task manager dashboard, consider showing:

  • Total tasks, completed tasks, pending tasks (stat cards)
  • Tasks completed per day/week (line chart)
  • Tasks by priority (pie or bar chart)
  • Overdue tasks (highlighted list)

Responsive Design: One App, Every Screen

Responsive design means your app looks good on both a large desktop monitor and a small phone screen. The layout adjusts automatically based on screen size.

With Tailwind CSS, you use prefixes like md: and lg: to apply styles at different screen sizes:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  <!-- 1 column on phone, 2 on tablet, 4 on desktop -->
</div>

Ask Claude Code: "Make my dashboard responsive so it looks good on mobile and desktop."

The /code-review Workflow

Now that your project is getting larger, use Claude Code's built-in code review:

/code-review

Claude will analyze your codebase and provide feedback on:

  • Code quality and readability
  • Potential bugs or security issues
  • Naming conventions
  • Performance concerns
  • Suggestions for improvement

Make it a habit to run /code-review after each major feature.

Practice Exercises

Exercise 1 (Guided): Add Login and Signup

  1. Open your task manager project in Claude Code
  2. Use Plan mode and ask: "Add Supabase Auth with login and signup pages"
  3. Review Claude's plan — it should include creating auth pages, setting up middleware, and updating the database
  4. Approve and let Claude implement
  5. Test: Create an account, log out, log back in

Verification: You can create an account, log out, and log back in. When logged out, visiting the main page redirects to login.

Exercise 2 (Independent): Build the Dashboard

Goal: Create a /dashboard page that shows:

  • Three stat cards (Total Tasks, Completed, Pending)
  • At least one chart (tasks completed over time, or tasks by priority)
  • A responsive layout that works on mobile

Hints:

  • Ask Claude to recommend a charting library (Recharts works well with Next.js)
  • Start with the stat cards, then add charts
  • Test on mobile by resizing your browser window

Verification: The dashboard shows accurate statistics. Resizing the browser below 768px wide rearranges the layout to a single column.

Exercise 3 (Challenge): Complete Code Review

Run /code-review on your entire project. For each issue Claude identifies:

  1. Understand why it is an issue
  2. Decide if you agree with the suggestion
  3. Fix at least 3 issues
  4. Commit the fixes with descriptive messages

Document what you learned in a notes/week6-review.md file.

Self-Assessment Quiz

1. What is the difference between authentication and authorization?

2. What is a session token, and what analogy describes how it works?

3. What does a "protected route" do?

4. Name two principles of good dashboard design.

Answers:

  1. Authentication is proving who you are (like showing your ID). Authorization is determining what you are allowed to do (like having a VIP wristband). Authentication happens first — you must prove your identity before the system can check your permissions.

  2. A session token is a long random string that the server creates after you log in successfully. It works like a wristband at a concert — you show your ID once at the entrance (login), get a wristband (token), and then flash the wristband for access to areas without showing your ID again.

  3. A protected route is a page that only logged-in users can access. If someone without a valid session tries to visit it, they are automatically redirected to the login page.

  4. Any two of: (1) Hierarchy — most important info is biggest, (2) Clarity — every number has a label, (3) Actionable — data should lead to action, (4) No clutter — show only what matters.

Authentication & Dashboard Updates (Feb 2026)

  • PDF page-range reading: The Read tool now accepts a pages parameter for PDFs (e.g., pages: "1-5"). Large PDFs (>10 pages) return a lightweight reference when @ mentioned instead of being inlined into context (v2.1.30)
  • Task management in VS Code: Native plugin management support added, plus OAuth users can browse and resume remote Claude sessions from the Sessions dialog (v2.1.16)

Exercise:

  • Use @ to reference a large PDF in a Claude Code session and observe how it handles pagination
  • Try resuming a remote session from VS Code's Sessions dialog