Passwordless | Add countdown timer to "send again" functionality

[coldlink]

What does this change?

A number of users are complaining that they're getting multiple passcodes to their email, each time with a different code, and the original code no longer valid.

We think this is due to delays in the user receiving the email

So rather than allow the user to resend the passcode straight away, we added a countdown timer so that they can only do it after a specificed amount of time, currently set to 30 seconds.

We've only enabled this for passcode users, as the same problem doesn't occur with links.

We also update the MainForm component to take a disabled value.

A new hook provides the countdown functionality on the client side: useCountdownTimer
This hook takes a durationInSeconds parameter to start the countdown, and returns the timeRemaining in seconds, and an isComplete boolean.

This is then integrated withing the EmailSentInformationBox component, which houses the "send again" functionality. Where it takes a new sendAgainTimerInSeconds prop in order to control it.

In turn the same thing was applied to PasscodeEmailSent component which uses the EmailSentInformationBox, followed by the pages that use the PasscodeEmailSent component.

Finally in order to set the timer, rather than harcode the value everywhere, we add it to the ClientState and PageData objects. This allows us to only set it in one place (through getRequestState), but also lets us modify the value specifically for tests, i.e Cypress. A getPasscodeSendAgainTimer helper function helps with this.

Video
Screen.Recording.2025-01-27.at.13.04.40.mov

Tested

• DEV
• CODE

[pvighi]

maybe a silly question because I don't know cypress that well:

is there any reason for this to be called cypress-mock-state and not something that refers to the timer ?

[coldlink]

It's because it's a pattern we use already in Gateway to customise behaviour on the sever based on Cypress tests.

So we set a cypress-mock-state cookie in other tests that also modifies behaviour is other ways only when it exists. Which is useful for testing edge case scenarios.