Nuxt | FirebaseError: Missing or insufficient permissions. - Page refresh fixes issue

[JamesDevGit]

Firebase returns permission errors on first page load. Refreshing page resolve permission issues and display product array data.

plugins/flamelink.js

import flamelink from 'flamelink/app'
import 'flamelink/content'
import 'flamelink/storage'
import 'flamelink/settings'

// console.log('DEV here', flamelink)
export default ({ app }) => {
  let firebaseApp

  if (process.server) {
    const admin = require('firebase-admin')

    if (!admin.apps.length) {
      const serviceAccount = require(process.env
        .FLAMELINK_PATH_TO_SERVICE_ACCOUNT)
      firebaseApp = admin.initializeApp({
        credential: admin.credential.cert(serviceAccount),
        databaseURL: process.env.FLAMELINK_DB_URL,
        storageBucket: process.env.FLAMELINK_STORAGE_BUCKET
      })
    } else {
      firebaseApp = admin.app()
    }
  } else {
    const firebase = require('firebase/app')
    require('firebase/auth')
    require('firebase/firestore')
    require('firebase/storage')

    if (!firebase.apps.length) {
      firebaseApp = firebase.initializeApp({
        apiKey: process.env.FLAMELINK_API_KEY,
        authDomain: process.env.FLAMELINK_AUTH_DOMAIN,
        databaseURL: process.env.FLAMELINK_DB_URL,
        projectId: process.env.FLAMELINK_PROJECT_ID,
        storageBucket: process.env.FLAMELINK_STORAGE_BUCKET,
        messagingSenderId: process.env.FLAMELINK_MESSAGING_SENDER_ID
      })
    } else {
      firebaseApp = firebase.app()
    }
  }

  app.flamelink = flamelink({ firebaseApp, dbType: 'cf' })
}

Products.vue

<div class="products">
     <div v-for="product in products" :key="product.id" class="products_container">
              <product :product="product" />
     </div>
</div>

<script>
import Product from '~/components/Product.vue'

export default {
  components: {
    Product
  },

  data () {
      return {
        products: [],
     }
  },

  async asyncData({ app }) {
    try {
      const products = await app.flamelink.content.get({
      schemaKey: 'products',
      populate: true
    })
      console.log('All of your products:', products);
      return { products }
    } catch (err) {
      console.log(err)
      return { products: [] }
    }

  }
}
</script>

[jperasmus]

The permission denied errors you are seeing would mean that when your code runs in the browser, the calls to your Firestore database expect your user to be authenticated.

You can resolve this in a number of different ways depending on your specific project's use case:

1. Change your database security rules so that they do not expect an authenticated user for any data you want to generally make available. For that, you can read this
2. Get a user to sign in first before querying content that requires authentication.
3. Use Firebase Auth's anonymous login to authenticate the current user anonymously

[JamesDevGit]

Thanks jp - am testing these out to see which works best

[MLoth]

I faced the same problem. In my case I had to allow fl_content, fl_files and fl_schemas public read access.