Question 332782 in Firebase Question posted in
An extensive official documentation can be found here.

Firebase – How can I resolve the error in my TypeScript code?

I am designing a website with Vue.js, and I have a login page component. In this component, users enter their email and password information, and it should check Firebase. If the information is present, it should log ‘Login successful’ to the console; otherwise, it should log ‘Login failed.’ After writing the code in this way, I couldn’t log in and received an ‘error.’ When I logged the error, I noticed that the ‘Email’ value I entered on the login page was coming as ‘undefined.’ How can I fix this?

    <template>
<div class="q-pa-md" style="max-width: 500px; margin-left: 200px;" >

   <q-form class="q-gutter-md">
     <q-input
      
       v-model="Email"
      
     ></q-input>

     <q-input
       
        v-model="password"
       
        </template>

        </q-input>


     <div>
       <q-btn @click="login()" label="Giriş" type="button" color="red"></q-btn>
     </div>
   </q-form>

 </div>
</template>

<script>
import { ref } from 'vue';
import { useMyStore } from 'src/stores/example-store';
import { getFirestore } from 'firebase/firestore';
import { auth } from 'src/boot/firebase';
import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';
import { query, where, getDocs } from 'firebase/firestore';

export default {
 data() {
  return {
    Email: '',
    password: '',
  };
},
  setup() {
    const Email = ref('');
    const password = ref('');

    const login = async () => {
      try {
        const auth = getAuth(); // Auth modülünü al

       
        const userCredential = await signInWithEmailAndPassword(auth, Email.value, password.value);
        const user = userCredential.user;

        const firestore = getFirestore();
        const usersCollection = query(getFirestore(), 'users', where('uid', '==', user.uid));
        const userSnapshot = await getDocs(usersCollection);

        if (userSnapshot.empty) {
          console.error('Hatalı Giriş: Kullanıcı bulunamadı');
          return;
        }

        const userData = userSnapshot.docs[0].data();

        console.log('Giriş Başarılı', userData);
        // Burada başarıyla giriş yaptığınızda yönlendirme veya başka işlemler yapabilirsiniz.
      } catch (error) {
        console.error("Hata Mesajı :", error.message,console.log(Email.value));
      }
    };

    
    return {
      
      signup,
      onMainClick,
      hata,
      login, // login fonksiyonunu setup içinden return edin
    };

  },
 
};
</script>
Tags:

2

Answers


  1. 0

    It seems like you have two instances of the Email variable in your component, one in the data() function and another in the setup() function. The one defined in the data() function is not being used, and the one in the setup() function is shadowing it. This can lead to confusion and might be the reason why Email is coming as undefined.

    To fix this, you can remove the data() function as it’s not necessary when using the Composition API with Vue 3. Instead, use the ref function directly in the setup() function to declare your reactive variables.

    Login or Signup to reply.
  2. 0 
    return {
      Email, // expose the ref value to the template
      signup,
      onMainClick,
      hata,
      login, // login fonksiyonunu setup içinden return edin
    };
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search