Firebase auth broken above v10.1.0

[R0N1n-dev]

Have been using firebase auth for a while now but after updating to any version after 10.1.0, auth is broken .
The app just hangs on starting the development server. It just doesn't work. If i revert the version back to 10.1.0, it works.
What is going on , coz this has been the case for me now for a while and still happens so i Pinned it to 10.1.0 coz thats the only thing that works.
wrote an issue but progress has staled on that end, not gotten replies since January. Seems like something isnt initializing but i do not know coz i have no answers.

import { defineStore } from "pinia";
import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signOut,
  onAuthStateChanged,
  sendEmailVerification,
} from "firebase/auth";

import { auth } from "../firebase/config";

export const useUserStore = defineStore({
  id: "user",
  state: () => ({
    user: {},
    loadingSession: false
  }),

  actions: {
    init() {
      onAuthStateChanged(auth, (user) => {
        if (user) {
          //this.user.id = user.uid;
          //this.user.email = user.email;
          this.user = user;
        } else {
          this.user = null;
        }
      });
    },

    async register({ email, password }) {
      console.log("register");
      const res = await createUserWithEmailAndPassword(auth, email, password);
      if (res) {
        this.user = res.user;
        sendEmailVerification(res.user);
        console.log(this.user);
      } else {
        throw new Error("could not complete signup");
      }
    },

    async login({ email, password }) {
      console.log("login");
      const res = await signInWithEmailAndPassword(auth, email, password);

      if (res) {
        this.user = res.user;
        console.log(this.user);
      } else {
        throw new Error("could not complete login");
      }
    },

    async logout() {
      console.log("logout");
      await signOut(auth);
      this.user = null;
      console.log(this.user);
    },
  },
});

<template>
  <IContainer>
    <IForm>
      <IFormGroup>
        <IFormLabel>Email</IFormLabel>
        <Input v-model="userEmail" type="text" />
      </IFormGroup>
      <IFormGroup>
        <IFormLabel>Password</IFormLabel>
        <Input v-model="userPassword" type="password" />
      </IFormGroup>
      <IFormGroup class="_margin-top:1! _display:flex!">
        <IButton class="_margin-x:auto!" @click.prevent="handleSubmit">Login</IButton>
      </IFormGroup>
    </IForm>
  </IContainer>
</template>

<script setup>
import { useUserStore } from '@/stores/user';
const userStore = useUserStore();
const router = useRouter();
const userEmail = ref('');
const userPassword = ref('');

const handleSubmit = async () => {
  try {
    await userStore.login({
      email: userEmail.value,
      password: userPassword.value,
    });
    router.push('/');
  } catch (error) {
    console.log(error);
  }
};

</script>

Another example
User.js

import { defineStore } from "pinia";
import {
    createUserWithEmailAndPassword,
    onAuthStateChanged,
    signInWithEmailAndPassword,
    signOut,
} from "firebase/auth";
import { auth } from "../firebaseConfig";
import router from "../router";

export const useUserStore = defineStore("userStore", {
    state: () => ({
        userData: null,
        loadingUser: false,
        loadingSession: false,
    }),
    actions: {
        async registerUser(email, password) {
            this.loadingUser = true;
            try {
                const { user } = await createUserWithEmailAndPassword(
                    auth,
                    email,
                    password
                );
                this.userData = { email: user.email, uid: user.uid };
                router.push("/");
            } catch (error) {
                console.log(error);
            } finally {
                this.loadingUser = false;
            }
        },
        async loginUser(email, password) {
            this.loadingUser = true;
            try {
                const { user } = await signInWithEmailAndPassword(
                    auth,
                    email,
                    password
                );
                this.userData = { email: user.email, uid: user.uid };
                router.push("/");
            } catch (error) {
                console.log(error);
            } finally {
                this.loadingUser = false;
            }
        },
        async logoutUser() {
            try {
                await signOut(auth);
                this.userData = null;
                router.push("/login");
            } catch (error) {
                console.log(error);
            }
        },
        currentUser() {
            return new Promise((resolve, reject) => {
                const unsuscribe = onAuthStateChanged(
                    auth,
                    (user) => {
                        if (user) {
                            this.userData = {
                                email: user.email,
                                uid: user.uid,
                            };
                        } else {
                            this.userData = null;
                        }
                        resolve(user);
                    },
                    (e) => reject(e)
                );
                unsuscribe();
            });
        },
    },
});

