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>

Frank van Puffelen · Accepted Answer · 2018-01-20 15:55:24Z

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 = ''
},

answered Jan 20, 2018 at 15:55

Frank van Puffelen

603k85 gold badges895 silver badges869 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tom Over a year ago

Thank you, I ran into 2 follow up questions. 1. How to add a child to the user.uid? I need to store all notes like this: users/123/notes/abc (users/userID/notes/noteID) +++ 2. Why does this remove all notes instead of only the selected one? removeNote: function (note) { db.ref('users/uid').child(this.user.uid).remove(note['.key'])

Frank van Puffelen Over a year ago

The DatabaseReference.remove() method doesn't take an argument for the child to remove. So you're indeed removing all notes for the user. You'll want db.ref('users/uid').child(this.user.uid).child(note['.key']‌).remove() instead. I recommend keeping the reference docs handy while developing on Firebase.

Tom Over a year ago

Thank you, I tried your code and got this error: Parsing error: Unexpected character '‌' ESLINT points to the this part: ['.key']‌). Any idea

Frank van Puffelen Over a year ago

Nope. I just copied it from your original comment and have no way to know what note refers to.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related