Forem: Emily Johnson

Cloudflare R2 Hands-On Guide: Set Up Free 10GB Storage, Zero-Egress Object Storage, and S3-Compatible API Keys

Emily Johnson — Tue, 09 Dec 2025 16:08:25 +0000

In a modern full-stack (or vibe coding) stack, even though Supabase ships with Storage and Vercel offers free Blob quotas, many developers (including HiCyou) still prefer Cloudflare R2 as the primary storage layer for SaaS projects.

The main reasons:

R2 is fully compatible with the S3 API.
Most importantly, it offers zero egress fees. That means no matter how many times users download images or files from your app, you don’t get hit with surprise bandwidth bills. (There are request charges, but they’re very low in practice.) This is huge for SaaS scalability.

For early-stage indie founders, R2’s free tier is extremely generous: 10GB of free storage, free egress, and plenty of free requests, which is ideal for launching projects at basically zero infrastructure cost.

In this guide, I’ll walk you through:

Creating an R2 bucket
Generating S3-compatible API credentials
Configuring a custom domain for public access

Step 1: Create Your R2 Bucket

Before you begin, make sure you have a Cloudflare account.

Log in to the Cloudflare Dashboard.
In the sidebar, find and click R2.
- Note: If this is your first time using R2, Cloudflare may ask you to add a payment method. R2 still offers a very generous free tier (10GB storage + millions of requests per month), but a credit card or PayPal is usually required to activate the service.
Click “Create bucket”.

Configure the Bucket

Bucket Name: Enter a unique name (for example, hicyou-assets or my-saas-uploads).
- Tip: Only lowercase letters, numbers, and hyphens are allowed.
Location: You can leave this as Automatic. Cloudflare’s global network will handle edge routing and optimization for you.
Click “Create Bucket”.

You now have an R2 bucket. At this point, it’s still private – your code and your users can’t access it yet.

Step 2: Generate API Keys (S3 Credentials)

To let your application (Node.js, Python, Go, etc.) upload and read files, you need credentials. Since R2 is S3-compatible, you’ll need an Access Key ID and Secret Access Key.

Important: Don’t look for these inside the bucket itself. They’re configured in the R2 account-level settings, not under a specific bucket.

Go back to the R2 Overview page.
On the right sidebar, under “Account Details”, click the {} Manage button.
Click “Create User API Token”.

Permission Wizard

To make sure your app can read and write objects correctly, configure the token like this:

Token Name: Use a descriptive name (for example, Production App Read/Write).
Permissions: Select Object Read & Write.
- Security tip: For app credentials, avoid using full Admin permissions. Object Read & Write is safer and typically all you need.
Specific Bucket(s): Choose “Apply to specific buckets only” and select the bucket you just created (for example, hicyou-assets).
TTL: Choose “Forever” (unless you already have a key rotation policy in place).

Click “Create User API Token”.

Important: Save Your Keys Immediately

Cloudflare will only show you the Secret Key once. If you close the page, you won’t be able to view it again.

Copy and store the following values in your .env file or password manager:

Access Key ID (e.g. f82b...)
Secret Access Key (e.g. 8d9a... – a long random string)
Endpoint – your S3-compatible endpoint, typically something like:https://.r2.cloudflarestorage.com

Developer tip: When configuring an S3 client (AWS SDK, MinIO, etc.), the Endpoint usually does not include the bucket name. The client will add the bucket to the URL automatically when making requests.

Step 3: Enable Public Access (Custom Domain)

By default, objects in R2 are private. If you want users to view images (avatars, blog cover images, etc.) directly in their browser, you need to enable some form of public access.

Best Practice: Use Your Own Custom Domain

Avoid using the default *.r2.dev domain in production – it has strict rate limits. Instead, bind a domain you control.

Open your Bucket and go to the Settings tab.
Scroll down to Public Access → Custom Domains.
Click “Connect Domain”.
Enter a subdomain such as cdn.hicyou.com or assets.myapp.com.
Cloudflare will automatically create and configure the necessary DNS records for you.

Now, if you upload a file named logo.png, users can access it via:

https://assets.hicyou.com/logo.png

Step 4: Configure CORS (For Direct Uploads from the Frontend)

If you want your frontend (React, Next.js, Vue, etc.) to upload directly to R2 instead of proxying through your backend, you must configure CORS (Cross-Origin Resource Sharing) for your bucket.

In your Bucket Settings page.
Scroll down to CORS Policy.
Add JSON similar to the following to allow both local development and your production domains:

[
  {
    "AllowedOrigins": [
      "http://localhost:3000",
      "https://hicyou.com",
      "https://www.hicyou.com"
    ],
    "AllowedMethods": [
      "GET",
      "PUT",
      "POST",
      "DELETE",
      "HEAD"
    ],
    "AllowedHeaders": [
      "*"
    ],
    "ExposeHeaders": [],
    "MaxAgeSeconds": 3000
  }
]

Conclusion

Combined with the previous Supabase guide, you now have two core pieces of infrastructure ready for your SaaS:

Postgres (via Supabase) for your database
Cloudflare R2 for object storage

Both are battle-tested, highly cost-effective options for indie devs and small teams.

You’re welcome to use https://github.com/hicyoucom/hicyou to spin up your own AI-powered link directory site.

