title: Is there a way to only add verified email addresses to Firebase authentication console (React JS)?
body: <p>I'm trying to create a Firebase authentication system in my React web app. I know how to register an account and I know how to send a verification email out. Upon registration it sends the verification email which is fine, but the account gets added to the Firebase console database before the user has even verified it. I want it to be such that only verified accounts are added to the database.</p>
  <p>Here is my code:</p>
  <pre><code>import React, { useState, useEffect, useRef } from 'react'
  import './join.css'
  import { Link, useNavigate } from 'react-router-dom'
  import { auth } from '../firebase'
  import { createUserWithEmailAndPassword, onAuthStateChanged, sendEmailVerification } from &quot;firebase/auth&quot;
  
  export default function Join() {
      const [registerEmail, setRegisterEmail] = useState('');
      const [registerPassword, setRegisterPassword] = useState('');
      const [confirmPassword, setConfirmPassword] = useState('');
      const [user, setUser] = useState({});
      const verificationMessage = useRef();
      useEffect(() =&gt; {
          onAuthStateChanged(auth, (currentUser) =&gt; {
              setUser(currentUser);
          });
  
      }, [])
      const navigate = useNavigate();
  
      const register = async () =&gt; {
          try {
              const user = await createUserWithEmailAndPassword(auth, registerEmail, registerPassword);
              console.log(user);
              
          } catch (error) {
              console.log(error.message);
          }
      }
  
      const handleSubmit = event =&gt; {
          if (registerPassword === confirmPassword) {
  
              sendEmailVerification(auth.currentUser);
              verificationMessage.current.style.display = 'block';
              register();
              event.preventDefault();
          }
          else {
              alert('Passwords do not match, please try again!');
              event.preventDefault();
          }
      }
  
      return (
          &lt;&gt;
          &lt;div className=&quot;signup-div&quot;&gt;
              &lt;h2&gt;Sign Up&lt;/h2&gt;
              &lt;form onSubmit={handleSubmit}&gt;
                  &lt;fieldset&gt;
                      &lt;label className='labels'&gt;Email:&lt;/label&gt;&lt;br /&gt;
                      &lt;input placeholder='Please enter your email' type=&quot;email&quot; value={registerEmail} onChange={e =&gt; setRegisterEmail(e.target.value)} required /&gt;
                  &lt;/fieldset&gt;
                  &lt;fieldset&gt;
                      &lt;label className='labels'&gt;Set Password:&lt;/label&gt;&lt;br /&gt;
                      &lt;input placeholder='Create password' type=&quot;password&quot; value={registerPassword} onChange={e =&gt; setRegisterPassword(e.target.value)} required /&gt;
                  &lt;/fieldset&gt;
                  &lt;fieldset&gt;
                      &lt;label className='labels'&gt;Re-type password to confirm:&lt;/label&gt;&lt;br /&gt;
                      &lt;input placeholder=&quot;Confirm password&quot; type=&quot;password&quot; value={confirmPassword} onChange={e =&gt; setConfirmPassword(e.target.value)} required /&gt;
                  &lt;/fieldset&gt;
                  &lt;button type=&quot;submit&quot;&gt;Sign Up&lt;/button&gt;
              &lt;/form&gt;
              &lt;div&gt;
                  Already have an account? &lt;Link to=&quot;/login&quot;&gt;Log In&lt;/Link&gt;
              &lt;/div&gt;
          &lt;/div&gt;
           &lt;div className='verification-message' ref={verificationMessage}&gt;Welcome aboard! Please check your inbox and click the link in our verification email to verify your account. This could take upto a few minutes to arrive.&lt;/div&gt;
          &lt;/&gt;
      )
  }
  
  </code></pre>