Tutorials / Intermediate

Add User Accounts to Your App (Logins Without the Danger)

The gateway to real web apps: signup, login, password reset, and — the part that actually matters — making sure users can only ever see their own data.

DifficultyIntermediate

TimeHalf a day

You'll needClaude · Free Supabase account · An app worth logging into (the habit tracker works perfectly)

You'll buildA working accounts system on one of your apps: email signup/login, sessions that survive refresh, password reset — and per-user data isolation enforced by the database, not by hope.

Every app idea eventually hits the sentence 'and then users log in' — and that sentence used to be where amateurs should stop, because hand-rolled login systems are how passwords leak. The modern answer: never build auth, rent it. Supabase Auth (and peers like it) handle the cryptography, sessions, and reset emails; your job shrinks to wiring it up and writing the data rules. That second part is where this tutorial earns its place, because it's the part everyone botches.

Step 0 — Do you actually need accounts?

Accounts add real friction (signup walls kill casual use) and real responsibility (you now hold credentials and personal data). Skip them when: it's a personal tool (localStorage), data is shared-public (the guestbook pattern), or a simple shared link would do. Need them when: users have private data, multiple devices must sync, or you'll ever charge subscriptions. Be sure — this is the biggest complexity step a project takes.

Step 1 — Turn on auth, build the doors

Add Supabase Auth to my app (file below; supabase-js already loaded; project URL and anon key: [paste]). Build: signup and login forms (email + password) with clear validation messages; a logged-out state showing only the login screen; logged-in state showing the app with the user's email and a logout button in the header; session persistence so refresh keeps me logged in; a 'forgot password' flow using Supabase's reset email. Tell me exactly which settings to configure in the Supabase dashboard (email confirmation on/off, redirect URLs, the email template to check). Complete file. [paste app]

Create two test accounts in two browsers. Log in, refresh, log out, reset a password. The doors work — but right now both accounts still see the same data, which brings us to the entire point.

Step 2 — The user_id column and RLS: the real lesson

Multi-user data isolation is two moves: every table gets a user_id column recording who owns each row, and Row Level Security policies enforce 'users touch only rows where user_id = their own id.' Crucially, this lives in the DATABASE — JavaScript that merely hides other people's data is theater, because the browser belongs to the user.

Convert my app's data to per-user: add user_id (referencing auth.users, default auth.uid()) to my [habits and checkins] tables — give me the SQL. Then write RLS policies so authenticated users can select/insert/update/delete ONLY their own rows, with no access for anonymous users. Explain each policy in one sentence. Then update my app code to work with this (inserts should pick up user_id automatically).

Worth knowingThe test that matters more than any feature: with both browsers logged into different accounts, add data in one and confirm the other sees none of it. Then in the console, try selecting all rows from account A while logged in as B and watch Supabase return only B's. Until you've SEEN isolation hold, you don't have it.

Step 3 — The civilized extras

Each one ask: 'Sign in with Google' (Supabase supports OAuth providers — Claude walks the dashboard config); a profile page (display name, delete-my-account button — which you're ethically obliged to make work); loading states so the app doesn't flash logged-out on refresh; redirect-after-login. Magic links (passwordless email login) are worth considering for low-stakes apps — less friction, no passwords to forget.

Step 4 — Run the security pass

Auth is exactly the 'new power' moment our AI-code-safety guide flags: run its review prompt now, in a fresh chat, with special attention to missing-authorization findings. Ten minutes, every time, forever.

What just unlocked

Accounts + per-user data is the load-bearing wall of every serious app category: CRMs, client portals, booking systems, SaaS products — all of them are 'auth + tables + RLS + screens.' You've now built the wall once on a small app, which is precisely why the bigger tutorials on this site can move fast: they all stand on this one.

Keep going

Need somewhere to put it live? See where to host AI-built sites. Compare tool costs on the pricing tracker (or stick to the free options), then pick your next build.