Login.vue

<template>
    <div>
        <h1>Login</h1>
        <form @submit.prevent="handleSubmit">
            <input type="email" placeholder="Ingrese email" v-model.trim="email">
            <input type="password" placeholder="Ingrese contraseña" v-model.trim="password">
            <button type="submit" :disabled="userStore.loadingUser">Acceso</button>
        </form>
    </div>
</template>

<script setup>
    import { ref } from 'vue';
    import {useUserStore} from '../stores/user'

    const userStore = useUserStore()

    const email = ref('[email protected]')
    const password = ref('123123')

    const handleSubmit = async() => {
        if(!email.value || password.value.length < 6){
            return alert('llena los campos')
        }
        await userStore.loginUser(email.value, password.value)
    }

</script>

Using 10.1.0 on starting dev server

Upon upgrading above 10.1.0
Just hangs at 'loading app' while checking for user

Am getting no answers for 2 months.
????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

[dharnil]

Hey Fellow Vue User,

I am not sure if you are using the above code to learn but the code is not so readable. I suggest if you are using Vue3 switch to composition api.

Now, I currently use firebase v10.8.0 so I don't understand why are using stuck on v10.1.0. Using old iterations may have breaking changes.

Test your code with a few version and talk to your stakeholders.

Very Important

Always post screen shots of the error/console. The Screenshot that you have on your screen does not showcase the issue at all. Add comments in your code for the community to help.

signInWithEmailAndPassword(auth, email, password).then(res => console.log(res))

set your values not in the await section but the response section. if you are using state management. This is best practice.

[dharnil]

Is this a production environment or test? If its a playground, can you attach the repo.

[R0N1n-dev]

There goes the console, white as snow

https://stackblitz.com/github/R0N1n-dev/firevue

[dharnil]

Its working for me

[dharnil]

Look at this piece of code and iterate over this. If the code works for me, there is no reason it shouldn't work for you.

[dharnil]

A very important suggestion. Debugging is ideally expensive. You should put in as many console.log() as appropriate for you.

Check out my implementation.

• When entering a function -> print name of the function.
• when reading response -> print response.
• If response is missing, print name of the method in the .then() block.
• Restrain as much as possible from conditional nesting.

Think of it this way, your code async callbacks everything. JS the run time does its best to full fill promises. In this case your promise was fulfilled prior to value asked to be updated which is loading user...

[R0N1n-dev]

dharnil Look at this piece of code and iterate over this. If the code works for me, there is no reason it shouldn't work for you. Screenshot.2024-03-20.at.12.29.10.am.png (view on web) Wait how did u get past there "loading user" to the login screen mdrewj - Chat @ Spike<https://spikenow.com/r/a/?ref=spike-organic-signature&_ts=2ikwfc> [2ikwfc] On March 19, 2024 at 13:30 GMT, dharnil ***@***.******@***.***>> wrote: Look at this piece of code and iterate over this. If the code works for me, there is no reason it shouldn't work for you. Screenshot.2024-03-20.at.12.29.10.am.png (view on web)<https://github.com/firebase/firebase-js-sdk/assets/116938206/f959f0ac-9f94-4c91-b0a4-39c6597de25d> — Reply to this email directly, view it on GitHub<#8064 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AT3332BU242LN33FF5M6UZLYZA4X5AVCNFSM6AAAAABESEZBICVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DQNBQHAZTM>. You are receiving this because you authored the thread.Message ID: ***@***.***> [https://bolt.im/t/?hlbAnXI9QGDt6NYWSKtEoFQP8hHuQPmF-mGZ3-sDvlXm02rO4ldWz4oBs9FVKti9az5Gi9WDmhyDz3hj7YWU8A]

[dharnil]

your message is not quite readable. Can you please rewrite your comment.

[R0N1n-dev]

