**firebase.js**文件可以包含以下代码：

import {initializeApp} from 'firebase/app'
import {getAuth} from 'firebase/auth'
import {getFirestore} from 'firebase/firestore'

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: import.meta.env.VITE_APIKEY,
  authDomain: import.meta.env.VITE_AUTHDOMAIN,
  projectId: import.meta.env.VITE_PROJECTID,
  storageBucket: import.meta.env.VITE_STORAGEBUCKET,
  messagingSenderId: import.meta.env.VITE_MESSAGINGSENDERID,
  appId: import.meta.env.VITE_APPID
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

export const auth = getAuth(app)
export const db = getFirestore(app)

这段代码在我们的React.js代码库中初始化Firebase，并初始化并导出我们的Firebase认证和数据库，以便在项目的其他地方可以访问它们。

**AuthContext.jsx**组件稍微复杂一些：

import React, { useContext, useState, useEffect } from 'react'
import { auth, db } from '../../firebase'
import { signInWithEmailAndPassword, createUserWithEmailAndPassword, signOut, onAuthStateChanged } from 'firebase/auth'

const AuthContext = React.createContext()

export function useAuth() {
    // 创建一个useAuth hook，以便在整个应用程序中访问上下文
    return useContext(AuthContext)
}

export function AuthProvider({ children }) {
    // 为我们的应用程序创建认证包装器组件
    // 可以选择定义一个userData状态并添加到上下文中
    const [currentUser, setCurrentUser] = useState(null)
    

    function signup(email, password) {
        return createUserWithEmailAndPassword(auth, email, password)
    }

    function login(email, password) {
        return signInWithEmailAndPassword(auth, email, password)
    }

    function logout() {
        return signOut(auth)
    }

    useEffect(() => {
        const unsubscribe = onAuthStateChanged(auth, user => {
            // 这里可以从Firebase获取通用用户数据
            setCurrentUser(user)
        })
        return unsubscribe
    }, [])

    const value = {
        currentUser,
        signup,
        logout,
        login
    }

    return (
        <AuthContext.Provider value={value}>
            {children}
        </AuthContext.Provider>
    )
}

这个组件有两个函数，一个创建一个认证钩子，我们可以使用它来在整个应用程序中访问认证状态，第二个是一个认证包装器组件，我们将用它来封装整个应用程序。

我们还定义了一些逻辑来监视认证状态，以便我们的应用程序对用户的不同认证状态做出响应。我们定义了三个函数来演示主要的认证方法，但是可以创建更多类似的函数。最后，我们将认证状态和方法作为上下文传递给整个应用程序，允许它们在任何组件中访问。

用户的登录状态巧妙地存储在cookie中，因此即使页面刷新，认证状态也可以在一段时间内保持，而无需用户再次登录！

为了保护我们的应用程序安全，我们将密钥保存在一个**.env**文件中。可以按照以下方式初始化该文件：

VITE_APIKEY=
VITE_AUTHDOMAIN=
VITE_PROJECTID=
VITE_STORAGEBUCKET=
VITE_MESSAGINGSENDERID=
VITE_APPID=

我们将很快在这里填写实际的密钥值，然后在firebase.js文件中访问它们。

现在，我们需要初始化一个登录组件来处理用户的注册和登录功能：

import React, { useState } from 'react'
import { useAuth } from '../context/AuthContext'

export default function Login() {
    const [createAccount, setCreateAccount] = useState(false)
    const [userCreds, setUserCreds] = useState({ email: '', password: '' })

    const { signUp, login } = useAuth()

    function updateEmail(e) {
        setUserCreds({ ...userCreds, email: e.target.value })
    }

    function updatePassword(e) {
        setUserCreds({ ...userCreds, password: e.target.value })
    }

    function handleSubmit(e) {
        e.preventDefault()
        // 如果表单未完成，则阻止注册
        if (!userCreds.email || !userCreds.password) { return }

        if (createAccount) {
            // 建议在此处添加密码正则表达式检查
            console.log('注册中')
            signUp(userCreds.email, userCreds.password)
        } else {
            console.log('登录中')
            login(userCreds.email, userCreds.password)
        }
    }

    return (
        <div>
            <input placeholder='电子邮件' value={userCreds.email} onChange={(e) => {
                updateEmail(e)
            }}></input>
            <input placeholder='密码' type='password' value={userCreds.password} onChange={(e) => {
                updatePassword(e)
            }}></input>
            <button onClick={handleSubmit}>
                <p>提交</p>
            </button>
            <button onClick={() => setCreateAccount(!createAccount)}>
                <p>{createAccount ? '登录' : '注册'}</p>
            </button>
        </div>
    )
}

我们巧妙地通过调用useContext()钩子并从中解构方法来访问这两个方法！在组件的JSX中，我们创建了两个输入字段，分别用于电子邮件和密码，一个用于提交表单的按钮，一个用于在注册和登录状态之间切换的按钮。

最后，我们可以为已登录的用户显示一个仪表板组件 :P

import React from 'react'
import { doc, increment, serverTimestamp, setDoc } from "firebase/firestore";
import { useAuth } from '../context/AuthContext'
import { db } from '../../firebase';

export default function Dashboard() {
    const { logout, currentUser } = useAuth()

    async function handleIncrement() {
        const userRef = doc(db, 'users', currentUser.uid);
        await setDoc(userRef, { counter: increment(1), timestamp: serverTimestamp() }, { merge: true });
    }

    return (
        <div>
            <p> 你好世界，欢迎来到仪表板</p>
            <button onClick={handleIncrement}>增加数据库</button>
            <button onClick={logout}>登出</button>
        </div>
    )
}

仪表板还有一个增加计数器，以演示我们如何通过将用户ID与数据库连接起来，修改特定于用户的信息。此外，它还包含一个用于用户希望从他们的帐户注销的注销函数。

你可以在这里阅读有关使用Firebase/Firestore进行CRUD操作的更多信息：

• https://firebase.google.com/docs/firestore/manage-data/add-data