Add Supabase auth and limit free usage to 3 grades

Create a Supabase project

Set up your database and authentication provider.

• Log in to supabase.com.
• Click New Project.
• Name the project "copy-grader".
• Choose a database password — save it in your notes or a password manager.
• Choose the region closest to where your users will be (usually United States East or Europe West).
• Click Create New Project.
• Wait about 2 minutes for the project to finish provisioning.
• Once ready, go to Settings (gear icon in the left sidebar) → API.
• You will see two values you need: Project URL and anon/public key.
• Copy both values into your notes — you will add them to your .env.local file in a moment.
• Also copy the service_role key (further down the same page) — keep this one private, it bypasses all security checks.

Create the usage tracking table in Supabase

Add a database table to track how many grades each user has used.

• In your Supabase dashboard, click Table Editor in the left sidebar.
• Click Create a new table.
• Name the table: usage
• Turn off "Enable Row Level Security (RLS)" for now — you will add proper security later.
• Add these columns one by one by clicking the + Add Column button:
• — id: type uuid, default value gen_random_uuid(), primary key (check the box)
• — user_id: type text, NOT NULL (uncheck "Is Nullable")
• — grades_used: type int4, default value 0, NOT NULL
• — is_pro: type bool, default value false, NOT NULL
• — created_at: type timestamptz, default value now(), NOT NULL
• — updated_at: type timestamptz, default value now(), NOT NULL
• Click Save.
• The table now appears in the Table Editor. This is where you will store each user's usage count and subscription status.

Enable Google OAuth in Supabase

Set up Google sign-in as your authentication method — the simplest option for non-developers.

• In Supabase, click Authentication in the left sidebar.
• Click Providers.
• Find Google in the list and click the toggle to enable it.
• You will see fields for Client ID and Client Secret. Leave these open — you will fill them in after getting the values from Google.
• Open a new tab and go to: console.cloud.google.com
• Click the project selector at the top → New Project → name it "copy-grader" → click Create.
• With the new project selected, click the hamburger menu → APIs and Services → OAuth consent screen.
• Choose External user type → Create → fill in App name "Copy Grader" and your email → Save and Continue through all steps.
• Now go to APIs and Services → Credentials → Create Credentials → OAuth client ID.
• Application type: Web application. Name: "Copy Grader".
• Under Authorized redirect URIs, click Add URI and paste your Supabase callback URL. Find this URL in Supabase → Authentication → Providers → Google — it looks like: https://[your-project-id].supabase.co/auth/v1/callback
• Click Create. Copy the Client ID and Client Secret.
• Paste them into the Supabase Google provider fields and click Save.

Install Supabase and wire up auth with Claude Code

Add Supabase packages and build the sign-in flow with Claude Code.

• First, add your Supabase keys to .env.local. Open the file and add three new lines:
• NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
• NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ... (your anon key)
• SUPABASE_SERVICE_ROLE_KEY=eyJ... (your service_role key)
• Save .env.local and stop the dev server (Ctrl + C).
• Run: npm install @supabase/supabase-js @supabase/ssr
• Restart the dev server: npm run dev
• Open Claude Code and paste: "Install and set up Supabase auth in this Next.js app: (1) Create lib/supabase.ts with a browser client using createBrowserClient from @supabase/ssr. (2) Create lib/supabase-server.ts with a server client using createServerClient from @supabase/ssr that reads cookies from Next.js headers. (3) Create app/auth/callback/route.ts that handles the OAuth callback by exchanging the code for a session and redirecting to /. (4) Create app/sign-in/page.tsx with a centered page containing a 'Continue with Google' button that calls supabase.auth.signInWithOAuth({ provider: 'google', options: { redirectTo: [YOUR VERCEL URL]/auth/callback } }). (5) Update app/page.tsx to: check the current session using the server client, redirect to /sign-in if no session exists, and show the user's email in the top-right corner with a Sign Out button that calls supabase.auth.signOut(). Replace [YOUR VERCEL URL] with your actual Vercel URL."
• Test by visiting localhost:3000 while not signed in — you should be redirected to /sign-in.
• Click "Continue with Google" and complete the sign-in. You should be redirected back to the grading form.

Add the 3-grade free limit

Enforce the usage limit in the API route and show the remaining count on the front end.

• Open Claude Code and paste: "Update the /api/grade API route to enforce a 3-grade free limit: (1) Get the authenticated user from the Supabase server client using cookies. (2) If no user is authenticated, return 401 with JSON { error: 'Please sign in to grade your copy' }. (3) Look up the user's row in the usage table using the service_role key client. If no row exists, insert one with user_id, grades_used: 0, is_pro: false. (4) If grades_used >= 3 AND is_pro is false, return 402 with JSON { error: 'Free limit reached', gradesUsed: 3, isPro: false }. (5) If under limit or is_pro is true, run the Claude grading as before. (6) After a successful grade, increment grades_used by 1 in the usage table using an update query. (7) Return the grade result plus { gradesUsed: updatedCount, isPro: false } in the response JSON."
• Then paste a second prompt: "Update app/page.tsx to: (1) After sign-in, fetch the user's usage count from /api/usage (create this GET route that returns { gradesUsed, isPro }). (2) Display remaining free grades below the submit button: 'X of 3 free grades used' in small grey text. (3) When the API returns 402, instead of showing an error, show an upgrade prompt card with text 'You have used all 3 free grades' and a button 'Upgrade to Pro — $15/month' (leave the href as # for now — you will wire up Stripe on Day 5)."
• Test the limit: sign in, grade three pages, then try a fourth.
• After the third grade, the next submission should show the upgrade prompt instead of results.

Add Supabase keys to Vercel and deploy

Get the auth and usage limit working on your live URL.

• Go to Vercel → your project → Settings → Environment Variables.
• Add NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY, and SUPABASE_SERVICE_ROLE_KEY.
• Set all three for Production, Preview, and Development.
• In Supabase, go to Authentication → URL Configuration.
• Add your Vercel URL to the Redirect URLs list: https://your-project.vercel.app/auth/callback
• Commit all changes: "Day 4: Supabase auth and 3-grade limit". Push.
• Wait for Vercel to deploy, then test the full flow on the live URL:
• — Visit your Vercel URL while signed out → should redirect to /sign-in
• — Sign in with Google → should return to grading form
• — Grade 3 pages → count shows "3 of 3 free grades used"
• — Try a 4th grade → upgrade card appears