Generating public URLs in Supabase - Step-by-Step Execution

Process Flow - Generating public URLs

Start with file in storage

↓

Call public URL function

↓

Function checks file path

↓

Generate public URL string

↓

Return URL to user

↓

User can access file via URL

This flow shows how a file stored in Supabase storage gets a public URL generated so anyone can access it.

Execution Sample

Supabase

const { data } = supabase.storage.from('avatars').getPublicUrl('user1.png');
console.log(data.publicUrl);

This code gets a public URL for the file 'user1.png' in the 'avatars' storage bucket.

Process Table

Step	Action	Input	Output	Notes
1	Call getPublicUrl	bucket: 'avatars', path: 'user1.png'	Function starts	Function receives bucket and file path
2	Check file path format	'user1.png'	Valid path	Path is valid, no errors
3	Generate URL	bucket + path	https://xyz.supabase.co/storage/v1/object/public/avatars/user1.png	URL constructed using base URL, bucket, and path
4	Return URL	public URL string	{ publicUrl: 'https://xyz.supabase.co/storage/v1/object/public/avatars/user1.png' }	URL returned to caller
5	User accesses URL	URL string	File content served	Anyone with URL can access the file
6	End	N/A	N/A	Process complete

💡 Process ends after returning the public URL and user accesses the file.

Status Tracker

Variable	Start	After Step 2	After Step 3	Final
bucket	undefined	'avatars'	'avatars'	'avatars'
filePath	undefined	'user1.png'	'user1.png'	'user1.png'
publicUrl	undefined	undefined	'https://xyz.supabase.co/storage/v1/object/public/avatars/user1.png'	'https://xyz.supabase.co/storage/v1/object/public/avatars/user1.png'

Key Moments - 2 Insights

Why do we need to check the file path before generating the URL?

Checking the file path ensures it is valid and safe to use in the URL. This prevents errors or broken links as shown in step 2 of the execution table.

Is the public URL permanent or can it change?

The public URL is stable as long as the file stays in the same bucket and path. If the file is moved or deleted, the URL will no longer work, as implied in step 5.

Visual Quiz - 3 Questions

Look at the execution table, what is the output after step 3?

A Function starts

B Valid path

C https://xyz.supabase.co/storage/v1/object/public/avatars/user1.png

D File content served

💡 Hint

Check the 'Output' column for step 3 in the execution table.

At which step does the function return the public URL to the caller?

A Step 4

B Step 2

C Step 5

D Step 6

💡 Hint

Look for the step where the output shows the publicUrl object returned.

If the file path was invalid, what would change in the execution table?

A Step 3 would generate a different URL

B Step 2 would show an error instead of 'Valid path'

C Step 5 would serve file content anyway

D Step 4 would return a different URL

💡 Hint

Consider what happens if the file path check fails at step 2.

Concept Snapshot

Generating public URLs in Supabase:
- Use supabase.storage.from(bucket).getPublicUrl(path)
- Validates file path
- Constructs URL: base + bucket + path
- Returns URL string
- Anyone with URL can access the file
- URL works as long as file exists

Full Transcript

This visual execution shows how Supabase generates a public URL for a file stored in its storage service. First, the function is called with the bucket name and file path. It checks the file path to ensure it is valid. Then it constructs the public URL by combining the base URL, bucket, and file path. The URL is returned to the caller. Finally, anyone with this URL can access the file content directly. The process stops after the URL is returned and used.

Practice

1. What does the getPublicUrl function in Supabase do?

easy

A. It creates a link that anyone can use to access a file in a bucket.

B. It deletes a file from the storage bucket.

C. It uploads a file to the storage bucket.

D. It encrypts a file before storing it.

Solution

1. Step 1: Understand the purpose of getPublicUrl

   This function is designed to generate a URL that can be shared publicly to access a file stored in Supabase storage.

2. Step 2: Compare options with function behavior

   Only It creates a link that anyone can use to access a file in a bucket. describes creating a public link. Other options describe unrelated actions like deleting, uploading, or encrypting files.

3. Final Answer:

   It creates a link that anyone can use to access a file in a bucket. -> Option A

4. Quick Check:

   Public URL = Link to file [OK]

Hint: Public URLs let anyone access files without login [OK]

Common Mistakes:

• Confusing URL generation with file upload
• Thinking it deletes files
• Assuming it encrypts files automatically

