FirebaseError: Missing or insufficient permissions. -quasar & Firebase - firebase

Question

Im Using Quasar and Firebase
I Get FirebaseError: Missing or insufficient permissions. error on console
error
Script:
// gets from the firebase
const path = "/newpage";
this.$auth.onAuthStateChanged(authUser => {
if (authUser) {
this.$bind('userz', this.$db.collection('users'));
this.$db.collection('users').doc(authUser.uid).get()
.then(snapshot => {
const userData = snapshot.data();
console.log(userData);
(this.$route.path !== path);
this.$router.push(path).catch(err => {});
this.livePaper = false;
})} else {
this.livePaper = true;
console.log('user logged out');
this.$router.push('/Login').catch(err => {});
}
})
},
whenever I put
```this.$bind('userz', this.$db.collection('users'));```
missing permission happens
but when i remove the bind
It has no errors
though
I want to get the username: value in the field and put it on my nav
firebase - username
``` <li v-for="(users, uid) in userz" :key="uid">
{{users.username}} <q-btn v-on:click="livePaper = true" label="Sign Out" #click="logOut()" color="green"/>
```
But i cant get it unless i remove
```this.$db.collection('users').doc(authUser.uid).get()
.then(snapshot => {
const userData = snapshot.data();
console.log(userData);```
again when i remove it missing permission happens again.
what should I do
Whole Code:
<template>
<q-layout view="hHh lpR fFf">
<q-header elevated class="bg-primary text-white">
<q-toolbar>
<q-btn v-if="!livePaper" dense flat round icon="menu" #click="left = !left" />
<q-toolbar-title>
<q-avatar>
<img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg">
</q-avatar>
Title
</q-toolbar-title>
<div class="q-pa-md hid" v-if="!livePaper">
<li v-for="(users, uid) in userz" :key="uid">
{{users.username}} <q-btn v-on:click="livePaper = true" label="Sign Out" #click="logOut()" color="green"/>
</li>
</div>
</q-toolbar>
</q-header>
<q-drawer v-if="!livePaper" show-if-above v-model="left" side="left" bordered>
<!-- drawer content -->
<q-scroll-area style="height: calc(100% - 150px); margin-top: 150px; border-right: 1px solid #ddd">
<q-list padding>
<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="inbox" />
</q-item-section>
<q-item-section>
Inbox
</q-item-section>
</q-item>
<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="star" />
</q-item-section>
<q-item-section>
Star
</q-item-section>
</q-item>
<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="send" />
</q-item-section>
<q-item-section>
Send
</q-item-section>
</q-item>
<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="drafts" />
</q-item-section>
<q-item-section>
Drafts
</q-item-section>
</q-item>
<q-item #click="icon = true" clickable v-ripple>
<q-item-section avatar>
<q-dialog v-model="icon">
<q-card style="width: 570px; max-width: 80vw;" class= "q-pa-xl ">
<q-card-section class="row items-center q-pb-none ">
<div class="text-h6">Sign Up</div>
<q-space />
<q-btn icon="close" flat round dense v-close-popup />
</q-card-section>
<q-separator />
<q-card-section >
<q-input filled v-model="usrnm" label="Username" id="usrnm" lazy-rules
:rules="[ val => val && val.length > 0 || 'Please type something']"
/>
<q-input filled v-model="eml" label="Email" id="eml" lazy-rules
:rules="[ val => val && val.length > 0 || 'Please type something']"
/>
<q-input
filled
type="password"
v-model="pswrd"
id="pswrd"
label="Password"
lazy-rules
:rules="[ val => val && val.length > 0 ||'Please type a real age'
]"
/>
<div>
<q-btn label="Sign Up" type="submit" color="primary" #click="signUps()" />
</div>
</q-card-section>
</q-card>
</q-dialog>
<q-icon name="person_add" />
</q-item-section>
<q-item-section>
Sign Up
</q-item-section>
</q-item>
</q-list>
</q-scroll-area>
<q-img class="absolute-top" src="https://cdn.quasar.dev/img/material.png" style="height: 150px">
<div class="absolute-bottom bg-transparent">
<q-avatar v-ripple size="56px" class="q-mb-sm">
<img src="https://cdn.quasar.dev/img/boy-avatar.png">
</q-avatar>
<div class="text-weight-bold"></div>
<div>#rstoenescu</div>
</div>
</q-img>
</q-drawer>
<q-page-container>
<router-view />
</q-page-container>
</q-layout>
</template>
<script>
export default {
data () {
return {
left: false,
userz: [],
livePaper: false,
icon: false,
eml: '',
pswrd: '',
usrnm: '',
index: 0
}
},
created() {
// gets from the firebase
const path = "/newpage";
this.$auth.onAuthStateChanged(authUser => {
if (authUser) {
this.$db.collection('users').doc(authUser.uid)
.get()
.then(snapshot => {
const userData = snapshot.data();
console.log(userData);
(this.$route.path !== path);
this.$router.push(path).catch(err => {});
this.$bind('userz', this.$db.collection('users').doc(authUser.uid));
this.$bind('userz', this.$db.collection('users'));
this.livePaper = false;
})} else {
this.livePaper = true;
console.log('user logged out');
this.$router.push('/Login').catch(err => {});
}
})
},
methods: {
logOut(){
this.$auth.signOut();
this.livePaper = true;
},
signUps() {
this.$auth.createUserWithEmailAndPassword(this.eml, this.pswrd).then(cred => {
return this.$db.collection('users').doc(cred.userz.uid).set({
email: this.eml,
username: this.usrnm
});
this.isEdit = false
this.text = ''
this.yr = ''
}).then;(() => {
});
// ...
}
}
}
</script> ```

Answer 1

This might be a duplicate thread of
firestore: PERMISSION_DENIED: Missing or insufficient permissions, at least this is where i got help for this problem.
After setting up the rules in a proper way, the error will disappear. I had the same problem with the quasar firebase sample app too.
Here are the docs for your the firebase rules that contain all the details for setting up the rules:
https://firebase.google.com/docs/firestore/security/get-started
basically the line
allow read, write: if false;
is the problem, you could change it to the following to allow only signed in users to access the database:
allow read, write: if request.auth != null;
the following code is not recommendable because it enables unauthenticated access to your database, so don't use it unless you are in a testing scenario:
allow read, write: if false;