We Keep Coding

How to await the creation of a document created in cloud functions with onSnapshot

I want to securely create a user document onCreate that is in sync with the auth.user database in Firebase v9.
I think it wouldn't be secure to let a registered user create a user document. So I wrote a cloud function which triggers on functions.auth.user().onCreate() and creates a user document.
Problem:
I have the problem keeping them in sync as the onSnapshotmethod which should await for the user document to exists already returns a promise if the user document does not yet exists. Sometimes it works and sometimes not. So I don't know when I can update the by the cloud function created user document.
Question:
Why does the onSnapshot sometimes work and sometimes not. How can I fix it?
Here is a link to a helpful Article which seem to doesn't work in v9. Link
I tried and searched everywhere. I can't believe this is not a standard feature and still a requested topic. This seems so basic.
Error
error FirebaseError: No document to update: as const user = await createAccount(displayName, email, password); returns even if user is not yet in doc.data()
Sign Up function
interface SignUpFormValues {
email: string;
password: string;
confirm: string;
firstName: string;
lastName: string;
}
const createAccount = async (
displayName: string,
email: string,
password: string
) => {
// Create auth user
const userCredential = await createUserWithEmailAndPassword(
auth,
email,
password
);
// -> Signed in
// Update Profile
const user = userCredential.user;
const uid = user.uid;
await updateProfile(user, {
displayName: displayName,
});
// IMPORTANT: Force refresh regardless of token expiration
// auth.currentUser.getIdToken(true); // -> will stop the onSnapshot function from resolving properly
// Build a reference to their per-user document
const userDocRef = doc(db, "users", uid);
return new Promise((resolve, reject) => {
const unsubscribe = onSnapshot(userDocRef, {
next: (doc) => {
unsubscribe();
console.log("doc", doc); // -> returning undefined
console.log("doc.data()", doc.data()); // -> returning undefined
resolve(user); // -> returning undefined
},
error: (error) => {
unsubscribe();
console.log("error", error);
reject(error);
},
});
});
};
const handleSignUp = async (values: SignUpFormValues) => {
const { firstName, lastName, email, password } = values;
const displayName = `${firstName} ${lastName}`;
try {
setError("");
setLoading(true);
// Create user account
const user = await createAccount(displayName, email, password);
console.log("createAccount -> return:", user); // -> problem here sometimes return undefined
// Update user
const newUserData = {
displayName: displayName,
firstName,
lastName,
};
// Build a reference to their per-user document
const userDocRef = doc(db, "users", user.uid);
await updateDoc(userDocRef, newUserData);
// Send Email verification
await authSendEmailVerification(user);
// Logout
await logout();
navigate("/sign-up/email-verification", { state: values });
} catch (error: any) {
const errorCode = error.code;
const errorMessage = error.message;
console.log("error", error);
console.log("error", errorCode);
if (errorCode === "auth/email-already-in-use") {
const errorMessage =
"Failed to create an account. E-Mail address is already registered.";
setError(errorMessage);
console.log("error", errorMessage);
} else {
setError("Failed to create account.");
}
}
setLoading(false);
};
Cloud function which triggers the user onCreate
// On auth user create
export const authUserWriteListener = functions.auth
.user()
.onCreate(async (user, context) => {
console.log("user:", user);
const userRef = db.doc(`users/${user.uid}`);
await userRef.set({
email: user.email,
createdAt: context.timestamp,
firstTimeLogin: true,
});
return db.doc("stats/users").update({
totalDocsCount: FieldValue.increment(1),
});
});

The issue is that the Cloud Function code runs asynchronously. There is no guarantee that it will run quickly enough to have the document created in Firestore between the end of createAccount() and your call to updateDoc(). In fact, if your system has been idle for a while it could be a minute (or more!) for the Cloud Function to execute (do a search for "cold start firebase cloud functions").
One option, depending on your design, might be to not take in first name and last name during sign up? But instead take the user to a "profile page" once they are logged in where they could modify aspects of their profile (by that time the user profile document hopefully is created). On that page, if the get() returns no document, you could put up a notification to the user that the system "is still processing their registration" or something like that.

Firebase functions integrating with Sendgrid

