adamjarretadamjarret
11

React Terraform Starter Kit

screenshot of React Terraform Starter Kit
react

Restrict access to S3 files with an AWS API Gateway custom authorizer

Github

Overview

This project offers a streamlined starting point for building AWS microservices, particularly focusing on the integration of API Gateway and custom authorizers to invoke Lambda functions. It sets up a functional architecture that allows for secure access to static files hosted on S3, demanding a password for downloads. With a robust backend configured via Terraform and a user-friendly interface created using React, Redux, and Material-UI, this setup provides a modern approach for developing web applications with solid security measures.

The operation is straightforward: the application utilizes cookies for user authentication, which not only simplify the user experience but also enhance the security of binary file downloads. By enabling cookie handling, the app allows protected resources like images and videos to be accessed similarly to public content, making it a versatile solution for developers looking to balance ease of use with stringent security protocols.

Features

  • Custom Authentication: Utilizes a Lambda function to verify passwords, returning a token that ensures security for user sessions.
  • S3 File Access Controls: Configures an S3 bucket with read-only access to a public folder, allowing for protected downloads of static files.
  • API Gateway Integration: Sets up an API Gateway that serves the web app and handles authentication requests seamlessly.
  • Cookie-Based Security: Employs cookies for session management, automatically sending tokens in requests for accessing protected content.
  • Terraform Configuration: Uses Terraform for managing AWS services, encouraging infrastructure as code for efficient configurations.
  • Modern Tech Stack: Built with industry-standard technologies including Webpack, React, Redux, and Material-UI for a responsive user interface.
  • Multi-Role Permissions: Promotes a security-conscious approach by suggesting multiple Terraform configurations for role-based access control.
  • Easy Setup: Provides clear prerequisites and installation instructions across platforms, simplifying the initial deployment process.
react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

Redux

Redux is a state management library for JavaScript apps that provides a predictable and centralized way to manage application state. It enables developers to write actions and reducers that update the state in response to user interactions, server responses, and other events, and can be used with a variety of front-end frameworks and back-end technologies.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.