DEV Community

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

Posted on

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.

Top comments (0)