Update Firestore document ID and auth email with same method - firebase

Question

I am teaching myself how to code by building a little project site but have been stuck for a few days trying to figure out how to update users' profile and account information. I am able to figure out how to retrieve and display the information but am having difficulty in getting them to update it
Goal:
Update the account email that they use at login
Update their full name stored in firestore (I figured this one out)
Update the document id of their user in Firestore (which is used for their profile slug)
So far I have been able to figure out how to display all three in the form fields, but only how to update the user's full name in Firestore with point 1 and 3 still escaping me.
For Goal 2 I used "Update a document" from Firestore documentation here https://firebase.google.com/docs/firestore/manage-data/add-data which works successfully
For updating user email I attempted to use the update email method from here https://firebase.google.com/docs/auth/web/manage-users
Screenshot of document in Firestore
<template>
<v-container fill-height>
<v-layout justify-center align-center v-if="profile">
<v-flex xs12 sm8 md8 style="max-width: 600px">
<v-card >
<v-toolbar dark color="primary">
<v-toolbar-title>Profile</v-toolbar-title>
</v-toolbar>
<v-flex class="ml-3 my-4">
<v-avatar size="75px" class="mr-2" >
<img
class="img-circle elevation-2 "
src="https://raw.githubusercontent.com/vuetifyjs/docs/dev/static/doc-images/lists/1.jpg"
>
</v-avatar>
<v-btn color="primary" >Upload</v-btn>
<v-btn>Delete</v-btn>
</v-flex>
<v-spacer></v-spacer>
<v-divider></v-divider>
<v-spacer></v-spacer>
<v-card-text>
<v-form>
<v-text-field
prepend-icon="person"
required
v-model="profile.fullname"
name="fullname"
label="Full Name"
type="text">
</v-text-field>
<v-text-field
v-if="user"
prepend-icon="email"
required
v-model="user.email"
name="email"
label="Email"
type="text">
</v-text-field>
<v-text-field
v-model="this.profile.id"
hint="Create a unique URL for your profile. Many people use their first and last name. <br> [Ex: reel.ly/misha.collins]"
persistent-hint
id="username"
prepend-icon="link"
name="username"
required
label="Profile URL "
type="text">
</v-text-field>
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<!-- <p class="red-text center" v-if="feedback">{{ feedback }}</p> -->
<v-btn flat #click.native="updatemyProfile" color="primary">Save</v-btn>
</v-card-actions>
</v-card>
<!-- <v-card style="margin-top: 30px" class="elevation-2">
<v-toolbar dark color="primary">
<v-toolbar-title>Billing</v-toolbar-title>
</v-toolbar>
<v-card-text>
<v-form>
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<p class="red-text center" v-if="feedback">{{ feedback }}</p>
<v-btn flat #click.native="updateBilling" color="primary">Update Account</v-btn>
</v-card-actions>
</v-card> -->
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import db from '#/firebase/init'
import firebase from 'firebase'
import slugify from 'slugify'
export default {
name: 'Account',
data () {
return {
user: null,
profile: null,
feedback: null,
docid: null
}
},
created () {
let ref = db.collection('users')
// get current profile to list full name
ref.where('user_id', '==', firebase.auth().currentUser.uid).get()
.then(snapshot => {
snapshot.forEach(doc => {
this.profile = doc.data(),
this.profile.id = doc.id
})
})
// get current user to list email
firebase.auth().onAuthStateChanged((user) => {
if (user) {
this.user = user
// console.log(this.user)
} else {
this.user.uid = null
}
})
},
methods: {
updatemyProfile() {
// working to change fullname but not document id
let ref = db.collection('users')
// get current profile
ref.where('user_id', '==', firebase.auth().currentUser.uid).get()
.then(snapshot => {
snapshot.forEach(doc => {
this.profile = doc.data(),
this.profile.id = doc.id
})
})
var docRef = db.collection("users").doc(this.profile.id)
return docRef.update({
id: this.profile.id, // this is adding an id field and assigning this.profile.id value to it instead of updating the document id of the user
fullname: this.profile.fullname
})
// update email address
var user = firebase.auth().currentUser
user.updateEmail(this.user.email).then(function() {
console.log("success")
}).catch(function(error) {
// An error happened.
})
}
}
}
</script>
Any help is much appreciated!

Answer 1

Look at this bit of code at the end of your function:
var docRef = db.collection("users").doc(this.profile.id)
return docRef.update({
id: this.profile.id,
fullname: this.profile.fullname
})
// update email address
var user = firebase.auth().currentUser
user.updateEmail(this.user.email).then(function() {
console.log("success")
}).catch(function(error) {
// An error happened.
})
You're returning early from the function with the return keyword after you call the update() method, which means that any code after that in the function (the update of email address) won't get run.