firebase-js-sdk
firebase-js-sdk copied to clipboard
firebase
Auth not working
Operating System
PopOS
Browser Version
Brave Version 1.60.125 Chromium: 119.0.6045.199 (Official Build) (64-bit)
Firebase SDK Version
10.7.1
Firebase SDK Product:
Auth
Describe your project's tooling
Vite with Vue 3
Describe the problem
Before updating to 10.7.1, auth worked fine but after updating from 10.1, All i get is invalid user/email errors.
Steps and code to reproduce issue
firebase config.js
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
const firebaseConfig = {
apiKey: "AIzaSyC0RUfdb2U8cwneZlH6quqqXTGhSSs8k6c",
authDomain: "ronin-auth.firebaseapp.com",
databaseURL: "https://ronin-auth-default-rtdb.firebaseio.com",
projectId: "ronin-auth",
storageBucket: "ronin-auth.appspot.com",
messagingSenderId: "330500904760",
appId: "1:330500904760:web:2d6f1c6e2c947bb9e9d3cd",
};
// initialize firebase app
initializeApp(firebaseConfig);
// initialize firebase auth
const auth = getAuth();
export { auth };
user.js
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);
},
},
});
Login.vue
<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.
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>
On [email protected], on starting dev server,
After updating to 10.4.0 and even 10.7.1, It hangs on loading after starting dev server
Hi @R0N1n-dev,
Does this issue exist in v10.3.0? And are you using React Native in your stack at all? There was a change to Auth persistence for react native in v10.3.0.
Which line throws invalid user/email errors? If you inspect with the developer console, can you tell which request failed?
Which line throws
invalid user/email errors? If you inspect with the developer console, can you tell which request failed?
The login attempt throws an error with the first example. The second example shows no error on starting dev server but cannot even get to login page, just hangs as shown.
Just curious, if you pin @firebase/auth to version 1.4.0, does it work? I think I'm having a similar problem and when I kept @firebase/auth at 1.4.0 it worked.
Just curious, if you pin @firebase/auth to version 1.4.0, does it work? I think I'm having a similar problem and when I kept @firebase/auth at 1.4.0 it worked.
How do i do that???
Just curious, if you pin @firebase/auth to version 1.4.0, does it work? I think I'm having a similar problem and when I kept @firebase/auth at 1.4.0 it worked.
How do i do that???
In your package.json, set the @firebase/auth to exactly "1.4.0". Not "~1.4.0" or "^1.4.0"
Just curious, if you pin @firebase/auth to version 1.4.0, does it work? I think I'm having a similar problem and when I kept @firebase/auth at 1.4.0 it worked.
How do i do that???
In your package.json, set the @firebase/auth to exactly "1.4.0". Not "~1.4.0" or "^1.4.0"
Nope, didn't work for me
This problem persists and see no possible solution in sight other than pinning the firebase version to one that works which in my case is 10.1.0.
I have similar issue: https://github.com/firebase/firebase-js-sdk/issues/8026
Pinning firebase version didn't help 😢
@R0N1n-dev can you provide any HAR file especially where you see an exception?
@R0N1n-dev can you provide any HAR file especially where you see an exception?
issue-recording.zip Here is the HAR file i got.hope it helps coz i literally see no errors in the console
@R0N1n-dev Thanks for the HAR file. We've looked at it but haven't been able to find the root cause of the issue yet.
Could you please try with other 10.1+ versions (10.2.0, 10.3.0, ..., 10.7.0)? It would be helpful for us to pinpoint the first "bad" version where the issue occurs?
@R0N1n-dev Thanks for the HAR file. We've looked at it but haven't been able to find the root cause of the issue yet.
Could you please try with other 10.1+ versions (10.2.0, 10.3.0, ..., 10.7.0)? It would be helpful for us to pinpoint the first "bad" version where the issue occurs?
firebase2.zip HAR for [email protected] for where the issue starts for me
Never mind . Found a solution. Replace 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;
});
}