Building an Amazon S3 Dashboard with User Authentication and React Components

Introduction

In today’s digital landscape, ensuring data security and providing user-friendly interfaces are essential to any successful web application.

In Part 1 of our blog series, we embarked on a journey to construct an Amazon S3-powered dashboard using React, leveraging the capabilities of Amazon Simple Storage Service (S3) for reliable and scalable cloud storage. Additionally, we bolstered our application’s security by seamlessly incorporating Amazon Cognito to handle user authentication.

As we transition to Part 2, we stand on the cusp of bridging the divide between theory and hands-on execution. The foundation has been meticulously laid – Amazon Cognito is set up, CORS configurations are in place, and our React environment is primed. This section will create a login and signup page and connect to Amazon Cognito from the front end.

Steps for Creating Amazon S3 Dashboard with User Authentication and React Components

Step 1 – Create an AWS IAM User with the Appropriate Policy

Ensuring data flow security within our React application, Amazon Cognito authentication and Amazon S3 bucket storage is of utmost significance. We focus on establishing well-defined AWS IAM users equipped with custom policies to achieve this. These policies will be meticulously crafted to bestow the permissions required for users to seamlessly and securely engage with Amazon Cognito and Amazon S3 services.

Step 2 – Storing Credentials in credentials.env

To securely manage your application’s configuration, create a credentials.env file inside your React application. Store essential information such as UserPoolId, ClientId, identityPoolId, and region as environment variables.

Step 3 – Creating Authentication Pages

Let’s start building the authentication functionality using React components.

login.js
The login.js component is a fundamental part of your Amazon S3 Dashboard and handles user authentication using Amazon Cognito. This component allows users to securely log in to their accounts, granting them access to their personalized dashboard and stored data.

Implement user login functionality using Amazon Cognito

import React, { useState } from 'react';
import { CognitoUser, AuthenticationDetails } from 'amazon-cognito-identity-js';
import credentials from '../credentials';
const LoginPage = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const onSubmit = event => {
    event.preventDefault();
    // Implement Cognito user authentication here
  };
  return (
    <div>
      {/* Login form */}
    </div>
  );
};
export default LoginPage;

import React, { useState } from 'react';

import { CognitoUser, AuthenticationDetails } from 'amazon-cognito-identity-js';

import credentials from '../credentials';

const LoginPage = () => {

const [email, setEmail] = useState('');

const [password, setPassword] = useState('');

const onSubmit = event => {

event.preventDefault();

// Implement Cognito user authentication here

};

return (

<div>

{/* Login form */}

</div>

);

};

export default LoginPage;

User Login Flow:

Input Credentials: When users access the login page, they encounter a straightforward form containing fields to enter their email and password. These credentials serve as the means for user authentication.
Cognito User Object: Upon inputting their credentials and selecting the “Login” button, the component generates a CognitoUser object. This object serves as a representative of the user and facilitates interactions with Amazon Cognito for authentication procedures.
Authentication Details: The Authentication Details object is established using the provided email and password. This object becomes the foundation for initiating the authentication process with Amazon Cognito.
Authenticate User: The authentication process is initiated by invoking the authenticateUser method of the CognitoUser object.

Note: The above image of the login has the extra feature of forget password, which is not mentioned in the code for the full code.
signup.jsIn this section, we’ll discuss the signup.js component, which is pivotal in allowing users to register and create accounts for accessing the Amazon S3 dashboard. By integrating with Amazon Cognito, the signup process becomes secure and seamless.

Allow users to sign up using Amazon Cognito

import React, { useState } from 'react';
import credentials from '../credentials';
const SignupPage = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const onSubmit = event => {
    event.preventDefault();
    // Implement Cognito user signup here
  };
  return (
    <div>
      {/* Signup form */}
    </div>
  );
};
export default SignupPage;

import React, { useState } from 'react';

import credentials from '../credentials';

const SignupPage = () => {

const [email, setEmail] = useState('');

const [password, setPassword] = useState('');

const onSubmit = event => {

event.preventDefault();

// Implement Cognito user signup here

};

return (

<div>

{/* Signup form */}

</div>

);

};

export default SignupPage;

Signup Flow:

User Registration Process Using Amazon Cognito and Signup.js in a React App:

User registration is a critical aspect of web applications. Utilizing the capabilities of Amazon Cognito along with the signup.js component, a seamless and secure user signup process can be established within a React app. Let’s explore the step-by-step breakdown of this signup procedure:

User Input: Upon accessing the signup page, users input their preferred email address and a strong password. React’s state management captures these inputs in real-time as users type into the designated fields.
Form Submission: Triggered upon clicking the “Sign Up” button, the onSubmit function takes charge of the form submission. This function allows the signup process to be handled programmatically by intercepting the default form submission behavior.
Integration with Amazon Cognito – credentials.signUp: Inside the onSubmit function, the signup process is initiated through a call to the signUp function from the credentials object.
Email Verification and Welcome Email: Amazon Cognito’s configuration enables the inclusion of email verification within the signup flow. Following user submission, Amazon Cognito dispatches a verification email to the provided email address.
Heightened Security – Password Policies: Amazon Cognito offers the flexibility to enforce stringent password policies. This encompasses stipulations such as minimum password length, inclusion of special characters, and additional criteria.

Pioneers in Cloud Consulting & Migration Services

Reduced infrastructural costs
Accelerated application deployment

Get Started

Advantages

Modular Design: Employing React components for authentication pages fosters a well-structured and neat codebase, streamlining the process of maintenance and updates.
Efficient User Control: Authentication components provide secure avenues for users to manage their accounts, perform logins, and recover passwords efficiently.
Uniform User Experience: The component-based methodology ensures a seamless and consistent user experience throughout the authentication journey.
Heightened Security: Using Amazon Cognito and robust AWS services like Amazon S3 significantly bolsters the overall security posture of the application.

Conclusion

We have achieved important milestones in setting up user authentication and laying the foundation for further enhancements. In the next part, we’ll focus on improving user experience with account.js and creating a feature-rich Amazon S3 dashboard.

These developments are crucial for various applications, such as secure access to cloud storage services in the real world. They enable users to manage their files efficiently and contribute to a safer and more user-friendly digital environment.

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

Making IT Networks Enterprise-ready – Cloud Management Services

Accelerated cloud migration
End-to-end view of the cloud environment

Get Started

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.

FAQs

1. Why store credentials in a separate file?

ANS: – Storing credentials in a distinct file, such as credentials.env, offers a valuable security advantage by detaining sensitive information from the main codebase. This approach enhances overall security measures and streamlines the management of configurations.

2. How does the Amazon Cognito authentication process work?

ANS: – Amazon Cognito employs the OAuth 2.0 framework for its authentication mechanism. When a user initiates a login, Cognito generates tokens that temporarily access specific AWS resources, including Amazon S3 buckets.

3. What is the purpose of the Forgot Password functionality?

ANS: – The Forgot Password feature serves a critical purpose by allowing users to reset their passwords in situations where they’ve forgotten them. This feature strikes a balance between user convenience and maintaining the necessary security protocols.