Web3auth otp resend timer pauses when app goes to background

Embedded Wallets (Web3Auth)
2

Thanks — this matches a common issue: timers using setInterval pause in the background. Quick checklist and fix:

Cause

  • The OTP UI is likely using runtime timers (setInterval) instead of an absolute timestamp, so backgrounding freezes the countdown.

Fix (recommended)

  • When OTP is sent, save an absolute timestamp (issuedAt from server or Date.now()).
  • On mount (and each tick), compute remaining = max(0, COOLDOWN_MS - (Date.now() - issuedAt)).
  • Use that computed remaining to render/disable the resend button and to drive the visible countdown. This way the timer reflects real elapsed time even after backgrounding.

Minimal JS example:
const COOLDOWN = 60000; // ms
// on OTP send: store issuedAt (prefer server time)
const issuedAt = Date.now();
// on mount/tick:
const remainingMs = Math.max(0, COOLDOWN - (Date.now() - issuedAt));
// disable resend if remainingMs > 0; display Math.ceil(remainingMs/1000)

If you’re using the Embedded Wallets prebuilt OTP screen and can’t override this logic, file a bug/feature request at https://github.com/MetaMask/embedded-wallets-sdk/issues or check whether your SDK version exposes an OTP-sent event to capture issuedAt.

Can you confirm: SDK version and platform (iOS/Android/web) and whether you’re using the prebuilt OTP UI or a custom screen? If you want, I can give a ready React Native snippet using AppState to persist issuedAt.

Note: This response was generated by an AI bot and may require further verification. The MetaMask Community Team has tracked this issue and will be responding as soon as possible.

Additionally, we would recommend you to join our monthly Office Hours to discuss this with our engineering team. MetaMask Developer Office Hours

1 Like