Skip to content

Authentication: How It Works & Supabase Auth

What are we trying to accomplish?

The goal of these two lectures, How Authentication Works and Supabase Authentication, is to equip students with the knowledge and practical skills necessary to give a Full-Stack Application a real concept of user identity, using Claude Code to implement the work end to end. Students will first learn what authentication and authorization are, why they must be kept distinct (and how they map to 401 and 403 responses), and how the major approaches compare: Basic, Session-based, Token-based (JWT), and the Session + Token hybrid. They will learn why the hybrid, with short-lived access tokens and revocable refresh tokens, is what Supabase Auth uses and why it suits a React + Vite single-page application. They will then restructure their Supabase database by backing up existing data, recreating their tables so public.users mirrors auth.users through a database trigger, and writing Row-Level Security (RLS) policies that use auth.uid() so users can only access the tasks they own. Finally, they will map out the front-end authentication workflows (register, log in, log out, and user confirmation on browser refresh) and hand Claude Code precise, phased prompts for the Supabase and Vite + React sides of the project, verifying each phase with the Playwright MCP server. By the end of these lectures, students should be capable of independently planning, directing, and validating an authentication system so that their applications know who their users are and protect each user's data at the database level.

Lectures and Assignments

Lectures

Assignments

TLO's (Terminal Learning Objectives)

  • Explain the difference between authentication and authorization and how common authentication approaches work
  • Describe how Supabase Auth uses a Session + Token hybrid with JWTs and refresh tokens
  • Structure a Supabase database with an auth-linked users table and Row-Level Security policies that restrict data to its owner
  • Direct Claude Code to implement and verify register, log in, log out, and session persistence in a React + Vite application

ELO's (Enabling Learning Objectives)

  • Define authentication and authorization and give an example of each in a task manager
  • Distinguish 401 Unauthorized (unauthenticated) from 403 Forbidden (unauthorized)
  • Compare Basic, Session-based, Token-based, and Session + Token authentication, including their pros and cons
  • Identify the three parts of a JWT (header, payload, signature) and explain why sensitive data does not belong in the payload
  • Explain the roles of the access token and the refresh token, and how silent token refresh works
  • Choose an appropriate authentication type for a given application
  • Describe how auth.users, the public users table, a database trigger, and the tasks foreign key (user_id) work together
  • Explain how PostgREST exposes the user's identity to PostgreSQL through auth.uid()
  • Write an RLS policy that limits a user to viewing only their own tasks
  • Back up Supabase tables by exporting them to CSV before dropping or restructuring them
  • List the front-end authentication workflows: register, log in, log out, and user confirmation after a browser refresh
  • Write a phased Claude Code prompt that supplies context (user journey, schema, backups) and uses Playwright to verify each phase before moving on