This is my web page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calcolo Diliuzioni</title>
</head>
<body>
<h1>My app</h1>
<!-- Libreria per gestire l'autenticazione con google -->
<script src="https://apis.google.com/js/platform.js" async defer></script>
<!-- Firebae config -->
<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "",
authDomain: "",
databaseURL: "",
storageBucket: "",
};
firebase.initializeApp(config);
</script>
<script type="text/javascript">
var user = firebase.auth().currentUser;
if (user) {
console.log(user);
} else {
console.log(user);
}
</script>
</body>
</html>
Let's assume I have an already logged user. When I load the page in the console I got null
. While I'm expecting to have the current user's object.
If I run the same code in the browser console
var user = firebase.auth().currentUser;
if (user) {
console.log(user);
} else {
console.log(user);
}
I'm able to get the current user's object.
I think that the firebase.initializeApp(config);
has some async behavior. What's the right way to work around it? Should I use a promise or something on the firebase.initializeApp(config);
function? A sort of callback..
initialize app is synchronous. However, determining the current user state is asynchronous. The right way to determine the current auth state is to use an observer: https://firebase.google.com/docs/auth/web/manage-users
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in and currentUser will no longer return null.
} else {
// No user is signed in.
}
});
I would combine two methods together:
function canActivate(){
return new Promise(resolve => {
if (firebase.auth().currentUser) {
resolve(true);
} else {
const unsubscribe = firebase.auth().onAuthStateChanged(function (user) {
unsubscribe();
if (user) {
resolve(true);
} else {
resolve(false);
}
});
}
});
}
At SPA, if user already login and user can go to any pages get firebase.auth().currentUser == true
.
But if user reload page, get firebase.auth().currentUser == false
.
User need to wait firebase.initializeApp(config);
finished, so add
firebase.auth().onAuthStateChanged
to wait init finished.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With