FirebaseUI auth redirecting before Firestore document is created - vue.js

Question

Setup: Vue.js, Vuetify, FirebaseUI, Firestore, Vue-router, Vue CLI
My expectation: Oauth would succeed, set userEmail in localStorage, create a Firestore document in the users collection, then the page would redirect.
Reality: Oath succeeds, userEmail is set in localStorage, page redirects
I have tried using async/await to no avail and returning nothing from signInSuccessWithAuthResult and using signInSuccessUrl for the redirect didn't work either. window.location.href = "/" and location.href.replace("/") also didn't change anything. If I remove the redirect, the document is created which leads me to believe the redirect interrupts the document creation. I am very new to Firebase but I don't see why this isn't working. Any help would be greatly appreciated and if you need more details please comment.
let ui = firebaseui.auth.AuthUI.getInstance();
if (!ui) {
ui = new firebaseui.auth.AuthUI(firebase.auth());
}
let uiConfig = {
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
],
signInFlow: "popup",
callbacks: {
signInSuccessWithAuthResult: function(authResult) {
let email = authResult.user.isAnonymous
? "guest"
: authResult.user.email;
localStorage.setItem("userEmail", email);
if (
authResult.additionalUserInfo.isNewUser &&
!authResult.user.isAnonymous
) {
db.collection("users")
.add({
email: authResult.user.email,
expire: new firebase.firestore.Timestamp.now(),
positions: [0, 0, 0],
premium: false
})
.then(() => {
window.location.pathname = "/";
});
}
window.location.pathname = "/";
return false;
}
}
};
ui.start("#firebaseui-auth-container", uiConfig);

Answer 1

I think there are a couple of problems with the flow here, one is general with how async works and the other is specific to FirebaseUI. I'll cover both.
First let's look at the sequence in which your callback code will run:
signInSuccessWithAuthResult: function(authResult) {
// 1. BEGINS RUNNING HERE
let email = authResult.user.isAnonymous
? "guest"
: authResult.user.email;
localStorage.setItem("userEmail", email);
if (
authResult.additionalUserInfo.isNewUser &&
!authResult.user.isAnonymous
) {
// 2. THIS FUNCTION KICKS OFF BUT WILL RETURN IMMEDIATELY
db.collection("users")
.add({
email: authResult.user.email,
expire: new firebase.firestore.Timestamp.now(),
positions: [0, 0, 0],
premium: false
})
.then(() => {
// 4. THIS WOULD RUN LAST, BUT PROBABLY IS ABORTED/SKIPPED DUE TO 3
window.location.pathname = "/";
});
}
// 3. THIS REDIRECT WILL BE TRIGGERED WHILE THE .add() IS EXECUTING async
window.location.pathname = "/";
return false;
}
}
};
So to fix that, you'd need to remove the redirect at 3) and only redirect after the collection has been saved.
BUT! FirebaseUI will automatically redirects to the "success" page when the callback returns. So even if you did the above change, the FirebaseUI redirect would randomly abort the db.collection.add() and reload the page to '/success' the default.
To stop this you have to block the return of the callback, by using async/await, and remove your manual redirect and configure the success url.
const uiConfig = {
signInSuccessUrl: '/success',
callbacks: {
signInSuccessWithAuthResult: async function(authResult) {
// ...
await db.collection("users").add({ ... });
}
}
};
Adding async to the callback allows you to block and await for the db.collection.add to return. Then you shouldn't redirect manually as the signInSuccessUrl does it for you so you'd get a second race-condition.
I've simplified it here, so ensure you don't add any other non-awaited async tasks else they'd race too. (e.g. LocalStorage.setItem() is blocking, but if you used AsyncStorage.setItem() you'd have the same issue and should await that too).