Add accounts with Supabase

Let’s do this

1. 1
   In Supabase

   Create a free Supabase project

   Sign in, create an organisation on Free if needed, then create a project such as little-garden-test. Choose a nearby region, set a strong database password and save it in your password manager. Wait for the project to be ready. The free plan has project and usage limits, and quiet projects can pause.

   Supabase: plans and free limits (opens a new tab)
2. 2
   In Supabase and your local editor

   Give the browser only the public settings

   Find the project URL and publishable key in the Connect or API settings. Ask the AI to configure local VITE_SUPABASE_URL and VITE_SUPABASE_PUBLISHABLE_KEY values in an ignored .env.local file. These specific values are intended for the browser. Never use a secret key, service_role key or database password there.

   Supabase: public and secret keys (opens a new tab)
3. 3
   In your AI helper

   Create a table and enforce who owns each row

   Ask the AI for reviewed SQL for plants with id, user_id, name and a watering field. Enable row level security and separate rules for reading, creating, editing and deleting only rows owned by the signed-in user. Have it apply the SQL through the Supabase SQL Editor. A hidden button does not protect a database.

   Supabase: row level security (opens a new tab)
4. 4
   In your AI helper

   Add the account screens

   Use the official React Auth guide. Ask for sign-up, sign-in, sign-out and password reset, then connect the plant list to the signed-in account. Include clear waiting and error messages. Start with sample records and an email you control.

   Supabase: React and login quickstart (opens a new tab)
5. 5
   In Supabase

   Set the return addresses and test email delivery

   In Authentication, URL Configuration, set the site URL and add your exact local and live callback URLs to the allowed redirects. During private tests, the built-in email service has tight limits and only sends to authorised team addresses. For real users, configure a suitable custom SMTP email provider before launch. Check that provider’s costs and limits.

   Supabase: sending login emails (opens a new tab)
6. 6
   In Cloudflare

   Configure Cloudflare and publish

   Add the same public VITE_ settings to the appropriate Pages build environment, then rebuild and deploy. Vite puts VITE_ values into downloadable browser code, so they cannot hold secrets. Give preview builds a test project; use the live project only for production. Create and apply the reviewed schema and access rules in each project you use.

   Vite: public environment variables (opens a new tab)
7. 7
   In your browser

   Check the account from another session

   Sign up, confirm email if required, add a sample plant, sign out, then sign back in from a private window. The plant should still be there. Continue to the next lesson to test two different users before inviting anyone else.