dharnil your message is not quite readable. Can you please rewrite your comment. How did you get to the login screen coz it normally hangs on 'loading app' when I start the dev server mdrewj - Chat @ Spike<https://spikenow.com/r/a/?ref=spike-organic-signature&_ts=2ikwr0> [2ikwr0] On March 19, 2024 at 13:59 GMT, dharnil ***@***.******@***.***>> wrote: your message is not quite readable. Can you please rewrite your comment. — Reply to this email directly, view it on GitHub<#8064 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AT3332BPFJB6MCATSSVCJL3YZBAELAVCNFSM6AAAAABESEZBICVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DQNBRGI2DE>. You are receiving this because you authored the thread.Message ID: ***@***.***> [https://bolt.im/t/?gXSC5xBELj_KERx7U5v4V3OJTcuRPEjZ08rHVELelcUfkLLcPJzj-4LmZecDwBohQfYEB79ocD3ppijcKntkEg]

[dharnil]

Its your implementation of pinia which is causing you problems. As I stated earlier. You need to use composition API. Using Setup doesn't automatically make it composition api, your implementation matters lots. Try checking Vue3 best practices doc. Start with creating basic component, then add features such as state management.

I attached an image for you in the comment. Take a look at it. There is no special sauce in my code.

All you have to do, is understand what I have done and version it to your suitability.

[R0N1n-dev]

dharnil Its your implementation of pinia which is causing you problems. As I stated earlier. You need to use composition API. Using Setup doesn't automatically make it composition api, your implementation matters lots. Try checking Vue3 best practices doc. Start with creating basic component, then add features such as state management. I attached an image for you in the comment. Take a look at it. There is no special sauce in my code. All you have to do, is understand what I have done and version it to your suitability. OK. But my implementation of pinia was fine before 10.1.0 so obviously something changed btn 10.1.0 and 10.2.0 that we weren't told about. So it's like they made a huge change in 10.20.0 that we were not informed about mdrewj - Chat @ Spike<https://spikenow.com/r/a/?ref=spike-organic-signature&_ts=2ikxxr> [2ikxxr] On March 19, 2024 at 14:15 GMT, dharnil ***@***.******@***.***>> wrote: Its your implementation of pinia which is causing you problems. As I stated earlier. You need to use composition API. Using Setup doesn't automatically make it composition api, your implementation matters lots. Try checking Vue3 best practices doc. Start with creating basic component, then add features such as state management. I attached an image for you in the comment. Take a look at it. There is no special sauce in my code. All you have to do, is understand what I have done and version it to your suitability. — Reply to this email directly, view it on GitHub<#8064 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AT3332A2JO2XFSPPWR2673DYZBCABAVCNFSM6AAAAABESEZBICVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DQNBRGQZDQ>. You are receiving this because you authored the thread.Message ID: ***@***.***> [https://bolt.im/t/?PaUQfcKaoennYQiKp_2h4uJmJc8bFXlnNg0t_Oj16e0UTy4lCCZrNiCumzeZ3FsiN3RBHJVn2mGakZsEjICw4A]

[R0N1n-dev]

dharnil Its your implementation of pinia which is causing you problems. As I stated earlier. You need to use composition API. Using Setup doesn't automatically make it composition api, your implementation matters lots. Try checking Vue3 best practices doc. Start with creating basic component, then add features such as state management. I attached an image for you in the comment. Take a look at it. There is no special sauce in my code. All you have to do, is understand what I have done and version it to your suitability. If something major changed in a minor update, we should be informed, it's so stupid mdrewj - Chat @ Spike<https://spikenow.com/r/a/?ref=spike-organic-signature&_ts=2iky17> [2iky17] On March 19, 2024 at 14:15 GMT, dharnil ***@***.******@***.***>> wrote: Its your implementation of pinia which is causing you problems. As I stated earlier. You need to use composition API. Using Setup doesn't automatically make it composition api, your implementation matters lots. Try checking Vue3 best practices doc. Start with creating basic component, then add features such as state management. I attached an image for you in the comment. Take a look at it. There is no special sauce in my code. All you have to do, is understand what I have done and version it to your suitability. — Reply to this email directly, view it on GitHub<#8064 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AT3332A2JO2XFSPPWR2673DYZBCABAVCNFSM6AAAAABESEZBICVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DQNBRGQZDQ>. You are receiving this because you authored the thread.Message ID: ***@***.***> [https://bolt.im/t/?PFnOZHNCCYdbCK12133f3Hylwiiq3fBz8DZMmZEP_kv1It3epKU8pYDg2NCvY3OzM8-Xs1SdgwRoCtIiCugelA]

