Building an Amazon S3 Dashboard with ReactJS – Part 1

Introduction

In the modern digital era, cloud storage and web applications have become essential for efficient data management and sharing. Amazon S3 is a popular cloud storage solution offering secure and scalable object storage. Integrating Amazon S3 into a user-friendly React-powered dashboard can provide a seamless experience for users to access and manage their data securely. We’ll also implement Amazon Cognito for login and signup functionalities to enhance security and user management. This blog will guide you through setting up Cognito, creating an Amazon S3 bucket with Cross-Origin Resource Sharing (CORS) enabled, and initializing a React app with the necessary packages.

Steps to Setup Amazon Cognito for Authentication

Before building the Amazon S3 dashboard, ensuring secure access to the application is crucial. AWS Cognito provides a user authentication and authorization service that easily integrates with other AWS services. Follow these steps to set up Amazon Cognito for your React app:
Step 1: Open AWS Console & In the Search bar, type Amazon Cognito

Step 2: Click on Create Userpool

Step 3: In Amazon Cognito user pool sign-in options, select a Username and Email and Click on next.

Step 4: In the Password policy, Choose Amazon Cognito defaults, and in Multi-factor authentication, select No MAF. In User account recovery, enable that & choose email only and click next.

Step 5: Self-service sign-up & Attribute verification, and user account confirmation leave setting default and click on next.

Step 6: In Configure message delivery, select Send email with Amazon Cognito and click next

Step 7: Type the User pool name

Step 8: In-app client selects public client gives a name, select Generate a client secret, then click on next.

Step 9:  Click on Create User Pool

Steps to Create an Amazon S3 Bucket and Setup CROS

With Amazon Cognito set up, creating an Amazon S3 bucket to store your application assets and data is time. Additionally, we’ll configure Cross-Origin Resource Sharing (CORS) to allow web browsers to access resources hosted on Amazon S3 from a different domain. Follow these steps:

• Create an Amazon S3 Bucket: In the AWS Management Console, navigate to Amazon S3 and create a new bucket. Choose a unique name and configure optional settings like region and access control. Note the bucket name, as we’ll use it in our React app.
• Define CORS Configuration: Add a CORS configuration to your bucket to enable cross-origin requests. Use the provided JSON snippet, which allows all HTTP methods (GET, HEAD, PUT, POST, DELETE) from any origin with specific exposed headers and a maximum cache age of 3000 seconds.

Step 1: To create a bucket, please refer to my previous blog.

Step 2: Select Bucket and click on Permission

Step 3: In Cross-origin resource sharing (CORS), click on edit, paste the below policy, and click save changes.

Initializing a React App and Installing Packages

With the backend infrastructure in place, it’s time to create a new React app and install the necessary packages for seamless integration.

• Create a React App: Open your terminal and run the command npx create-react-app my-app to create a new React app named “my-app.” Change into the app directory using cd my-app.
• Start the Development Server: Launch the development server by executing npm start in the terminal. This will open your React app in a browser window.
• Install AWS Amplify: To use AWS Amplify in your React app, install the library by running npm install aws-amplify.
• Install React Router Dom: React Router Dom allows us to implement routing in our React app. Install it with the command npm install react-router-dom.
• Install TypeScript: To enhance the development experience and add type safety, it’s recommended to use TypeScript. Install it with the command npm install –save-dev @types/react-router-dom.

Advantages

1. Seamless User Authentication: Integrating Amazon Cognito with the React app enables smooth user authentication and management. Users can securely sign up and log in, and Amazon Cognito’s built-in features, like multi-factor authentication and email/phone verification, enhance the overall application security.
2. Secure Cloud Storage: Amazon S3 offers a scalable and secure cloud storage solution. Utilizing Amazon S3 to store application assets and data ensures that user data is stored safely and accessible only to authorized users.
3. Cross-Origin Resource Sharing (CORS): Implementing CORS for the Amazon S3 bucket allows secure cross-origin requests. This permits the React app hosted on one domain to interact with Amazon S3 resources hosted on another while maintaining strict control over allowed origins, methods, and headers.
4. User-Friendly Dashboard: React’s reputation for building interactive and user-friendly web applications enables the creation of a responsive and intuitive dashboard, providing an enjoyable user experience.
5. Scalability and Performance: AWS services, including Amazon Cognito and Amazon S3, are designed for high scalability and performance. As the user base grows, the infrastructure can handle increased traffic and demand without compromising the application’s responsiveness.
6. AWS Integration: Leveraging AWS services like Amazon Cognito and Amazon S3 offers seamless integration with other AWS offerings. This integration allows for extending the functionality of the Amazon S3 Dashboard with a wide range of additional services, such as AWS Lambda, AWS DynamoDB, and more.
7. TypeScript Support: Integrating TypeScript in the development process enhances the development experience and ensures type safety, reducing the likelihood of runtime errors and improving code quality.

Conclusion

The integration of AWS Cognito adds a layer of security to your application, ensuring that only authenticated users can access the dashboard. The Amazon S3 bucket with CORS configuration allows the React app to interact with the Amazon S3 bucket securely.

In the next blog, we will delve deeper into React coding to create a more functional and interactive Amazon S3 dashboard. We’ll explore how to implement features like file upload, listing objects, and organizing data in the Amazon S3 bucket. Stay tuned for the exciting next chapter as we continue to enhance our Amazon S3 dashboard with even more features and functionalities.

Drop a query if you have any questions regarding Amazon S3, AWS Cognito and we will get back to you quickly.

About CloudThat

CloudThat is an official AWS (Amazon Web Services) Advanced Consulting Partner and Training partner, AWS Migration Partner, AWS Data and Analytics Partner, AWS DevOps Competency Partner, Amazon QuickSight Service Delivery Partner, AWS EKS Service Delivery Partner, and Microsoft Gold Partner, helping people develop knowledge of the cloud and help their businesses aim for higher goals using best-in-industry cloud computing practices and expertise. We are on a mission to build a robust cloud computing ecosystem by disseminating knowledge on technological intricacies within the cloud space. Our blogs, webinars, case studies, and white papers enable all the stakeholders in the cloud computing sphere.

To get started, go through our Consultancy page and Managed Services Package, CloudThat’s offerings.