title: Not able to resend OTP using firebase auth in ReactJS
body: <h2>How do I resend OTP using firebase authentication?</h2>
  <p><strong>I have 2 pages for Login:</strong></p>
  <pre><code>- Login Page (user enters their name and phone Number) [working fine] {route='/'}
  
  - OTP page user enter their OTP [not able to resend OTP] {route='/otp'}
  </code></pre>
  <h4>1. Login Page</h4>
  <ul>
  <li>Function after user enters their name and phoneNumber.</li>
  <li>I used invisible recaptcha.</li>
  </ul>
  <pre class="lang-js prettyprint-override"><code>const  onSignInSubmit  = (e) =&gt; {
  e.preventDefault();
  
  window.recaptchaVerifier  =  new  firebase.auth.RecaptchaVerifier('sign-in-button', {
  'size': 'invisible',
  'callback': (response) =&gt; {
  // reCAPTCHA solved, allow signInWithPhoneNumber.
  console.log(&quot;Recaptca varified&quot;)
  },
  defaultCountry: &quot;IN&quot;
  })
  
  const  phoneNumber  =  `+91${userphoneNumber}`;
  if(phoneNumber.length&lt;10  ||  userName.length&lt;4) return;
  
  const  appVerifier  =  window.recaptchaVerifier;
  
  firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
  .then((confirmationResult) =&gt; {
  // SMS sent. Prompt user to type the code from the message, then sign the
  
  console.log(confirmationResult);
  
  window.confirmationResult  =  confirmationResult;
  console.log(&quot;OTP has been sent&quot;);
  //redirect to otp
  
  history.push('/otp');
  }).catch((error) =&gt; {
  // Error; SMS not sent
  console.log(error);
  console.log(&quot;SMS not sent&quot;);
  });
  }
  </code></pre>
  <p>JSX</p>
  <pre class="lang-js prettyprint-override"><code>&lt;form onSubmit={onSignInSubmit}&gt;
      &lt;input type='text'  value={userName}  setValue={setUserName}  placeholder='Full Name'/&gt;
      &lt;input type='text'  value={userphoneNumber}  setValue={setUserPhoneNumber}  placeholder='Mobile Number'/&gt;
      &lt;Button  type='submit'&gt;Login&lt;/Button&gt;
      &lt;div  id=&quot;sign-in-button&quot;&gt;&lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <h4>2. OTP Page</h4>
  <ul>
  <li>Function after user clicks on resend OTP.</li>
  </ul>
  <pre class="lang-js prettyprint-override"><code>const  resendOTP=()=&gt;{
      firebase.auth().signInWithPhoneNumber(userDetails.phoneNumber,window.recaptchaVerifier)
      .then((confirmationResult) =&gt; {
      // SMS sent. Prompt user to type the code from the message, then sign the
      console.log(confirmationResult);
      window.confirmationResult  =  confirmationResult;
      console.log(&quot;OTP has been resent&quot;);
      }).catch((error) =&gt; {
  
      // Error; SMS not sent
      console.log(error);
      console.log(&quot;SMS not sent&quot;);
      });
  }
  </code></pre>
  <p>JSX</p>
  <pre class="lang-js prettyprint-override"><code>&lt;form&gt;
      &lt;div onClick={resendOTP}&gt;Resend OTP?&lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p>After I click on resend I get this error</p>
  <p><a href="https://i.stack.imgur.com/Jf6Jx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Jf6Jx.png" alt="enter image description here" /></a></p>
  <p>Can you help me please?</p>