I keep getting this when I try to login.

"Cannot read properties of undefined (reading 'tenantId')"

The user can sign up but cannot sign in with the same email and password. I have no idea what is tenantId and how to define it so that I am able to sign in. I would appreciate your help to see what I am doing wrong. Thank you!

Login.vue

<template>
  <div className="formBox py-3 mx-3">
    <div className="mt-4">
      <h4 className="text-primary text-center"></h4>
      <div className="image"></div>
    </div>
    <div className="body-form">
      <form>
        <div className="input-group mb-3">
          <div className="input-group-prepend">
            <span className="input-group-text">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                style="fill: rgba(0, 0, 0, 1); transform: ; msfilter: ">
                <path
                  d="m18.73 5.41-1.28 1L12 10.46 6.55 6.37l-1.28-1A2 2 0 0 0 2 7.05v11.59A1.36 1.36 0 0 0 3.36 20h3.19v-7.72L12 16.37l5.45-4.09V20h3.19A1.36 1.36 0 0 0 22 18.64V7.05a2 2 0 0 0-3.27-1.64z">
                </path>
              </svg>
            </span>
          </div>
          <input type="text" className="form-control" placeholder="Email" name="email" v-model="email" />
        </div>
        <div className="input-group mb-3">
          <div className="input-group-prepend">
            <span className="input-group-text">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                style="fill: rgba(0, 0, 0, 1); transform: ; msfilter: ">
                <path
                  d="M12 2C9.243 2 7 4.243 7 7v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7c0-2.757-2.243-5-5-5zM9 7c0-1.654 1.346-3 3-3s3 1.346 3 3v3H9V7zm4 10.723V20h-2v-2.277a1.993 1.993 0 0 1 .567-3.677A2.001 2.001 0 0 1 14 16a1.99 1.99 0 0 1-1 1.723z">
                </path>
              </svg>
            </span>
          </div>
          <input type="password" className="form-control" placeholder="Password" name="password" v-model="password" />
        </div>
        <button type="button"  @click="login()">LOGIN</button>

        <div className="message">
          <div>
            New user?
            <a href="#/SignUp"> Sign up </a>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>
<script>
  import {
    getAuth,
    signInWithEmailAndPassword
  } from "firebase/auth";
  import {
    auth
  } from "../../firebaseInit.js"

  export default {
    name: "LoginForm",
    data() {
      return {
        email: '',
        password: ''
      }
    },
    methods: {
      login() {
        signInWithEmailAndPassword(auth, this.email, this.password).then(() => {       
              console.log('signed in')
            }
          )
          .catch((error) => {
            console.log(error.message);
          });
      }
    }
  };
</script>

firebaseInit.js

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
// my config stuff
};

// Initialize Firebase
initializeApp(firebaseConfig);
const db = getFirestore();

SignUp.vue

<template>
  <div>
    <h1>Create an Account</h1>
    <p><input type="text" placeholder="Name" v-model="name" /></p>
    <p><input type="text" placeholder="School Grade" v-model="grade" /></p>
    <p><input type="text" placeholder="Email" v-model="email" /></p>
    <p><input type="password" placeholder="Password" v-model="password" /></p>
    <p><button @click="register">Submit</button></p>
  </div>
</template>
<script setup>
  import {
    getFirestore,
    doc,
    updateDoc,
    getDoc,
    setDoc,
    collection,
    addDoc,
    deleteDoc,
    deleteField
  } from "firebase/firestore";
  import {
    ref
  } from 'vue';
  import {
    getAuth,
    createUserWithEmailAndPassword
  } from "firebase/auth"


  const db = getFirestore();
  const email = ref('')
  const auth = getAuth()
  const password = ref('')
  const name = ref('')
  const grade = ref('')

  // const router = useRouter() // get a reference to our vue router
  const register = () => {
    createUserWithEmailAndPassword(auth, email.value, password.value) // need .value because ref()
      .then(async (data) => {
        console.log('Successfully registered!');
        try {
          const docRef = await setDoc(doc(db, "users", email.value), {
            profile: {
              fullName: name.value,
              schoolGrade: grade.value
            },
            countDown: [],
            progresResults: [],
          });

          localStorage.setItem("email", email.value);
          localStorage.setItem("db", JSON.stringify(db));
          window.location.href = '/#';

        } catch (e) {
          console.error("Error adding document: ", e);
        }
      })
      .catch(error => {
        console.log(error.code)
        alert(error.message);
      });
  }
</script>

CodePudding user response：

Firebase may not have initialised before you call getAuth() or getFirestore() in SignUp.vue. It's best to initialize Firebase and all its services in a single file and then use those instances wherever needed. Try refactoring firebaseInit.js as shown below:

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

const firebaseConfig = {};

// initializeApp() is called before getAuth() for sure 
const app = initializeApp(firebaseConfig);

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

Then import these SignUp.vue like this:

import { auth, db } from "../path/to/firebaseInit.js";

const register = async () => {
  const { user } = await createUserWithEmailAndPassword(auth, email.value, password.value)
  // ...
}