0
193
ViewsHow to manage GoogleAuthProvider, signInWithEmailAndPassword and setPersistence in Firebase 9?
I have an application that logs in both by email and password and by GoogleAuth, but after logged in, if the user reloads the page, it logs out.
I'm trying to manage GoogleAuthProvider, signInWithEmailAndPassword and setPersistence. For this example, just follow the login function with Google. I did it as follows:
Login.vue
import { getAuth, setPersistence, inMemoryPersistence, GoogleAuthProvider, signInWithPopup, } from "firebase/auth";
googleSignIn: function() {
const auth = getAuth();
const provider = new GoogleAuthProvider();
signInWithPopup(auth, provider)
.then(() => {
setPersistence(auth, inMemoryPersistence);
this.$router.push("/");
})
.catch((error) => {
// error messages
}
});
},
I'm trying to apply what I saw here: https://firebase.google.com/docs/auth/web/auth-state-persistence
On the other hand, in the parent component (after logging in), I'm getting the user data without any problems as follows:
Header.vue
import { getAuth, onAuthStateChanged } from "firebase/auth";
export default {
date: () => ({ username: "" }),
created() {
const auth = getAuth();
onAuthStateChanged(auth, (user) => {
if (user) {
this.username = user.displayName;
} else {
this.username = "logged out";
}
});
},
};
EDIT
I'm including the data saved in the application here. Even so, when reloading the user logs out.
2 answers
Answer question0
On browser environments the default behavior for Firebase Authentication is to persist the user authentication state between page loads, and there is no need to call setPersistence yourself. I recommend removing this call from your code, and leaving it to the Firebase SDK to use its defaults.
0
That's the intended behavior. You are setting auth persistence to inMemoryPersistencce. The documentation says,
NONE(inMemoryPeristence) indicates that the state will only be stored in memory and will be cleared when the window or activity is refreshed.
Try setting the persistence to SESSION or LOCAL.
If I open dev tools, I can see I am authenticated. The issue seems to be with your redirect here:
router.beforeEach((to, from, next) => {
// This currentUser maybe undefined
const currentUser = getAuth().currentUser;
// ...
else next();
});
Try using onAuthStateChanged() in the beforeEach:
router.beforeEach((to, from, next) => {
const auth = getAuth()
onAuthStateChanged(auth, (user) => {
if (!user) return next("login");
})
})