Supabase architecture (Postgres, Auth, Storage, Realtime, Edge Functions)

Introduction

Supabase helps you build apps quickly by giving you ready tools for data, users, files, live updates, and custom code.

You want a database that works well with your app and is easy to manage.

You need to let users sign up, log in, and keep their info safe.

You want to store and serve files like images or documents.

You want your app to update live when data changes without refreshing.

You want to run small custom code close to your users for faster responses.

Syntax

Supabase

Supabase consists of these main parts:

1. Postgres: A database to store your app data.
2. Auth: Manages user sign-up, login, and security.
3. Storage: Stores files like pictures or videos.
4. Realtime: Sends live updates when data changes.
5. Edge Functions: Run custom code near users for fast responses.

Each part works together to make building apps easier.

You can use them all or just the ones you need.

Examples

This is like a digital filing cabinet for your app's information.

Supabase

Postgres: Store user profiles and app data in tables.

Think of it as the app's front door with a lock and key.

Supabase

Auth: Let users create accounts and log in securely.

Like a cloud folder where your app keeps files.

Supabase

Storage: Upload and serve images or documents.

Similar to a live chat that updates without refreshing.

Supabase

Realtime: Notify users instantly when new messages arrive.

Like having a helper nearby to do small jobs fast.

Supabase

Edge Functions: Run code close to users for quick tasks like sending emails.

Sample Program

This example shows how you set up each part of Supabase for a simple task app.

Supabase

# Supabase basic setup example

# 1. Create a Postgres table for tasks
CREATE TABLE tasks (
  id SERIAL PRIMARY KEY,
  title TEXT NOT NULL,
  completed BOOLEAN DEFAULT FALSE
);

# 2. Enable Auth for user sign-up and login
# (Configured in Supabase dashboard, no SQL needed)

# 3. Use Storage to save task images
# (Configured in dashboard, upload files via API)

# 4. Use Realtime to listen for task updates
# (Client subscribes to changes on tasks table)

# 5. Write an Edge Function to send notification on new task
// Edge Function code example (JavaScript):
export async function handler(req) {
  const { task } = await req.json();
  // send notification logic here
  return new Response('Notification sent for task: ' + task.title);
}

Important Notes

Supabase uses Postgres, a popular and powerful database.

Auth keeps user data safe with secure login methods.

Realtime uses websockets to send live updates instantly.

Summary

Supabase combines database, user management, file storage, live updates, and custom code.

It helps you build apps faster without managing servers.

You can pick and choose which parts to use based on your app needs.

Practice

1. Which Supabase component is responsible for managing user sign-ups and logins?

easy

A. Storage

B. Postgres

C. Realtime

D. Auth

Solution

1. Step 1: Understand Supabase components

   Supabase has several parts: Postgres for data, Auth for users, Storage for files, Realtime for live updates, and Edge Functions for custom code.

2. Step 2: Identify user management part

   The component that handles user sign-ups, logins, and authentication is called Auth.

3. Final Answer:

   Auth -> Option D

4. Quick Check:

   User management = Auth [OK]

Hint: Auth means user login and signup system [OK]

Common Mistakes:

• Confusing Postgres with user management
• Thinking Storage handles users
• Mixing Realtime with authentication

2. Which of the following is the correct way to initialize Supabase client in JavaScript?

easy

A. const supabase = Supabase.create('url', 'anon_key');

B. const supabase = createClient('url', 'anon_key');

C. const supabase = supabaseClient('url', 'anon_key');

D. const supabase = new Supabase('url', 'anon_key');

Solution

1. Step 1: Recall Supabase client initialization syntax

   Supabase uses the function createClient(url, key) to create a client instance.

2. Step 2: Match correct syntax

   const supabase = createClient('url', 'anon_key'); matches the exact syntax: const supabase = createClient('url', 'anon_key');

3. Final Answer:

   const supabase = createClient('url', 'anon_key'); -> Option B

4. Quick Check:

   Use createClient() to initialize Supabase [OK]

Hint: Use createClient() function to start Supabase [OK]

Common Mistakes:

• Using new keyword with Supabase
• Calling wrong function names
• Mixing class and function syntax

3. Given this code snippet, what will be logged if a new row is inserted into the 'messages' table?

const subscription = supabase
  .from('messages')
  .on('INSERT', payload => {
    console.log('New message:', payload.new.text);
  })
  .subscribe();

medium

A. New message: [text of inserted row]

B. New message: undefined

C. Error: .subscribe() is not a function

D. No output, subscription does not listen to INSERT

Solution

1. Step 1: Understand Realtime subscription

   The code listens for INSERT events on the 'messages' table and logs the new row's text field.

2. Step 2: Analyze the callback behavior

   When a new row is inserted, payload.new contains the new row data, so payload.new.text is the inserted message text.

3. Final Answer:

   New message: [text of inserted row] -> Option A

4. Quick Check:

   Realtime INSERT event logs new row text [OK]

Hint: INSERT event payload.new has new row data [OK]

Common Mistakes:

• Expecting payload.old instead of payload.new
• Thinking .subscribe() is invalid
• Assuming no output on INSERT

4. You wrote this Edge Function to upload a file to Supabase Storage but it fails with a permission error. What is the likely cause?

export async function POST(request) {
  const supabase = createClient(SUPABASE_URL, SUPABASE_SERVICE_ROLE_KEY);
  const data = await request.formData();
  const file = data.get('file');
  const { error } = await supabase.storage.from('avatars').upload(file.name, file);
  if (error) return new Response(error.message, { status: 400 });
  return new Response('Upload successful');
}

medium

A. Storage upload requires user session, missing auth

B. The 'avatars' bucket does not exist

C. File object is not properly extracted from formData

D. Using SERVICE_ROLE_KEY in Edge Function is insecure and disabled

Solution

1. Step 1: Check authentication context for storage upload

   Storage upload requires a user session or proper auth context; using service role key alone in Edge Functions does not provide user session.

2. Step 2: Identify missing user session

   Without user session, storage upload is denied due to permission error.

3. Final Answer:

   Storage upload requires user session, missing auth -> Option A

4. Quick Check:

   Storage upload needs user auth session [OK]

Hint: Storage upload needs user session, not just service key [OK]

Common Mistakes:

• Assuming service role key works for storage upload
• Ignoring bucket existence
• Not checking file extraction from formData

5. You want to build a chat app using Supabase that updates messages live and stores user avatars. Which combination of Supabase components should you use?

hard

A. Auth for messages, Edge Functions for avatars, Storage for live updates

B. Realtime for messages and avatars, Postgres for user login

C. Postgres for messages, Storage for avatars, Realtime for live updates, Auth for user login

D. Storage for messages, Postgres for avatars, Edge Functions for live updates

Solution

1. Step 1: Identify storage needs

   Messages are structured data best stored in Postgres; avatars are files stored in Storage.

2. Step 2: Identify live update and user management

   Realtime provides live updates for messages; Auth manages user login.

3. Final Answer:

   Postgres for messages, Storage for avatars, Realtime for live updates, Auth for user login -> Option C

4. Quick Check:

   Use Postgres, Storage, Realtime, Auth together [OK]

Hint: Messages in Postgres, avatars in Storage, live with Realtime [OK]

Common Mistakes:

• Mixing Storage with live updates
• Using Realtime for file storage
• Confusing Auth with data storage