Function called server side returns ERROR INTERNAL.

jonadeline commented 3 years ago

Hi all !

I'm experimenting an issue when calling a firebase functions in the Nuxt.js asyncData hook in my page (i also tried with the fetch hook and same error). I'm getting the following error from Firebase :

 ERROR  INTERNAL                                                                    

  at new HttpsErrorImpl (node_modules/@firebase/functions/dist/index.node.cjs.js:62:28)
  at _errorForResponse (node_modules/@firebase/functions/dist/index.node.cjs.js:157:12)
  at Service.<anonymous> (node_modules/@firebase/functions/dist/index.node.cjs.js:574:33)
  at step (node_modules/tslib/tslib.js:141:27)
  at Object.next (node_modules/tslib/tslib.js:122:57)
  at fulfilled (node_modules/tslib/tslib.js:112:62)
  at runMicrotasks (<anonymous>)
  at processTicksAndRejections (internal/process/task_queues.js:93:5)

I also tried to run the same function client side only (as you can see in the code below) and its working like a charm so I don't understand what I'm doing wrong on the server side. Any help would be greatly appreciated. Thanks in advance.

Here is the code of my page :

<template>
  <div>
    <ul>
      <li
        v-for="post in posts"
        :key="post._id"
        class="bg-white shadow w-1/2 p-2 rounded-md"
      >
        {{ post._id }}
      </li>
    </ul>

    <Btn @click="getPosts()">Get posts</Btn>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  middleware: 'authenticated',
  data() {
    return {
      posts: [],
    }
  },
  async asyncData({ store, app }) {
    const res2 = await app.$fire.functions.httpsCallable('getPosts')({
      uid: store.state.authUser.uid,
      limit: 10,
      offset: 1,
    })

    console.log(res2)
    const posts = res2.data
    return { posts }
  },
  methods: {
    async getPosts() {
      const res = await this.$fire.functions.httpsCallable('getPosts')({
        uid: this.$store.state.authUser.uid,
        limit: 10,
        offset: 1,
      })

      this.posts = res.data
    },
  },
})
</script>

And my firebase config in the nuxt.config.js

firebase: {
    config: {
      apiKey: process.env.FIREBASE_API_KEY,
      authDomain: process.env.FIREBASE_AUTH_DOMAIN,
      databaseURL: process.env.FIREBASE_DATABASE_URL,
      projectId: process.env.FIREBASE_PROJECT_ID,
      storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
      messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
      appId: process.env.FIREBASE_APP_ID,
      measurementId: process.env.FIREBASE_MEASUREMENT_ID,
    },
    services: {
      auth: {
        persistence: 'local', // default
        initialize: {
          onAuthStateChangedAction: 'onAuthStateChangedAction',
        },
        ssr: true,
      },
      firestore: true,
      functions: {
        location: 'europe-west3',
      },
    },
  }

tibs245 commented 3 years ago

Hi @jonadeline , The Firebase client SDK is disabled on server.

You need to activate serverLogin or credential option function for enable it : https://firebase.nuxtjs.org/service-options/auth#serverlogin

But this feature is experimental.

LeeGrobler commented 3 years ago

Did you add configure workbox? Adding

workbox: {
  importScripts: ['/firebase-auth-sw.js'],
  dev: process.env.NODE_ENV === 'development',
},

to the pwa section of nuxt.config.js solved this issue for me.

nuxt-community / firebase-module

Function called server side returns ERROR INTERNAL. #488