Build a Simple S3 Storage Browser in React

It’s almost impossible to build a meaningful web application without object storage these days. Often in our apps we require access to files on s3 bucket.

Working with AWS S3 often requires building interfaces to provide secure and accessible ways for interacting with stored files. However, creating such interfaces from scratch can be time-consuming. The AWS Storage Browser component simplifies this process by providing a pre-built, configurable UI for browsing, uploading, and downloading files directly from an application, reducing the need for custom development. Let’s walk through how to set up a basic React app that integrates Amazon’s S3 Storage Browser component.

Introduction

Complex interfaces can be avoided when a robust, visual tool for browsing S3 buckets is available. The AWS Storage Browser offers:

• A visual interface for browsing and interacting with S3 buckets.
• The ability to perform essential file operations such as viewing, uploading, downloading, and deleting.
• Granular control over access based on buckets or specific prefixes.

By incorporating this component, significant time is saved, and applications gain user-friendly functionality without the need for extensive custom coding.

Step 1: Project Setup

A new React project can be created using Vite with the following commands:

npm create vite@latest my-s3-browser --template react
cd my-s3-browser
npm install

Install the required AWS Amplify dependencies:

npm install @aws-amplify/ui-react-storage

Environment Configuration

Create a .env file in the root directory to store AWS credentials:

VITE_AWS_REGION=your-region
VITE_AWS_ACCOUNT_ID=your-account-id
VITE_S3_BUCKET_NAME=your-s3-bucket-name
VITE_AWS_ACCESS_KEY_ID=your-access-key-id
VITE_AWS_SECRET_ACCESS_KEY=your-secret-access-key
VITE_AWS_SESSION_TOKEN=your-session-token

Replace the placeholders with valid AWS credentials.

Step 2: File Structure and Contents

The project directory should include the following structure:

src/
  |-- App.jsx
  |-- main.jsx
  |-- StorageBrowserConfig.js

main.jsx

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
import { StorageBrowser } from './StorageBrowserConfig';

import '@aws-amplify/ui-react-storage/styles.css';

createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <StorageBrowser.Provider>
      <App />
    </StorageBrowser.Provider>
  </React.StrictMode>
)

This ensures that StorageBrowser.Provider wraps the application to provide necessary state management.

App.jsx

import React from 'react';
import { StorageBrowser } from './StorageBrowserConfig';

export default function App() {
  return (
    <div style={{ margin: '10vh 15vw', textAlign: 'center' }}>
      <h1>S3 Storage Browser</h1>
      <StorageBrowser />
    </div>
  );
}

This component renders the StorageBrowser interface with a customizable heading and layout.

StorageBrowserConfig.js

import { createStorageBrowser } from '@aws-amplify/ui-react-storage/browser';

export const { StorageBrowser } = createStorageBrowser({
  config: {
    region: import.meta.env.VITE_AWS_REGION,
    accountId: import.meta.env.VITE_AWS_ACCOUNT_ID,
    listLocations: async () => {
      return {
        items: [
          {
            bucket: import.meta.env.VITE_S3_BUCKET_NAME,
            prefix: '',
            id: 'root',
            type: 'BUCKET',
            permissions: ['list', 'get', 'write', 'delete'],
          },
        ],
      };
    },
    getLocationCredentials: async () => {
      return {
        credentials: {
          accessKeyId: import.meta.env.VITE_AWS_ACCESS_KEY_ID,
          secretAccessKey: import.meta.env.VITE_AWS_SECRET_ACCESS_KEY,
          sessionToken: import.meta.env.VITE_AWS_SESSION_TOKEN,
          expiration: new Date(Date.now() + 3600000),
        },
      };
    },
    registerAuthListener: () => {},
  },
})

This file configures the S3 bucket details and AWS credentials required for authenticating S3 API requests.

Step 3: Running the Application

To start the application, use the following command:

npm run dev

Open a web browser and navigate to http://localhost:5173. The interface will display a title and an interactive file browser for the S3 bucket.

