How to set a variable in a .then() to be used in a later .then() - Firebase

Question

I'm building an online platform for jugglers using ReactJS, Typescript and Firebase. I'm trying to make a system where admins can give out "golden tickets". Users can then send these golden tickets to their friends so that their friends can also make accounts.

I've gotten all the way through to the actual creation of the account.

The problem is, I need to do four things when they click Create Account (and currently, I do them in this order):

1. Upload their Profile Picture to firebase.storage
2. Create the user with their email and password using firebase.auth
3. Update the user's displayName and photoURL in firebase.auth
4. Create a doc for the user in firebase.firestore using the information that we have collected in the other steps.

At the moment it isn't working because in the later steps, some variables come up undefined.

Here is the code:

doRegisterWithEmailPasswordAndPhoto = async (
        email: string,
        password: string,
        firstname: string,
        lastname: string,
        username: string,
        photo: File | null
    ) => {
        let tempuid: string | null = null;
        let tempPhotoURL: string | null = null;
        await this.storage
            .ref()
            .child('profile-pictures/' + username)
            .put(photo ? photo : exampleProfilePic)
            .then((photoRef: firebase.storage.UploadTask) => {
                    tempPhotoURL = photoRef.snapshot.downloadURL;
                    return this.auth.createUserWithEmailAndPassword(
                        email,
                        password
                    );
            })
            .then((res: firebase.auth.UserCredential) => {
                if (res.user) {
                    tempuid = res.user.uid;
                    return res.user.updateProfile({
                        displayName: firstname + ' ' + lastname,
                        photoURL: tempPhotoURL,
                    });
                }
            })
            .then(() => {
                this.db.collection('users').doc(tempuid).set({
                    firstname: firstname,
                    lastname: lastname,
                    username: username,
                    email: email,
                    admin: false,
                    forumPosts: 0,
                    created: this.dbFunc.FieldValue.serverTimestamp(),
                });
            });
    };

So, as you can see, I tried to solve it by creating two temporary variables to store the items: tempuid and tempPhotoURL. But I am still getting uid is undefined errors.

Hope somebody can help me.

Thanks in advance!