How to Set a Countdown Timer When Sending a Verification Code

Introduction

Implement a user-friendly verification process on your registration or login page by adding a countdown timer to the “Send Verification Code” button.

Steps to Set Up a Countdown Timer

Initialize Countdown Data

• Add a page variable of type Integer (e.g., countdown).
• Set its initial value to 60 on page load (representing 60 seconds).

Add Countdown Variable	Initialize Countdown

Set Up a Scheduled Job

• Configure a scheduled job with a trigger interval of 1000 milliseconds (1 second).
• This job will decrement the countdown value every second.

Configure the Send Verification Code Button

• Use a Conditional Container for the button with two sub-containers:
  • Not Sent State:
    • Place a button labeled “Send Verification Code.”
    • Set the action to send the code (choose the appropriate verification type).
    • On success, show a prompt, switch to the “Sent” state, and start the scheduled job.
  • Sent State:
    • Use a text component bound to the countdown variable to display the remaining time.

Conditional Container Setup	Send Code Button	Countdown Display

Configure Scheduled Task Logic

• When countdown reaches 0:
  • Stop the scheduled job.
  • Reset the countdown variable.
  • Switch the conditional container back to the “Not Sent” state.

• When countdown > 0:
  • Subtract 1 from the countdown variable using a formula.
  • Update the page data to reflect the new countdown value.