Supabase initial set up following documentation

[kimannle]

closes #34.

Problem

We need a database that supports user authentication/management, GraphQL integration, and structured data storage based on the needs of our mood tracker app.

Users aren't expected to make frequent real time changes so a service like Redis would not be required for our needs because we don't need to support caching frequently accessed data to significantly reduce the load to our database.

Developer design decisions

🧠 Why two clients and what's up with the cookies?

• We need to ensure that the logged in user is who they say they are, and we don't want to serve data that belongs to the wrong user which is where cookies/auth tokens are useful.
• The auth session is stored in localStorage or cookies, and only the browser has access to that.
• When Supabase's auth methods are used, such as supabase.auth.signInWithPassword() or supabase.auth.getSession() from the frontend, Supabase pulls the session token from localStorage/cookies in the browser.
• The server-side Supabase client (e.g. used in route.ts, server actions, or middleware) must receive that token explicitly (e.g. from cookies or headers) to impersonate a logged-in user.

Here's a useful read about server side rendering and Supabase auth.

Supabase Client Usage Guide

You want to...	Use
Authenticate (log in/out)	supabase-browser.ts client
Access user session in layout/server	supabase-server.ts client
Write data securely server-side	supabase-server.ts client

Solution

Supabase features:

• User authentication
• GraphQL integration
• Sits on top of PostgreSQL
• Scalable and handles real-time data well

I followed the setup for server side authentication . This PR concerns steps 1-4.

Tophatting

1. Create a .env.local file at the root and paste your secrets (public supabase url and supabase key which I will separately provide to ensure our secrets don't get leaked).
2. Run npm install to download new dependencies.
3. Run npm run dev locally.
4. Navigate to http://localhost:3000/instruments and you should see the list of instruments entries.

Configure Vercel's project settings

1. Go into Vercel's dashboard and configure project settings (Navigate to Settings > Environment Variables).
2. Click Add New.
3. Create a new environment variable with the name NEXT_PUBLIC_SUPABASE_URL.
4. Paste your Supabase project URL into the value field.
5. Repeat the process, creating another environment variable named NEXT_PUBLIC_SUPABASE_ANON_KEY.
6. Paste your Supabase Anon Public key into the value field.
7. Once the environment variables are set, navigate to '/instruments' on your Vercel project, and check for the list of instruments entries.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
mood-tracker	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 7, 2025 5:24pm

[kimannle]

In the next PR, I will be deleting the instruments table and queries related to it and setting up authentication and our mood entries table. At this time, I've kept it to ensure that we are able to communicate with Supabase within our app :)

[kimannle]

These are packages we need to install so that we can access supabase from the browser and server.