如何在 React JS 中连接 Firebase Auth 和 Firestore 数据库

第 1 步：

在仪表板上，单击“恢复数据库”。

然后，您将看到此弹出窗口。选择所需的模式，然后单击下一步，但在本文中，我将使用生产模式。

接下来，选择您的 Firestore 位置。我将使用 nam5（美国）。选择您的并单击启用。

步骤 2 ：

之后，将出现此页面。导航到“规则”。

您将看到以下规则：

rules_version = '2';
Service Cloud.firestore { match /databases/{database}/Documents { match /{document=**} {
 

 allow read， write： if false;
    }
  }
}

将上述规则更改为：

rules_version = '2';
Service Cloud.Firestore { match /databases/{database}/Documents { match /{document=**} {
 

 allow read， write： if request.auth ！= null;
    }
  }
}

第 3 步：

我假设您已经创建了“firebase-config.js”文件。在下面的代码中，您将看到我从“firebase/firestore”导入了“getFirestore”，然后我创建并导出了一个名为“db”的变量。

从“Firebase/app”导入 { initializeApp };
从“firebase/auth”导入 { getAuth };
从“Firebase/Firestore”导入 { getFirestore };
TODO：为要使用的 Firebase 产品
添加 SDK const firebaseConfig = { ............
.............
 .........................
 .........................
 .........................
};
Initialize Firebaseexport const app = initializeApp（firebaseConfig
）;
export const auth = getAuth（app）;
export const db = getFirestore（app）

第 4 步：

在您的注册组件上，从 firebase/firestore 导入文档 setDoc，然后导入“db”，即您在上面从 firebase-config 创建和导出的变量

从“firebase/firestore”导入 { doc， setDoc };
从  “../firebase-config”;

第五步：（最后一步）

在注册组合的“handleSubmit”函数中，在“try/then”块内创建一个变量。你可以随心所欲地命名它，但我将使用“userId”作为示例，并为其分配一个值Response.user.uid

const [fullName， setFullName] = useState<string>（“”）;
 const [email， setEmail] = useState<string>（“”）;
 const [password， setPassword] = useState<string>（“”）;
 const [dateOfBirth， setDateOfBirth] = useState<string>（“”）
 const [userName， setUsername] = useState<string>（“”）;


const handlesubmit = （） => {
 createUserWithEmailAndPassword（auth， email， password）
 .then（async （response） => {
 const userid = response.用户。UID;
 setTimeout（（） => {
 navigate（'/Homepage'）; }， 3000）;

 try { await setDoc（doc（db， “users”， userid）， {

 fullName： fullName， username： userName，
 email： email， dateOfBirth： dateOfBirth，


 }）; }
捕获 （e） {
 控制台。错误（“添加文档时出错：”， e）;
 }
 }）
 。catch（（错误） => {
 控制台。日志（错误）
                }
            });
    };

总之，在 React JS 中集成 Firebase Auth 和 Firestore 数据库使开发人员能够构建安全高效的 Web 应用程序。按照本文中概述的步骤操作，您可以无缝连接 Firebase 身份验证和 Firestore，从而打造卓越的用户体验。利用 Firebase 身份验证和实时数据库功能的强大功能来创建安全、响应迅速且动态的网络应用。

标签：JavaScript,编程,handleSubmit
来源：