我该如何克服 Firebase：错误（auth/invalid-api-key）

Question

我正在尝试学习一些 React 身份验证。但是，我遇到了一个我无法解决的问题。我不断收到 Firebase：“错误（auth/invalid-api-key）”。我确信 API 密钥是正确的，因为我检查了 1,000,000 次。我访问了许多网站和许多视频以尝试解决此问题，但没有找到答案。下面我粘贴我所做的：

火力基地：

import firebase from "firebase/compat/app"
import "firebase/compat/auth"

const app = firebase.initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID
})

export const auth = app.auth()
export default app

在我想使用 firebase 属性的 AuthContexts 中：

import React, {useContext, useState, useEffect} from 'react'
import { auth } from '../firebase'

const AuthContext = React.createContext()

export function useAuth(){
        return useContext(AuthContext)
}

    export function AuthProvider({children }){
        const [currentUser, setCurrentUser] = useState()
        
        function signup(email, password){
            auth.createUserWithEmailAndPassword(email, password)
        }
        useEffect(() => {
            const unsubscribe = auth.onAuthStateChanged(user => {
                setCurrentUser(user)
            })
            return unsubscribe
        }, [])
        
    
        const value = {
            currentUser,
            signup,
        }
        return (
            <AuthContext.Provider value = {value}>
            </AuthContext.Provider>
        )
    }

这是我的 package.json：

{
  "name": "react-authentification",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "firebase": "^9.1.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

在您放置 json 文件的实时数据库中，除了数据之外，还有一个规则选项卡。将 read 和 write 的值更改为 true。 它会让你编辑数据。

{
  "rules": {
    ".read": "true",  // 2021-8-11
    ".write": "true",  // 2021-8-11
  }
}