2. Which of the following is the correct way to call getPublicUrl in Supabase to get a public URL for a file named photo.jpg in bucket images?

easy

A. supabase.getPublicUrl('images', 'photo.jpg')

B. supabase.storage.getPublicUrl('images/photo.jpg')

C. supabase.storage.from('images').getPublicUrl('photo.jpg')

D. supabase.storage.from('photo.jpg').getPublicUrl('images')

Solution

1. Step 1: Recall the correct method chaining

   The correct syntax is to select the bucket first with from('bucket_name'), then call getPublicUrl('file_path').

2. Step 2: Match options with correct syntax

   supabase.storage.from('images').getPublicUrl('photo.jpg') matches this pattern exactly. Options A, B, and D misuse method calls or argument order.

3. Final Answer:

   supabase.storage.from('images').getPublicUrl('photo.jpg') -> Option C

4. Quick Check:

   Bucket then file path = Correct call [OK]

Hint: Use .from(bucket).getPublicUrl(file) syntax [OK]

Common Mistakes:

• Calling getPublicUrl directly on storage
• Swapping bucket and file arguments
• Using wrong method names

3. What will be the output of this code snippet?

const { data } = supabase.storage.from('docs').getPublicUrl('file.txt');
console.log(data.publicUrl);

medium

A. A boolean indicating if the file exists.

B. A string URL to access 'file.txt' publicly in 'docs' bucket.

C. Undefined because 'data' is not returned by getPublicUrl.

D. An error because getPublicUrl returns a promise.

Solution

1. Step 1: Understand getPublicUrl return value

   The getPublicUrl method returns an object with a publicUrl string property immediately, not a promise.

2. Step 2: Analyze the console.log output

   Logging data.publicUrl will print the URL string to access the file publicly.

3. Final Answer:

   A string URL to access 'file.txt' publicly in 'docs' bucket. -> Option B

4. Quick Check:

   getPublicUrl returns URL string [OK]

Hint: getPublicUrl returns URL object, not a promise [OK]

Common Mistakes:

• Assuming getPublicUrl is async
• Expecting undefined data
• Confusing output with file existence check

4. You tried to generate a public URL with supabase.storage.from('media').getPublicUrl('video.mp4') but got an empty string. What is the most likely cause?

medium

A. getPublicUrl requires an async await call.

B. You forgot to import the Supabase client.

C. The bucket name should be 'videos' not 'media'.

D. The file 'video.mp4' does not exist in the 'media' bucket.

Solution

1. Step 1: Check file existence in bucket

   If the file does not exist, the public URL generated will be empty or invalid.

2. Step 2: Evaluate other options

   Importing client or bucket name mismatch would cause errors, not empty string. getPublicUrl is synchronous, so async is not needed.

3. Final Answer:

   The file 'video.mp4' does not exist in the 'media' bucket. -> Option D

4. Quick Check:

   Missing file = empty URL [OK]

Hint: Empty URL usually means file missing [OK]

Common Mistakes:

• Assuming getPublicUrl is async
• Ignoring file existence
• Mixing up bucket names

5. You want to share a file publicly but keep other files private in the same bucket. Which approach with Supabase storage and getPublicUrl is best?

hard

A. Use getPublicUrl only on files in a public bucket.

B. Set the bucket to private, then generate public URLs only for specific files using getPublicUrl.

C. Make the entire bucket public so all files are accessible.

D. Upload files with a special tag to mark them public.

Solution

1. Step 1: Understand bucket privacy settings

   Supabase storage buckets are either public or private. Public buckets allow all files to be accessed via public URLs.

2. Step 2: Evaluate file-level public access

   Supabase does not support per-file public access in private buckets. To share files publicly, the bucket must be public.

3. Step 3: Choose best practice

   Use getPublicUrl only on files in a public bucket. correctly states to use getPublicUrl on files in a public bucket to share them. Options A and D are incorrect because file-level public control is not supported. Make the entire bucket public so all files are accessible. makes all files public, which is not desired.

4. Final Answer:

   Use getPublicUrl only on files in a public bucket. -> Option A

5. Quick Check:

   Public URLs need public bucket [OK]

Hint: Only public buckets support public URLs per file [OK]

Common Mistakes:

• Thinking private buckets allow public URLs per file
• Making whole bucket public without control
• Assuming tags control public access