Database and sign-in
Lesson 15 of 26 in the course “Vibe coding”. Free, with animations and a quiz.
A table, but smarter
A database is organized storage for your app's data. It works like a spreadsheet. A row is one record, for example one user. A column is a field, one property of that record. In the figure the columns are id (the row's unique number), email and streak (days in a row). Example for this lesson: you're building a study tracker for your class, and every classmate gets their own row.
Why not in the browser
AI often starts by saving data in localStorage: a small storage inside the browser on one device. Fine for a draft. But you open the tracker on your phone and the streak from your laptop isn't there. Your friend can't see your streak either. Clear the browser and it's all gone. That's why shared data lives in the database, on the right of the figure. The frontend asks, the server checks and saves.
A ready-made backend
You don't have to build a server and database from scratch. There are ready-made backends: the server side already assembled for you. Supabase: a Postgres database (a popular open-source database), sign-in and file storage. Firebase: a similar set from Google. Cloudflare D1: a simple database for projects on Cloudflare. Many have a free plan; check the limits on the service's site.
Sign-in: don't build your own
Auth (authentication) is sign-up and sign-in: the way to know who's on the other side. The trap: you ask AI to “make a login” and get a homemade table of passwords. Storing passwords safely is hard, and a leak hits everyone. Use the provider's sign-in: Supabase or Firebase store passwords securely and offer email-link and Google sign-in. In the figure the login form is linked to the table: every row belongs to an account.
RLS: everyone sees their own
Access rules decide who can read and change which rows. In Supabase that's RLS (Row Level Security). Supabase's public key sits in the frontend, and that's by design. But without RLS anyone with that key can download the whole table: every classmate's email. With the rule “everyone sees only their own rows”, like on the padlock in the figure, other people's data is closed. The secret key that bypasses the rules lives only on the server.
Check yourself
- Why keep tracker data in a database, not in localStorage?
Correct answer: A database is shared across devices and users. localStorage lives in one browser on one device. A server database is reachable from any device and by anyone who's allowed. - What's the best way to add sign-in to your app?
Correct answer: Use a provider's ready sign-in, like Supabase. Storing passwords safely is hard. Providers do it for you and offer email and Google sign-in. - Supabase's public key is in the frontend and RLS is off. What happens?
Correct answer: Anyone can download the whole table. The public key is visible to everyone, that's normal. RLS rules are what protect the data. Without them the table is open to anyone.