Demo Video

Handling Different User Access Methods

The StorageBrowser component supports multiple authentication and authorization methods to control user access to S3 data effectively. Below are the different approaches:

1. Amplify Auth (Amazon Cognito + IAM Policies)

If you are already using AWS Amplify, this method is the fastest to implement. It uses Amazon Cognito for authentication and IAM policies for authorization. Users and groups can have specific access rules, making it ideal for customer and third-party data access scenarios.

import { createAmplifyAuthAdapter, createStorageBrowser } from '@aws-amplify/ui-react-storage/browser';
import '@aws-amplify/ui-react-storage/styles.css';
import config from './amplify_outputs.json';

Amplify.configure(config);

export const { StorageBrowser } = createStorageBrowser({
  config: createAmplifyAuthAdapter(),
});

2. IAM Identity Center & S3 Access Grants

This method is recommended when you need fine-grained permissions per prefix. It allows access grants for IAM principals and corporate users.

import { createManagedAuthAdapter, createStorageBrowser } from '@aws-amplify/ui-react-storage/browser';
import '@aws-amplify/ui-react-storage/styles.css';

export const { StorageBrowser } = createStorageBrowser({
  config: createManagedAuthAdapter({
    region: '',
    accountId: '',
    credentialsProvider: async () => ({
      credentials: {
        accessKeyId: 'my-access-key-id',
        secretAccessKey: 'my-secret-access-key',
        sessionToken: 'my-session-token',
        expiration: new Date(),
      },
    }),
  }),
});

3. Customer-Managed Authentication

Scoped AWS STS tokens must be provided for applications using custom identity and authorization services to grant access to specific S3 resources.

import { createStorageBrowser } from '@aws-amplify/ui-react-storage/browser';
import '@aws-amplify/ui-react-storage/styles.css';

export const { StorageBrowser } = createStorageBrowser({
  config: {
    region: 'XXX',
    accountId: 'XXXXXX',
    listLocations: async () => ({ /* define accessible locations */ }),
    getLocationCredentials: async () => ({ /* return STS credentials */ }),
  },
});

FAQs

What is AWS Storage Browser?

AWS Storage Browser is a prebuilt UI component from AWS Amplify that helps developers create secure file browsing experiences for Amazon S3.

Can React applications access Amazon S3 directly?

Yes. React applications can securely access Amazon S3 using AWS Amplify, Cognito authentication, and temporary AWS credentials.

Is AWS Amplify required to build an S3 browser in React?

No, but AWS Amplify simplifies authentication, storage access, and UI integration for React-based S3 storage browsers.

How do I secure S3 access in React applications?

You should use temporary credentials, AWS Cognito authentication, IAM policies, and least-privilege access instead of exposing long-term AWS keys.

Can users upload files directly to Amazon S3?

Yes. React applications can upload files directly to Amazon S3 using AWS Amplify Storage APIs and secure authentication workflows.

Conclusion

With minimal setup, we have built an S3 browser that provides secure, authenticated access to files. You can further extend it with custom views, additional S3 permissions, or localization. This approach keeps things clean and efficient whether for internal use or end-user access.

At KubeNine, we love using simple tools like these to speed up our workflows and focus more on building features rather than managing infrastructure. This approach aligns with our goal of simplifying DevOps practices so teams can achieve more with less complexity.

This tool doesn’t just simplify your work—it allows you to move faster and handle file interactions efficiently. If you’re managing large amounts of data, it’s small improvements like these that make a big difference.

Give it a try, tweak it for your use case, and see how much easier managing S3 data can become. Happy coding!

Read More

• AWS CLI Profiles: Manage Multiple AWS Accounts Safely
• Secure Kubernetes Apps with OAuth2-Proxy
• AWS IMDSv2 Can Break EC2 Startup Scripts — Here’s the Fix
• EC2 Memory Not Showing? Fix It with CloudWatch Agent
• AWS Amplify Storage Browser Documentation