https://github.com/1w6ts/aws-secure-downloads-example
simple Next.js application that allows users to download files securely from Cloudflare R2 or AWS S3 using signed URLs
https://github.com/1w6ts/aws-secure-downloads-example
api aws backend cloudflare nextjs r2 s3 typescript
Last synced: 3 months ago
JSON representation
simple Next.js application that allows users to download files securely from Cloudflare R2 or AWS S3 using signed URLs
- Host: GitHub
- URL: https://github.com/1w6ts/aws-secure-downloads-example
- Owner: 1w6ts
- License: mit
- Created: 2025-01-06T21:57:30.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-01-15T13:08:23.000Z (over 1 year ago)
- Last Synced: 2025-03-01T14:26:51.437Z (over 1 year ago)
- Topics: api, aws, backend, cloudflare, nextjs, r2, s3, typescript
- Language: TypeScript
- Homepage:
- Size: 86.9 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Cloudflare R2 / AWS File Downloader (Next.js)
This project is a simple Next.js application that allows users to download files securely from Cloudflare R2 or AWS S3 using signed URLs. It demonstrates how to integrate Cloudflare R2 with Next.js (App Router) to generate signed URLs for downloading large files. This solution works well for serving files that are stored privately in Cloudflare R2 without exposing them to the public directly.
## Features
- Generate **signed URLs** for files stored in Cloudflare R2.
- **Secure** file download via temporary, time-limited URLs. (adjustable in the code)
- Full integration with Next.js App router and API routes.
- TypeScript support for type safety.
- Easy-to-implement frontend with dynamic file download.
## Prerequisites
Before running the project locally, ensure you have the following prerequisites:
- **Node.js** (version 20 or higher)
- **Cloudflare R2 / AWS S3** account and access keys
- **Git** to clone the repository
## Cloudflare R2 Setup
1. **Create a R2 Bucket**:
- Go to the Cloudflare dashboard.
- Create an R2 bucket to store your files.
- Generate access keys (Access Key ID & Secret Access Key)
2. **Environment Variables:** Create a `.env.local` file at the root of your project and add the following environment variables (replace with your actual values):
```
R2_ACCESS_KEY=your_r2_access_key
R2_SECRET_KEY=your_r2_secret_key
R2_BUCKET_NAME=your_bucket_name
R2_ENDPOINT=your_r2_uri
```
# Getting Started
## Clone the Repository
Start by cloning the repository to your local machine.
```
git clone https://github.com/jacobrozwadowski/aws-download-nextjs-app.git
cd aws-download-nextjs-app
```
## Install Dependencies
Install the required dependencies using npm:
```
npm install
```
## Run the development server
Once dependencies are installed, you can start the development server:
```
npm run dev
```
This will start the server on http://localhost:3000.
# How it works
This project is structured as follows:
- **API Route** (`/api/getsignedurl`): This API route generates a signed URL for downloading a file securely whilst it being private from R2 or S3. The url is valid for a limited time (5 minutes by default).
- **Frontend** (`download-button.tsx`): A React component that triggers the download by fetching the signed URL and initiating the download in the browser.