Demo: https://hicyou.com

https://startupfa.me/s/hi-cyou

A Practical Guide to Supabase: Setting up a Database, Auth, and Integrating Resend

Emily Johnson — Mon, 08 Dec 2025 16:19:21 +0000

In modern full-stack development and vibe coding workflows, Supabase is no longer just “the open-source Firebase alternative” – it’s become a full development platform. You get a production-grade Postgres database plus powerful Auth, auto-generated APIs, and real-time subscriptions.

That’s why HiCyou uses Supabase as both its database and Auth solution.

One common pain point, though, is handling email confirmation for user sign-ups. Supabase’s built-in email service is great for quick tests, but it has a low sending limit and often lands in the spam folder.

In this guide, I’ll walk you through:

Registering and creating a Supabase project
Enabling and configuring Auth
Integrating Resend (one of the most popular email services for developers today) so your verification emails actually reach inboxes reliably.

Step 1: Create Your Supabase Database

First, you’ll need a Supabase organization.

Go to supabase.com.
Sign in with GitHub or register with email.
Create an organization and choose a plan. For a new project, the Free Plan is usually more than enough. When you eventually need to upgrade, it typically means your product is doing pretty well.

Next, create a project:

Fill in project details:
- Name: Give your project a name (for example, My SaaS App).
- Database Password: Write this down somewhere safe. This is your main database password and you won’t be able to view it again later.
- Region: Pick a region close to your users (for example, if your users are in Asia, Singapore or Tokyo is usually a good choice).
Click "Create new project".

Step three is to understand how to connect to your database:

Click the Connect button at the top.
Under Method, select Transaction pooler. This option works well across both IPv4 and IPv6 environments and is generally more compatible with various servers and local dev setups.
Copy the connection string, and remember to replace [YOUR-PASSWORD] with the database password you just set.

Step 2: Configure Auth (Authentication)

Building a proper user system – especially the login flow – is harder than it looks. Implementing basic signup and login is easy; what’s difficult is making the system secure, reliable, and resistant to abusive mass registrations.

Supabase Auth gives you a solid infrastructure for this. If you build on top of it, you can pretty quickly get to a login system that’s “about 9/10” in terms of security without reinventing everything yourself.

Once your project is created, you’ll land in the Dashboard. Supabase enables Auth by default, but we’ll double-check the settings.

In the left sidebar, click Authentication.
Go to Sign In / Providers.
You’ll see that Email is Enabled by default.
- Default email behavior:
  - If you don’t configure a custom SMTP server, Supabase will send emails from noreply@mail.app.supabase.io.
- The catch: This default sender is convenient, but it has strict hourly sending limits and a high chance of landing in Gmail/Outlook spam folders. That’s exactly why we want to integrate Resend instead.

Enable Google, GitHub, etc. Login

GitHub and Google are two of the most common login options for developers, and enabling them already covers a large portion of users’ expectations.

Click the corresponding provider icon – we’ll use GitHub as an example here:

Click the GitHub Enabled toggle/button, then copy the Callback URL.
Go to https://github.com/settings/apps/new and create a new GitHub App.

Click Register application to create the OAuth app.

Click Generate a new client secret.

Copy the Client ID and Client secret back into the GitHub provider settings in Supabase Auth and save.

Step 3: Integrate Resend Email Service (Key Step)

Resend is currently one of the best email sending services for developers: simple API, great DX, and excellent deliverability. Supabase’s own docs also recommend using it to take over email sending.

3.1 Set Things Up in Resend

Go to resend.com and sign up.
Add a domain:
- Add a domain you own (for example, myapp.com).
- Important: Resend will show you several DNS records (DKIM, SPF, DMARC). Go to your DNS provider (Cloudflare, GoDaddy, Namecheap, etc.) and add these as TXT records.
- Wait for verification to pass (typically anywhere from a few minutes to a few hours).
Get an API Key:
- In the Resend dashboard, go to API Keys -> Create API Key.
- Choose permission "Sending access".
- Copy the key that starts with re_ and keep it safe.

3.2 Configure Supabase to Use Resend

Back in the Supabase Dashboard:

Click Project Settings (gear icon in the lower left).
Go to Authentication -> SMTP Settings.
Toggle Enable Custom SMTP to ON.
Fill in the fields as follows:

Field	Value	Description
Sender Email	`noreply@yourdomain.com`	Must be an email on the domain you verified
Sender Name	`My App Team`	Display name shown to users in their email client
Host	`smtp.resend.com`	Resend’s SMTP server
Port Number	`465`	SSL port
Username	`resend`	This is fixed – always use `resend`
Password	`re_12345...`	Paste the API Key you generated in Resend

Click Save.

Step 4: Customize Email Templates (Optional)

Now that the email pipeline is wired up, you can tweak the actual email content.

Go back to Authentication -> Email Templates.
Edit templates like "Confirm Your Signup" or "Reset Password".
Templates support HTML. Just make sure you keep variables like {{ .ConfirmationURL }} – this is the link users click to confirm their account.

Conclusion

You’re welcome to use https://github.com/hicyoucom/hicyou to spin up your own AI-powered link directory site.

Demo: https://hicyou.com

via: https://blog.hicyou.com/en/supabase-setup/