facing problems with firebase signInWithEmailAndPassword

Question

I added a project in firebase.com and the project name is depthreactproject later, I activated the email verification to test this signInWithEmailAndPassword. later I got the configuration file and copied it to my project and tried to test the login page. also, I installed firebase to my project using npm -i install firebase While testing this. I am facing some problems. I used this link for the firebase reference https://firebase.google.com/docs/auth/web/start

Below is my 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> 
    );
  }

Below is my firebase config file 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}

I am adding the screenshot, In this, when I clk on the login button it should capture the credentials, which are static already configure in login.js, But when I change some line or comment out then only it is visible but with null value, But I should caputure it.

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;
    }

You have to import the initialized app from your firebase.js file and use getAuth(app) to start using authentication.

Instead of passing krishna@email.com and password in the sign-in method, you can use the useRef hook to get the value of the username, password input box and pass them.

Do not share your firebase credentials.