Firebase error code 403 when uploading to storage and database at the same time using React Native and Image Crop Picker

Question

I'm able to successfully upload images to firebase storage but I'm also trying to upload the image url to my firebase database.

The problem I'm having is that the url that gets uploaded to firebase database has a different token than the successful firebase storage image therefore I get an error message (error code 403, permission denied).

The problem could be because of the placement of my addProfilePhototoDatabase function but I'm not sure where else to put it.

Please see my code in the attached screenshot below.

Here's the openPicker function code:
I'm finding it hard to provide minimal code for this since it is all important and related. Anything I take out could be important.

openPicker() {
    const { currentUser } = firebase.auth()
    const Blob = RNFetchBlob.polyfill.Blob
    const fs = RNFetchBlob.fs
    window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest
    window.Blob = Blob
    ImagePicker.openPicker({
      width: 105,
      height: 105,
      compressImageMaxWidth: 400,
      compressImageMaxHeight: 400,
      compressImageQuality: 0.8,
      cropping: true,
      mediaType: 'photo'
    }).then(image => {
      const imagePath = image.path
      let uploadBlob = null
      const imageRef = firebase.storage()
        .ref(`/users/${currentUser.uid}`)
        .child('profile.jpg')
      let mime = 'image/jpg'
      fs.readFile(imagePath, 'base64')
        .then((data) => {
          return Blob.build(data, { type: `${mime};BASE64` })
      })
      .then((blob) => {
        uploadBlob = blob
        return imageRef.put(blob, { contentType: mime })
      })
      .then(() => {
        uploadBlob.close()
        return imageRef.getDownloadURL()
      })
      .then((url) => {
        let obj = {}
        obj["profilePhoto"] = url
        this.addProfilePhotoDatabase() // this is where I'm attempting to upload the url to the database and where the problem is
        this.setState(obj)
      })
      .catch((error) => {
        Alert.alert(error)
      })
  })
  .catch((error) => {
    Alert.alert(error)
  })
}

Code for the addProfilePhotoDatabase function:

addProfilePhotoDatabase() {
  const { currentUser } = firebase.auth();
  firebase
    .database()
    .ref(`/users/${currentUser.uid}/profile`)
    .update({
      ProfilePhoto: this.state.profilePhoto,
    })  
}

Here's how I'm calling the openPicker function:

<TouchableOpacity style={[styles.profilePhotoContainer]} onPress={ () => this.openPicker() }>
    <Image source={require('../assets/images/icons/today/addProfile.png')} style={styles.profilePhoto}/> 
  </TouchableOpacity>

Here are my firebase storage rules:

service firebase.storage { 
  match /b/{bucket}/o { 
    match /{allPaths=**} { 
      allow read, write: if request.auth != null; 
    } 
  } 
}

And my firebase database rules:

{ 
  "rules": { 
    "users": { 
      "$uid": { 
        ".read": "$uid === auth.uid", 
        ".write": "$uid === auth.uid" 
      } 
    } 
  } 
}

Answer 1

Upon further review just I suspected, I was calling the addProfilePhotoDatabase() in the wrong place.

Before:

  .then((url) => {
    let obj = {}
    obj["profilePhoto"] = url
    this.addProfilePhotoDatabase() //at this point state hasn't been set yet and the url was being added to firebase database with the wrong token which gave me a 403 error
    this.setState(obj)
  })

After:

  .then((url) => {
    let obj = {}
    obj["profilePhoto"] = url
    this.setState(obj)
    this.addProfilePhotoDatabase() //at this point state is set and the url gets added correctly
  })