DEV Community

Cover image for StepFunctions Approval Action with One-Time HTML Page Confirmation
shimo for AWS Community Builders

Posted on

4

StepFunctions Approval Action with One-Time HTML Page Confirmation

In this blog post, I will discuss an improved architecture for approval actions using AWS StepFunctions, featuring a one-time HTML page for confirmation. This enhanced design aims to make the approval process more efficient and user-friendly.

Motivation

Previous version

In my previous blog post, (Lambda Function URLs for Approval Actions in StepFunctions), I explained how using Lambda function URLs can eliminate the need for API Gateway.

Previous architecture

This works well. But I'm thinking of making it more useful. For example, the email notification contained long URLs (like below), and users could accidentally approve or reject requests with a single click, without any confirmation.

Email to request approval or reject

Newer version

This time I added some resources to confirm with multiple steps. Here are the specifications of the new architecture.

Newer Architecture

  1. First Lambda Function

    • Sends an email to the user containing a URL to a one-time HTML page for approval actions.
    • Generates a unique HTML page for each approval action, accessible via S3 static hosting.
  2. User Interaction

    • Users access the HTML page and click either the "Approve" or "Reject" button, triggering the second Lambda function.
  3. Second Lambda Function

    • Reports the approval result to the StepFunctions.
    • Deletes the HTML page.

Workflow

  1. Start State Machine: When you start a state machine, an email is sent to the user.

Check email

Email

  1. Access Approval Page: By clicking the link in the email, users are directed to the one-time HTML page containing "Approve" and "Reject" buttons.

Access approval page

Appearance of approval or reject

  1. Confirmation: After clicking the "Approve" button, a confirmation message box appears.

Confirmation

Confirmation

By selecting OK, you can finally approve!

Summary

In this blog post, I introduced an improved approval action architecture using AWS StepFunctions. By incorporating a one-time HTML page for confirmation, users can avoid making accidental decisions and benefit from a more streamlined approval process.

Note: Please refer to my repository for the CDK code examples to explore this architecture further.

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Create a simple OTP system with AWS Serverless cover image

Create a simple OTP system with AWS Serverless

Implement a One Time Password (OTP) system with AWS Serverless services including Lambda, API Gateway, DynamoDB, Simple Email Service (SES), and Amplify Web Hosting using VueJS for the frontend.

Read full post

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay