Develop Reference

Uncaught TypeError: Cannot read properties of null (reading 'email')

I am trying to get the email of the currently logged in user which I will then use to get the name data field from the document corresponding to this user. However, I keep getting this error. Any idea on how to fix this issue would be highly appreciated.
Additionally, whenever I make any change in regard to the email issue, I get the following error:
Uncaught TypeError: _firebase__WEBPACK_IMPORTED_MODULE_4__.db.collection is not a function
And when I refresh the page it returns back to the error in the title.
const auth = getAuth();
const user = auth.currentUser;
const userEmail = user.email;
let clubName;
db.collection("users").where("email", "==", userEmail).get().then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
console.log(doc.id, " => ", doc.data());
let data = doc.data();
clubName = data.name;
});
}).catch(function(error) {
console.log("Error getting documents: ", error);
});
console.log("THE DATA YOU ARE LOOKING FOR: " + clubName);
const q = query(collection(db, "requests"), where("SendTo", "==", clubName));
NOTE: in the code above I am using 2 different firebase databases one called users which has the fields {email, name, password, job} and the other called requests which have the following fields {From, SendTo, type, content, header}

auth.currentUser might be null because the auth object has not finished initializing.
Try using onAuthStateChanged assuming you are using firebase v9.
import { getAuth, onAuthStateChanged } from "firebase/auth";
const auth = getAuth();
onAuthStateChanged(auth, (user) => {
if (user) {
// User is signed in
} else {
// User is signed out
}
});

google auth and firebase persistence

heres my log in function, it works it logs you in via google account, but on refresh it does not stay logged in. what am I doing wrong? sorry I have no idea how to format the code to show correctly here.
const provider = new GoogleAuthProvider();
const login = () =>
{setPersistence(auth, browserSessionPersistence)
.then(()=> {
signInWithPopup(auth, provider)
.then((result) => {
const credential = GoogleAuthProvider.credentialFromResult(result);
const token = credential?.accessToken;
// The signed-in user info.
const user = result.user;
//console.log({ credentials, token, user });
})
.then(() => {
setSignIn(true);
})
.catch((error) => {
// Handle Errors here.
const errorCode = error.code;
const errorMessage = error.message;
// The email of the user's account used.
const email = error.email;
// The AuthCredential type that was used.
const credential = GoogleAuthProvider.credentialFromError(error);
//console.log({ errorCode, errorMessage, email, credential });
});
})
};

Firebase automatically restores the user credentials when you restart the app, but your code only responds to the explicit sign in (signInWithPopup).
To pick up the automatic restore (and other changes in authentication state), you should use an auth state listener as shown in the first code sample in the documentation on getting the current user:
firebase.auth().onAuthStateChanged((user) => {
if (user) {
// User is signed in, see docs for a list of available properties
// https://firebase.google.com/docs/reference/js/firebase.User
var uid = user.uid;
// ...
} else {
// User is signed out
// ...
}
});

Since v9, the code has changed.
import { getAuth, onAuthStateChanged } from "firebase/auth";
const auth = getAuth();
onAuthStateChanged(auth, (user) => {
if (user) {
// User is signed in, see docs for a list of available properties
// https://firebase.google.com/docs/reference/js/firebase.User
const uid = user.uid;
// ...
} else {
// User is signed out
// ...
}
});

Firebase sendPasswordResetEmail doesn't send email

I have a problem concerning my application using firebase: If I want to enable the users to reset their password themselves firebase doesn't send an email to their address. If I do it myself from the firebase console it works fine. I'm trying it like this:
resetPassword(email: string) {
sendPasswordResetEmail(this.auth, email)
.then(() => {
// Password reset email sent!
// ..
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
// ..
});
}
Has someone some insights for me, why this isn't working? I get my auth like this:
this.firebaseApp = initializeApp(environment.firebaseConfig);
this.auth = getAuth(firebaseApp);
I am using the Firebase Modular SDK (V9.0.0+).
I would be really grateful if someone can help me!
Cheers!

Where are you getting environment from? If you are getting it correctly and environment.firebaseConfig is not undefined then this should work.
import { initializeApp } from 'firebase/app';
import { getAuth, sendPasswordResetEmail } from "firebase/auth";
const app = initializeApp(environment.firebaseConfig);
const auth = getAuth();
sendPasswordResetEmail(auth, email)
.then(() => {
// Password reset email sent!
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
});

sorry for not providing the most useful answer, what I suggest is:
Verify the console is not throwing Firebase errors
Validate that the firebase env variables are correct

How 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.

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.

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");
})
})

Using Firebase reauthenticate