[dharnil]

When I glanced at your project, I did not find any unit testing. I can't be certain that it was working correctly before. Showing an output and working as intended might have blended in well enough that you might have not felt it. This has certainly happened to me in the past. I learnt it through trial-and-error to compartmentalise my work. Use semantic versioning as a way to get your job done. The change logs on firebase-js-sdk doesn't not mention any breaking changes. Semantic Versioning Syntax is as such MAJOR . MINOR . BUG/PATCH 10.1.0 & 10.2.0 are minor changes. if it were 11.#.# it would be something of confirm. Also, firebase has more than 100,000 active users. If 10.1.0 and 10.2.0 were bad updated you would have seen 10.1.1 or 10.2.1

…

________________________________ From: Kalungi Moses ***@***.***> Sent: Wednesday, March 20, 2024 1:29:46 AM To: firebase/firebase-js-sdk ***@***.***> Cc: dharnil ***@***.***>; Comment ***@***.***> Subject: Re: [firebase/firebase-js-sdk] Firebase auth broken above v10.1.0 (Discussion #8064) dharnil Its your implementation of pinia which is causing you problems. As I stated earlier. You need to use composition API. Using Setup doesn't automatically make it composition api, your implementation matters lots. Try checking Vue3 best practices doc. Start with creating basic component, then add features such as state management. I attached an image for you in the comment. Take a look at it. There is no special sauce in my code. All you have to do, is understand what I have done and version it to your suitability. OK. But my implementation of pinia was fine before 10.1.0 so obviously something changed btn 10.1.0 and 10.2.0 that we weren't told about. So it's like they made a huge change in 10.20.0 that we were not informed about mdrewj - Chat @ Spike<https://spikenow.com/r/a/?ref=spike-organic-signature&_ts=2ikxxr> [2ikxxr] On March 19, 2024 at 14:15 GMT, dharnil ***@***.******@***.***>> wrote: Its your implementation of pinia which is causing you problems. As I stated earlier. You need to use composition API. Using Setup doesn't automatically make it composition api, your implementation matters lots. Try checking Vue3 best practices doc. Start with creating basic component, then add features such as state management. I attached an image for you in the comment. Take a look at it. There is no special sauce in my code. All you have to do, is understand what I have done and version it to your suitability. — Reply to this email directly, view it on GitHub<#8064 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AT3332A2JO2XFSPPWR2673DYZBCABAVCNFSM6AAAAABESEZBICVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DQNBRGQZDQ>. You are receiving this because you authored the thread.Message ID: ***@***.***> [https://bolt.im/t/?PaUQfcKaoennYQiKp_2h4uJmJc8bFXlnNg0t_Oj16e0UTy4lCCZrNiCumzeZ3FsiN3RBHJVn2mGakZsEjICw4A] — Reply to this email directly, view it on GitHub<#8064 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/A34FLXVJHBVG4VEG5Y3XABLYZBDVVAVCNFSM6AAAAABESEZBICVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DQNBRGYYDQ>. You are receiving this because you commented.Message ID: ***@***.***>

[R0N1n-dev]

Apparently the problem came from currentUser function.
Old one

currentUser() {
      return new Promise((resolve, reject) => {
        const unsuscribe = onAuthStateChanged(
          auth,
          async (user) => {
            if (user) {
              this.userData = {
                email: user.email,
                uid: user.uid,
              };
            } else {
              this.userData = null;
            }
            resolve(user);
          },
          (e) => reject(e)
        );
        unsuscribe();
      });
    }

New one

currentUser() {
      let unsubscribe;
      return new Promise((resolve, reject) => {
        unsubscribe = onAuthStateChanged(
          auth,
          (user) => {
            if (user) {
              this.userData = { email: user.email, uid: user.uid };
            } else {
              this.userData = null;
            }
            resolve(user);
          },
          (e) => reject(e)
        );
      }).then((user) => {
        unsubscribe();
        return user;
      });
    }

Now it works