Custom domains in Supabase - Mini Project: Build & Apply

Configure a Custom Domain for a Supabase Project

📖 Scenario: You have created a Supabase project for your web application. Now, you want to make your app accessible through a custom domain name instead of the default Supabase URL.This project will guide you step-by-step to configure a custom domain in your Supabase project settings and prepare the necessary DNS records.

🎯 Goal: By the end of this project, you will have configured a custom domain for your Supabase project by setting up the domain data, adding the domain configuration, applying the DNS verification, and completing the domain setup in Supabase.

📋 What You'll Learn

Create a dictionary with the custom domain details

Add a configuration variable for DNS verification token

Write the command to add the custom domain to Supabase using the CLI

Complete the domain setup by confirming DNS verification

💡 Why This Matters

🌍 Real World

Custom domains make your web app look professional and easier to remember by users.

💼 Career

Knowing how to configure custom domains is essential for cloud engineers and developers managing web applications.

1

Create the custom domain data structure

Create a dictionary called custom_domain with these exact entries: 'domain': 'myapp.example.com' and 'project_ref': 'abc123xyz'.

Supabase

# Your code here

Hint

Think of this dictionary as a small address card with your domain and project reference.

2

Add the DNS verification token configuration

Create a variable called dns_verification_token and set it to the string 'verify-123token'.

Supabase

custom_domain = {
    'domain': 'myapp.example.com',
    'project_ref': 'abc123xyz'
}
# Your code here

Hint

This token is like a secret handshake to prove you own the domain.

3

Add the custom domain to Supabase using CLI command

Write a string variable called add_domain_command that contains the exact command: supabase domains add myapp.example.com --project-ref abc123xyz.

Supabase

custom_domain = {
    'domain': 'myapp.example.com',
    'project_ref': 'abc123xyz'
}
dns_verification_token = 'verify-123token'
# Your code here

Hint

This command tells Supabase to add your custom domain to your project.

4

Complete the domain setup by confirming DNS verification

Write a string variable called verify_dns_command that contains the exact command: supabase domains verify myapp.example.com --project-ref abc123xyz.

Supabase

custom_domain = {
    'domain': 'myapp.example.com',
    'project_ref': 'abc123xyz'
}
dns_verification_token = 'verify-123token'
add_domain_command = 'supabase domains add myapp.example.com --project-ref abc123xyz'
# Your code here

Hint

This command confirms that your DNS is set up correctly and completes the domain setup.

Practice

1. What is the main purpose of setting a custom domain in Supabase?

easy

A. To enable faster query execution

B. To increase database storage capacity

C. To create multiple user accounts automatically

D. To use your own website address instead of a default Supabase URL

Solution

1. Step 1: Understand what a custom domain is

   A custom domain lets you use your own website address instead of a generic one provided by a service.

2. Step 2: Relate to Supabase usage

   In Supabase, setting a custom domain means your app uses your own URL, making it look professional and branded.

3. Final Answer:

   To use your own website address instead of a default Supabase URL -> Option D

4. Quick Check:

   Custom domain = Own website address [OK]

Hint: Custom domain means your own website address [OK]

Common Mistakes:

• Thinking it increases database size
• Confusing with performance features
• Assuming it creates user accounts

2. Which DNS record type must you add to point your custom domain to Supabase?

easy

A. CNAME record

B. MX record

C. TXT record

D. SRV record

Solution

1. Step 1: Identify DNS record types for domain pointing

   CNAME records are used to alias one domain name to another, commonly used to point custom domains to services.

2. Step 2: Match with Supabase custom domain setup

   Supabase requires a CNAME record to link your custom domain to their servers.

3. Final Answer:

   CNAME record -> Option A

4. Quick Check:

   Custom domain pointing uses CNAME [OK]

Hint: Use CNAME to point domain to Supabase [OK]

Common Mistakes:

• Using MX record which is for email
• Using TXT record meant for verification
• Confusing SRV record with domain pointing

3. Given this Supabase custom domain setup snippet:

domain: "app.example.com"
records: [
  { type: "CNAME", value: "db.supabase.co" }
]

What happens when a user visits app.example.com?

medium

A. They are redirected to the Supabase database interface

B. Their browser connects to Supabase hosting for the app

C. They get an email verification prompt

D. They see a DNS error because CNAME is incorrect

Solution

1. Step 1: Understand CNAME effect

   The CNAME record points the domain to Supabase's hosting address, so requests go there.

2. Step 2: Interpret user visit behavior

   When visiting app.example.com, the browser connects to Supabase hosting serving the app, not the database interface or errors.

3. Final Answer:

   Their browser connects to Supabase hosting for the app -> Option B

4. Quick Check:

   CNAME directs browser to Supabase hosting [OK]

Hint: CNAME points domain to hosting, not email or errors [OK]

Common Mistakes:

• Confusing database interface with hosting
• Assuming DNS error from correct CNAME
• Thinking email verification appears on visit

4. You set a custom domain in Supabase but get a security warning in browsers. What is the most likely cause?

medium

A. You did not add an MX record

B. You used an invalid domain name format

C. You forgot to enable SSL for the custom domain

D. You set the CNAME to the wrong IP address

Solution

1. Step 1: Identify cause of browser security warnings

   Security warnings usually happen when SSL (secure connection) is missing or invalid.

2. Step 2: Relate to Supabase custom domain setup

   Supabase requires enabling SSL for custom domains to avoid browser warnings.

3. Final Answer:

   You forgot to enable SSL for the custom domain -> Option C

4. Quick Check:

   Missing SSL causes browser security warnings [OK]

Hint: Always enable SSL for custom domains [OK]

Common Mistakes:

• Confusing MX record with SSL
• Thinking domain format causes security warning
• Assuming CNAME IP address is used instead of hostname

5. You want to set up a custom domain dashboard.myapp.com for your Supabase project. Which steps must you follow to ensure it works correctly and securely?

hard

A. Buy the domain, add a CNAME DNS record pointing to Supabase, then enable SSL in Supabase settings

B. Buy the domain, add an MX record pointing to Supabase, then enable SSL in Supabase settings

C. Buy the domain, add a TXT record for verification, then disable SSL to avoid errors

D. Buy the domain, add an A record pointing to Supabase IP, then skip SSL setup

Solution

1. Step 1: Purchase domain and configure DNS

   First, buy your domain (dashboard.myapp.com) and add a CNAME record pointing to Supabase's domain to route traffic correctly.

2. Step 2: Enable SSL for secure connections

   Then, enable SSL in Supabase settings to secure the connection and avoid browser warnings.

3. Final Answer:

   Buy the domain, add a CNAME DNS record pointing to Supabase, then enable SSL in Supabase settings -> Option A

4. Quick Check:

   Domain + CNAME + SSL = Correct setup [OK]

Hint: Domain + CNAME + SSL = working custom domain [OK]

Common Mistakes:

• Using MX or TXT records incorrectly
• Skipping SSL causing security warnings
• Using A record instead of CNAME for Supabase