面臨 firebase signInWithEmailAndPassword 問題

Question

我在firebase.com添加了一個項目，項目名為depthreactproject 后來，我激活了email驗證來測試這個signInWithEmailAndPassword。 后來我得到了配置文件並將其復制到我的項目中並嘗試測試登錄頁面。 另外，我使用 firebase 安裝到我的項目中 npm -i install firebase 測試這個。 我面臨一些問題。 我將此鏈接用於 firebase 參考https://firebase.google.com/docs/auth/web/start

下面是我的 Login.js

  import React, { useState } from 'react'
import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
//import {firebase} from './Firbase/firebase';


export default function Login() {
  const [isLoading, setIsLoading] = useState(false);
    function handleForm(e){
        setIsLoading(true);
        e.preventDefault();
        //console.log("submitted");
        const auth = getAuth();
        signInWithEmailAndPassword(auth, "krishna@email.com", "password")
        .then((userCredential) => {
              // Signed in 
            const user = userCredential.user;
            console.log("this is the handleForm UserCredentials"+ userCredential);
            console.log("this is the handleForm"+ user);
            // ...
        })

    }
    return ( 
      <div className="flex h-screen bg-gray-200">  
          <div className="m-auto w-1/3 text-white flex flex-wrap justify-center shadow-lg rounded-lg bg-gradient-to-br from-indigo-900 to-indigo-700">            
            <form className="m-5 w-10/12" onSubmit={handleForm}>
                <h1 className="w-full text-4xl tracking-widest text-center my-6">
                    Login
                </h1>  

                <div className="w-full my-6">
                  <input type="email"
                          className="p-2 rounded shadow w-full text-black"
                          placeholder="Email or Username"
                          name="email"/>
                </div>

                <div className="w-full my-6">
                  <input type="password"
                          className="p-2 rounded shadow w-full text-black"
                          placeholder="Password"
                          name="password"/>
                </div>

                <div className="w-full my-10">
                  <button type="submit"
                          className="p-2 rounded shadow w-full from-yellow-600 bg-yellow-400 text-black">
                    Login
                  </button>
                  
                </div>

            </form>  

          </div>
  
        </div> 
    );
  }

下面是我的 firebase 配置文件 firebase.js

// Import the functions you need from the SDKs you need
 import { initializeApp } from "firebase/app";
 import { getAuth } from "firebase/auth";
//import firebase from 'firebase';
//import {firebase} from "firebase";

// Your web app's Firebase configuration
    const firebaseConfig = {
        apiKey: "AIzaSyDSGb9hlNXuQ7MmKWofDXUfFHogdREMAuA",
        authDomain: "depthreactproject.firebaseapp.com",
        projectId: "depthreactproject",
        storageBucket: "depthreactproject.appspot.com",
        messagingSenderId: "176522789506",
        appId: "1:176522789506:web:bc1ccc31d95a5d221a6a9b"
    };
  
 

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
    export const auth = getAuth(app);
    // firebase.initializeApp(firebaseConfig);
    // export {firebase}

我正在添加屏幕截圖，在此，當我點擊登錄按鈕時，它應該捕獲憑據，即 static 已經在 login.js 中配置，但是當我更改某些行或注釋掉時，只有它是可見的，但具有 null 值，但我應該捕捉它。

Answer 1

// Login.js

import app from '../config/firebase'


// Login.js line 11
const auth = getAuth(app);
try {
  signInWithEmailAndPassword(auth, "krishna@email.com", "password").then(
     (userCredential) => {
          // Signed in
          alert("signed in")
          const user = userCredential.user;

          console.log("this is the handleForm" + user);
          // ...
        }
      );
    } 
   catch (err) {
      alert("error")
      document.getElementById("demo").innerHTML = err.message;
    }

您必須從firebase.js文件導入初始化的app並使用getAuth(app)開始使用身份驗證。

除了在登錄方法中傳遞krishna@email.com和password ，您可以使用useRef鈎子獲取用戶名、密碼輸入框的值並傳遞它們。

不要共享您的 firebase 憑據。