VueJS + VueFire - Add data to Firebase Real Time Database with authentication

Question

I'm using VueJS with VueFire and I need to save data to a Firebase Real Time Database with user authorization.

Error message:

util.js?54b5:189 FIREBASE WARNING: set at /notes/-L5J8Hk8wKHOxH-TQEhb failed: permission_denied exports.warn @ util.js?54b5:189 Repo.js?6ebd:510

Uncaught (in promise) Error: PERMISSION_DENIED: Permission denied

at eval (Repo.js?6ebd:510)
at Object.exports.exceptionGuard (util.js?54b5:556)
at Repo.callOnCompleteCallback (Repo.js?6ebd:501)
at eval (Repo.js?6ebd:278)
at eval (PersistentConnection.js?eae0:411)
at PersistentConnection.onDataMessage_ (PersistentConnection.js?eae0:444)
at Connection.onDataMessage_ (Connection.js?33e2:262)
at Connection.onPrimaryMessageReceived_ (Connection.js?33e2:256)
at WebSocketConnection.eval [as onMessage] (Connection.js?33e2:157)
at WebSocketConnection.appendFrame_ (WebSocketConnection.js?4701:197)

My Firebase rule for authorization:

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

VueJS code addnote.vue:

<script>
 import Firebase from 'firebase'
  let config = {
    apiKey: '[...]',
    authDomain: '[...].firebaseapp.com',
    databaseURL: 'https://[...].firebaseio.com',
    projectId: '[...]',
    storageBucket: '',
    messagingSenderId: '[...]'
}
  let app = Firebase.initializeApp(config)
  let db = app.database()
  let notesRef = db.ref('notes')

export default {
    name: 'app',
    beforeCreate: function () {
      Firebase.auth().onAuthStateChanged((user) => {
        if (user) {
          this.user = user
          this.$bindAsArray('notes', db.ref(`notes/${user.uid}`))
        }
      })
    },
    firebase: {
      notes: notesRef
    },
    data () {
      return {
        user: null,
        newNote: {
          title: '',
          time: '',
          note: ''
        }
      }
    },
    methods: {
      addNote: function () {
        notesRef.push(this.newNote)
        this.newNote.title = ''
        this.newNote.time = ''
        this.newNote.note = ''
      },
      signInWithGoogle: function () {
        const provider = new Firebase.auth.GoogleAuthProvider()
        Firebase.auth().signInWithRedirect(provider).then((result) => {
          this.user = result.user
        }).catch(error => console.log(error))
      }
    }
}
</script>

Answer 1

You're listening to /notes and writing to ``/notes/-L5J8Hk8wKHOxH-TQEhb, while your rules only give you permission on/users/$uid`. Since you don't have permission on the latter, the write fails.

At a minimum you'll want to change:

beforeCreate: function () {
  Firebase.auth().onAuthStateChanged((user) => {
    if (user) {
      this.user = user
      this.$bindAsArray('notes', db.ref(`/users/${user.uid}`))
    }
  })
},

And:

addNote: function () {
    db.ref('users').child(this.user.uid).push(this.newNote)
    this.newNote.title = ''
    this.newNote.time = ''
    this.newNote.note = ''
},