¿Cómo enviar un enlace de verificación de correo electrónico con firebase usando ReactJS?

En este artículo vamos a ver cómo enviar un enlace de verificación de correo electrónico con firebase usando React.js. 

Para configurar una base de fuego ( Configure una base de fuego para su proyecto React ).

Creación de la aplicación React e instalación del módulo.

• Paso 1: Cree una React myapp usando el siguiente comando.

  npx create-react-app myapp

• Paso 2: después de crear la carpeta de su proyecto, es decir, myapp, muévase a ella con el siguiente comando.

  cd myapp

Estructura del proyecto: La estructura del proyecto se verá así.

Paso 3: después de crear la aplicación ReactJS, instale el módulo firebase con el siguiente comando.

npm install firebase@8.3.1 --save

Paso 4: Vaya a su panel de Firebase y cree un nuevo proyecto y copie sus credenciales.

const firebaseConfig = {
      apiKey: "your api key",
      authDomain: "your credentials",
      projectId: "your credentials",
      storageBucket: "your credentials",
      messagingSenderId: "your credentials",
      appId: "your credentials"
};

Paso 5: ahora habilite el inicio de sesión con correo electrónico y contraseña desde su método de inicio de sesión.

Ejemplo: inicialice firebase en su proyecto creando el archivo firebase.js con el siguiente código.

import firebase from 'firebase';
  
const firebaseConfig = {
    // Your credentials
};
  
firebase.initializeApp(firebaseConfig);
var auth = firebase.auth();
export default auth;

Ahora escriba algo de código en su archivo  App.js.

import auth from './firebase';
import './App.css';
import {useState} from 'react';
  
function App() {
  const [email , setemail] = useState('');
  const [password , setpassword] = useState('');
  const signup = ()=>{
      auth.createUserWithEmailAndPassword(email , password)
      .then((userCredential)=>{
          // send verification mail.
        userCredential.user.sendEmailVerification();
        auth.signOut();
        alert("Email sent");
      })
      .catch(alert);
  }
    
  
  return (
    <div className="App">
      <br/><br/>
      <input type="email" placeholder="Email" 
      onChange={(e)=>{setemail(e.target.value)}}>
      </input>
      <br/><br/>
      <input type="password" placeholder="password" 
      onChange={(e)=>{setpassword(e.target.value)}}>
      </input>
      <br/><br/>
      <button onClick={signup}>Sign-up</button>
    </div>
  );
}
  
export default App;

Producción : 

Aquí, cuando hace clic en el botón de registro, el correo electrónico de verificación se envía a la dirección de correo electrónico proporcionada.

Aquí está el correo de verificación.