useResend

useResend(options?) · UseResendReturn

この React フックは、ACUL の画面で「再送」アクション (例: 確認 code の再送) を管理します。

このフックでは、次のことができます。

• クールダウンの残り時間を追跡する
• 再送ボタンを無効にすべきかどうかを判定する
• 再送をすぐに実行する startResend 関数を利用する

​

パラメーター

options · UseResendOptions

timeoutSeconds や onTimeout などのオプション設定です。

​

戻り値

UseResendReturn

次を含むオブジェクトです。

• remaining — 次回の再送が可能になるまでの残り秒数。
• disabled — 現在再送がブロックされている場合は true。
• startResend — 再送をすぐに開始するための関数です (許可されている場合) 。

​

サポートされる画面

• email-identifier-challenge
• email-otp-challenge
• login-email-verification
• login-passwordless-email-code
• login-passwordless-sms-otp
• mfa-email-challenge
• mfa-sms-challenge
• mfa-voice-challenge
• phone-identifier-challenge
• reset-password-mfa-email-challenge
• reset-password-mfa-sms-challenge
• reset-password-mfa-voice-challenge

Example

import { useResend } from '@auth0/auth0-acul-react/mfa-sms-challenge';

export function ResendButton() {
  const { remaining, disabled, startResend } = useResend({
    timeoutSeconds: 30,
    onTimeout: () => console.log('You can resend again'),
  });

  return (
    <button onClick={startResend} disabled={disabled}>
      {disabled ? `Resend in ${remaining}s` : 'Resend Code'}
    </button>
  );
}

​

備考

• 基盤となる ResendControl には明示的な teardown メソッドがないため、このフックで手動のクリーンアップを行う必要はありません。
• timeoutSeconds または onTimeout が変更されると、このフックは再送マネージャーを再初期化します。