I'm fairly new with Firebase functions and I'm trying to create a simple onCreate() trigger however I cant seem to get it up and running.
Am I not returning the promise correctly with Sendgrid? Not sure what I am missing
const functions = require("firebase-functions");
const admin = require("firebase-admin");
const sendGrid = require("#sendgrid/mail");
admin.initializeApp();
const database = admin.database();
const API_KEY = '';
const TEMPLATE_ID = '';
sendGrid.setApiKey(API_KEY);
const actionCodeSettings = {
...
};
exports.sendEmailVerify = functions.auth.user().onCreate((user) => {
admin
.auth()
.generateEmailVerificationLink(user.email, actionCodeSettings)
.then((url) => {
const msg = {
to: user.email,
template_id: TEMPLATE_ID,
dynamic_template_data: {
subject: "test email",
name: name,
link: url,
},
};
return sendGrid.send(msg);
})
.catch((error) => {
console.log(error);
});
});
Logs from firebase functions
sendEmailVerify
Function execution started
sendEmailVerify
Function returned undefined, expected Promise or value
sendEmailVerify
Function execution took 548 ms, finished with status: 'ok'
sendEmailVerify
{ Error: Forbidden
sendEmailVerify
at axios.then.catch.error (node_modules/#sendgrid/client/src/classes/client.js:133:29)
sendEmailVerify
at process._tickCallback (internal/process/next_tick.js:68:7)
sendEmailVerify
code: 403,
sendEmailVerify
message: 'Forbidden',

You are not correctly returning the Promises chain in your Cloud Function. You should do as follows:
exports.sendEmailVerify = functions.auth.user().onCreate((user) => {
return admin // <- See return here
.auth()
.generateEmailVerificationLink(user.email, actionCodeSettings)
.then((url) => {
const msg = {
to: user.email,
template_id: TEMPLATE_ID,
dynamic_template_data: {
subject: "test email",
name: name,
link: url,
},
};
return sendGrid.send(msg);
})
.catch((error) => {
console.log(error);
return null;
});
});

There are at least two programming problems here.
You're not returning a promise from the function that resolves when all the async work is complete. This is a requirement. Calling then and `catch is not sufficient. You actually have a return a promise from the function handler.
You're calling sendGrid.send(email), but you never defined a variable email anywhere in the code. If this is the case, then you're passing an undefined value to sendgrid.
There is also the possibility that your project is not on a payment plan, in which case, the call to sendgrid will always fail due to lack of outbound networking on the free plan. You will need to be on a payment plan for this to work at all.

firebase sendEmailVerification does not give error on non exisent email address

I'm developing an authentication system for my React app with Firebase Auth. When the user signs up, firebase auth registers the user (createUserWithEmailAndPassword) and returns a promise with auth.uid and auth.emailVerified set to "false". This is fine.
I then use sendEmailVerification() method so the email address can be verified. I've tested the code and it works ok for a "valid" and "existing" email address. "catch" does give error for duplicate email address as expected. The problem is, it does not send the NON-EXISTING email (which I suppose is the correct bahaviour) but its should then give an error (so I can display to the user) which it does not.
Can someone explain why I'm not getting error for NON EXISTENT email address?
export const unpSignUp = (newUser) => {
console.log("newUser", newUser);
return (dispatch, getState, { getFirebase, getFirestore }) => {
const firebase = getFirebase();
const firestore = getFirestore();
firebase.auth().createUserWithEmailAndPassword(
newUser.unp_a05_email,
newUser.unp_a10_password
)
.then((response) => {
return firestore
.collection("unps")
.doc(response.user.uid)
.set({
unp_a02_surname: newUser.unp_a02_surname,
unp_a03_name: newUser.unp_a03_name,
unp_a06_verify_email_sent_datetime: null,
unp_a07_email_verified_on_datetime: null,
unp_a18_acc_created_on_datetime: moment().format("YYYY MM DD HH:mm:ss"),
});
})
.then((response) => {
console.log("SIGNUP SUCCESS ", response);
// user has been signed up, next step is to send verification email
dispatch({ type: SIGNUP_SUCCESS })
})
.then(() => {
// user has been signed up, next step is to send verification email
console.log('send email adr verification')
return firebase.auth().currentUser.sendEmailVerification()
})
.then( (response) => {
console.log("Verification email sent", response);
const user = firebase.auth().currentUser
console.log('current user', user)
const unp = firestore.collection("unps").doc(user.uid);
return unp.update({
unp_a06_verify_email_sent_datetime: moment().format("YYYY MM DD HH:mm:ss"),
})
})
.then( () => {
console.log(`unp_a06_verify_email_sent_datetime update to ${moment().format("YYYY MM DD HH:mm:ss")} `)
})
.catch((error) => {
console.log("SIGNUP ERROR", error);
console.log("SIGNUP ERROR CODE", error.code);
console.log("SIGNUP ERROR MESAGE", error.message);
dispatch({ type: SIGNUP_ERROR, error });
});
};
};

From firebase reference,
the return type of sendEmailVerification is Promise<void> - and it does not tell about any error codes that are sent in case of wrong email or failed/bounce mails. The error code it mentions is with respect to actionCodeSettings
If the actionCodeSettings is not specified, no URL is appended to the action URL. The state URL provided must belong to a domain that is whitelisted by the developer in the console. Otherwise an error will be thrown.
Thus it can not be checked if it is a valid email id. (This is expected behaviour as receiving mail servers may be down at times and hence there is a concept of retrying bounce mails)

I cannot save data to the database after creating user authentication

I cannot save data to the database after creating user authentication on firebase, the following error appears on the console: "TypeError: firebase.auth (...). CurrentUser is null". it seems that the code cannot read the user's uid after creating the authentication
the code:
createUserButton.addEventListener('click', function(){
firebase.auth().createUserWithEmailAndPassword(emailInput.value, passwordInput.value)
var user = {
nome: "Pedro",
sobrenome: "Ribeiro",
cpf: "946.201.340-31",
uid: firebase.auth().currentUser.uid,
email: emailInput.value,
password: passwordInput.value
}
writeUserData(user)
.catch(function(error) {
// Handle Errors here.
})
})
function writeUserData(user) {
firebase.database().ref('users/' + firebase.auth().currentUser.uid).set(user).catch(error =>{
console.log(error.message)
})
}
what needs to be changed so that the code can read the user's uid and save the data in the database?

You're not waiting until the new user creation process is complete before writing the database. createUserWithEmailAndPassword returns a promise which resolves when the work is done. It will give you a UserCredential object to work with.
firebase.auth().createUserWithEmailAndPassword(emailInput.value, passwordInput.value)
.then(userCredential => {
// write the database here
})
.catch(error => {
// there was an error creating the user
})

How do i get displayName from Firebase?

I have been having trouble getting the display name out of Firebase.
below is the Sign Up process coding
const promise = auth.createUserWithEmailAndPassword(email, pass)
.then(
(user)=>{
// here you can use either the returned user object or
firebase.auth().currentUser. I will use the returned user object
if(user){
user.updateProfile({
displayName: textUsername.val(),
// photoURL: // some photo url
})
}
})
.then( function() {
console.log('User Name Set!')
})
.catch(function() {
console.log('error')
});
promise.catch(e => console.log(e.message));
})
firebase.auth().onAuthStateChanged(firebaseUser => {
if(firebaseUser) {
console.log(firebaseUser)
} else {
console.log('not logged in');
}
})
the console.log shows 'user name set!' and the console.log(firebaseUser) shows that the displayName is set in the database of the currentUser, and the name is what i expected.
However,
console.log(firebase.auth().currentUser)
gives null, and
if (user != null) {
console.log(user.displayName);
}
this also returns as null.
I have been looking for ways to get the data of the firebase dataset but I cannot manage to do that.
it will be great if anyone can give me any advice about it.
Thank you.

firebase.auth().currentUser.displayName returns the OAuth provider's display name. However, firebase.auth().currentUser resolves asynchronously and is empty/null for a moment on page load. If you put the console.log(firebase.auth().currentUser.displayName) inside the .onAuthStateChanged you'll see that.

I ended up using recursion to solve this. I wish there was a more elegant way but this was the only thing that worked for me. Please share if you have solved this with a different solution!!
I needed this for creating new users. When someone signed in it never seems to return null.
The setTimeout() slows the recursion down by .5 seconds so that you don't get an error by calling the function too many times. You can speed it up or slow it down by adjusting the milliseconds.
Working code:
auth.onAuthStateChanged(user => {
if (user) {
// Everything inside here happens if user is signed in
console.log(user)
// Greet the user with a message and make it personal by using their display name
injectDisplayName = () => {
if(firebase.auth().currentUser.displayName === null){
console.log('happens');
setTimeout(() => {
injectDisplayName()
}, 500)
} else {
document.getElementById('display-name-header').textContent = `Hello, ${firebase.auth().currentUser.displayName}`
}
}
injectDisplayName()
} else {
// Everything inside here happens if user is not signed in
}
})