I'll appreciate assistance with how to reauthenticate a user in Firebase. I wonder if it makes any sense adding all these great features if the documentation doesn't explain how to use it:
Currently, this is what I'm trying, and it ain't working. Errors as cannot read property 'credential' of undefined
In constructor:
constructor(#Inject(FirebaseApp) firebaseApp: any) {
this.auth = firebaseApp.auth();
console.log(this.auth);
}
then the function
changePassword(passwordData) {
if(passwordData.valid) {
console.log(passwordData.value);
// let us reauthenticate first irrespective of how long
// user's been logged in!
const user = this.auth.currentUser;
const credential = this.auth.EmailAuthProvider.credential(user.email, passwordData.value.oldpassword);
console.log(credential);
this.auth.reauthenticate(credential)
.then((_) => {
console.log('User reauthenticated');
this.auth.updatePassword(passwordData.value.newpassword)
.then((_) => {
console.log('Password changed');
})
.catch((error) => {
console.log(error);
})
})
.catch((error) => {
console.log(error);
})
}
}

The reauthenticate() method is called on a firebase.User, not on firebase.auth.Auth itself.
var user = firebase.app.auth().currentUser;
var credentials = firebase.auth.EmailAuthProvider.credential('puf#firebaseui.com', 'firebase');
user.reauthenticate(credentials);
Update (July 2017):
There are some breaking change in the 4.0 version of the Firebase Web SDK. From the release notes:
BREAKING: firebase.User.prototype.reauthenticate has been removed in favor of firebase.User.prototype.reauthenticateWithCredential.
As far as I can tell the reauthenticateWithCredentialis a drop-in replacement for the old method.

Here's some code that enabled users to (a) reauthenticate in Firebase and (b) change their passwords after reauthenticating for me. I researched for about an hour while writing this, so hopefully it saves someone a minute.
Wrote in VueJS:
changePassword() {
let self = this; // i use "self" to get around scope issues
var user = firebase.auth().currentUser;
var credential = firebase.auth.EmailAuthProvider.credential(
this.$store.state.userId, // references the user's email address
this.oldPassword
);
user.reauthenticateWithCredential(credential)
.then(function() {
// User re-authenticated.
user.updatePassword(self.newPassword)
.then(function() {
console.log("Password update successful!");
})
.catch(function(error) {
console.log(
"An error occurred while changing the password:",
error
);
});
})
.catch(function(error) {
console.log("Some kinda bug: ", error);
// An error happened.
});

Slight changes as of May 2019, see more details here. Code is as follows:
var user = firebase.auth().currentUser;
var credential = firebase.auth.EmailAuthProvider.credential(user.email, password);
// Prompt the user to re-provide their sign-in credentials
return user.reauthenticateWithCredential(credential);

Call changeEmail("new email","password") in onPressed directly to update the user email with no reauthentication required error
RaisedButton(
onPressed: () {
changeEmail(_emailController.text, _passwordController.text);
}
Future<void> changeEmail(String email, String password) async {
User user = await FirebaseAuth.instance.currentUser;
print(email);
print(password);
try {
try {
var authResult = await user.reauthenticateWithCredential(
EmailAuthProvider.getCredential(
email: user.email,
password: password,
),
);
user.updateEmail(email).then((_) {
print("Succesfull changed email");
_backthrow();
}).catchError((error) {
showAlertDialog(context, error.message);
print("email can't be changed" + error.toString());
});
return null;
} catch (e) {
print("2");
}
} catch (e) {
print(e.message);
showAlertDialog(context, e.message);
}
}

Hers a full example how to reauthenticate with Firebase
var pass = "abcdefg";
var user = firebase.auth().currentUser;
var credential = firebase.auth.EmailAuthProvider.credential(user.email, pass);
user.reauthenticateWithCredential(credential).then(() => {
console.log("Its good!");
}).catch((error) => {
console.log(error);
});

Since 2021: If you use Firebase JS API 9.x (the tree shakable version) this is the most recent way:
https://cloud.google.com/identity-platform/docs/web/reauth
With credentials
import { getAuth, reauthenticateWithCredential } from "firebase/auth";
const auth = getAuth();
const user = auth.currentUser;
// todo for you: prompt the user to re-provide their sign-in credentials
const credential = promptForCredentials();
reauthenticateWithCredential(user, credential).then(() => {
// ...
}).catch((error) => {
// ...
});
With popup
import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth";
const auth = getAuth();
// todo for you: change to appropriate provider
const provider = new OAuthProvider('apple.com');
reauthenticateWithPopup(auth.currentUser, provider)
.then((result) => {
// ...
})
.catch((error) => {
// ...
});

This is how I re-authenticate a user in Firebase:
import { getAuth, EmailAuthProvider, reauthenticateWithCredential } from "firebase/auth";
const auth = getAuth()
const reauthenticateUser = async (email, password) => {
const user = auth.currentUser;
try {
const credential = EmailAuthProvider.credential(email, password);
await reauthenticateWithCredential(user, credential)
} catch (error) {
Alert.alert("Error", "The email or password is incorrect. Please try again.")
}
}

I was getting that re-authentication error auth/requires-recent-login when saving the primary email.
I couldn't figure out how to implement that poorly documented reauthenticateWithCredential(credential) method, so, I simply logged-out the user and redirected to login page. It's a hack but It works like charm!
firebase.auth().signOut();