如何使用 ReactJS 使用 Firebase 发送电子邮件验证链接？

在本文中，我们将了解如何使用 React.js 使用 Firebase 发送电子邮件验证链接。

用于设置 Firebase（为您的 React 项目设置 Firebase）。

创建 React 应用程序并安装模块。

• 第 1 步：使用以下命令创建一个 React myapp。

  npx create-react-app myapp

• 第 2 步：创建项目文件夹后，即 myapp，使用以下命令移动到该文件夹。

  cd myapp

项目结构：项目结构将如下所示。

第 3 步：创建 ReactJS 应用程序后，使用以下命令安装 firebase 模块。

npm install firebase@8.3.1 --save

第 4 步：转到您的 firebase 仪表板并创建一个新项目并复制您的凭据。

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

第 5 步：现在通过您的登录方法启用使用电子邮件和密码登录。

示例：通过使用以下代码创建 firebase.js 文件，将 firebase 初始化到您的项目中。

firebase.js

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

现在将一些代码写入您的App.js文件。

应用程序.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 (
    

      


      {setemail(e.target.value)}}>
      
      


      {setpassword(e.target.value)}}>
      
      


      Sign-up
    
  );
}
  
export default App;

输出 ：

在这里，当您单击注册按钮时，验证电子邮件将发送到提供的电子邮件地址。

这是验证邮件。