Secure OTP Login System with Daily Session, Email Delivery, and Expiry Progress Bar

[Amit3ee]

Enhance the login authentication flow to replace static PINs with an OTP-based secure system for Apps Script web apps. Requirements:

• Add a 'Generate OTP' button below the OTP input boxes in the login view.
• When clicked, generate a random 6-digit OTP (formatted as XXX-XXX, e.g., 365-894) using a cryptographically secure method.
• Send the OTP via email using GmailApp.sendEmail to a specified address (e.g., [email protected]).
• OTP is valid for 3 minutes. Show a progress bar below the button, visually indicating the countdown until expiry.
• When the correct OTP is entered, automatically log in the user—no extra button click required.
• Maintain session persistence for the rest of the day (until midnight local time) on that device/browser using localStorage (client-side) and/or Apps Script PropertiesService/CacheService (server-side). Require OTP again the next day.
• If OTP is incorrect or expired, show an error and prompt for new OTP generation.
• Remove the login button; only 'Generate OTP' should be present below input boxes.
• Cover both server-side (Apps Script, code.gs) and client-side (HTML/JS, index.html) changes.

Acceptance Criteria:

• OTP generation, delivery, validation, and expiry logic is robust and secure.
• Session persists for a day per device/browser.
• UI shows only the 'Generate OTP' button and a 3-min expiry progress bar after OTP creation.
• Code is clear and maintainable, using Apps Script and web technologies.

Technical Notes:

• Use GmailApp for email delivery.
• Use CacheService/PropertiesService for OTP/session state server-side.
• Use localStorage and time zone/day logic for client session persistence.
• Use cryptographically secure OTP generation methods.
• Carefully handle time zones and session expiry at midnight.
• Ensure UI/UX clarity and error handling.