useResend

useResend(options?) · UseResendReturn

この React フックは、ACUL 画面での「再送」操作 (例: 確認コードの再送) を管理します。

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

• クールダウンの残り時間を追跡します。
• 再送ボタンを無効にするべきかどうかを判別できます。
• 再送をすぐに実行するための 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 が変更されると、このフックは再送マネージャーを再初期化します。