Supabase architecture (Postgres, Auth, Storage, Realtime, Edge Functions) - Step-by-Step Execution

Process Flow - Supabase architecture (Postgres, Auth, Storage, Realtime, Edge Functions)

Client Request

↓

Auth Service

↓

Postgres Database

↓

Realtime Server

↓

Storage Service

↓

Edge Functions

↓

Response to Client

Client sends request which first goes to Auth for verification, then interacts with Postgres. Postgres connects to Realtime, Storage, and Edge Functions to handle data, live updates, files, and custom logic.

Execution Sample

Supabase

1. Client sends login request
2. Auth verifies credentials
3. On success, client queries Postgres
4. Postgres triggers Realtime updates
5. Client uploads file to Storage
6. Edge Functions run custom logic

This flow shows how a client interacts with Supabase services step-by-step.

Process Table

Step	Action	Service Involved	State Change	Client Impact
1	Client sends login request	Client -> Auth	Auth receives credentials	Waiting for auth result
2	Auth verifies credentials	Auth	User authenticated or rejected	Receives auth token if success
3	Client queries database	Client -> Postgres	Postgres processes query	Receives requested data
4	Postgres triggers realtime update	Postgres -> Realtime	Realtime broadcasts changes	Client UI updates live
5	Client uploads file	Client -> Storage	File stored securely	File available for access
6	Edge Functions execute	Edge Functions	Custom logic runs on events	Client gets processed results
7	End of flow	-	-	Client interaction complete

💡 All steps complete; client has authenticated, accessed data, received live updates, stored files, and used custom logic.

Status Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6	Final
Auth Token	None	Valid token or None	Valid token	Valid token	Valid token	Valid token	Valid token
Database Data	Empty	Empty	Queried data	Queried data	Queried data	Queried data	Queried data
Realtime State	Idle	Idle	Idle	Broadcasting updates	Broadcasting updates	Broadcasting updates	Broadcasting updates
Storage Files	Empty	Empty	Empty	Empty	File stored	File stored	File stored
Edge Function Result	None	None	None	None	None	Processed result	Processed result

Key Moments - 3 Insights

Why does the client need to authenticate before accessing the database?

Authentication ensures only authorized users can query the database, as shown in step 2 of the execution_table where Auth verifies credentials before Postgres processes queries in step 3.

How does realtime update the client interface?

Postgres triggers Realtime to broadcast changes (step 4), which updates the client UI live without needing manual refresh, as seen in the 'Client Impact' column.

What role do Edge Functions play in this architecture?

Edge Functions run custom logic on events (step 6), allowing the client to get processed results beyond simple database queries, enhancing flexibility.

Visual Quiz - 3 Questions

Look at the execution_table, what service verifies user credentials?

A Postgres Database

B Realtime Server

C Auth Service

D Storage Service

💡 Hint

Check step 2 in the execution_table where authentication happens.

At which step does the client receive live updates?

A Step 3

B Step 4

C Step 5

D Step 6

💡 Hint

Look at the 'Client Impact' column for live UI updates in the execution_table.

If the client skips authentication, what happens to the database query step?

A Database query is rejected or blocked

B Realtime broadcasts updates anyway

C Postgres processes query normally

D Edge Functions run without data

💡 Hint

Refer to the key_moments about why authentication is needed before database access.

Concept Snapshot

Supabase architecture includes:
- Auth for user verification
- Postgres as the main database
- Realtime for live data updates
- Storage for file management
- Edge Functions for custom backend logic
Client requests flow through Auth, then Postgres, triggering Realtime, Storage, and Edge Functions as needed.

Full Transcript

Supabase architecture works by first having the client send a request that goes to the Auth service to verify the user. Once authenticated, the client can query the Postgres database. Postgres can trigger Realtime to send live updates to the client interface. Clients can upload files to Storage, which securely stores them. Edge Functions run custom backend logic on events to extend functionality. This flow ensures secure, real-time, and flexible cloud services for applications.

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