Nuxt SSR Firebase - Permission denied

Question

I am using the firebase-nuxt plugin (https://firebase.nuxtjs.org/). Also I am using firebase auth and firestore. I have set up some rules, as to avoid read/write access unless the auth-object's user-id is set:

allow read: if request.auth.uid != null

I have successfully set up the way to dispatch onAuthStateChanged on nuxtServerInit. It seems to work as res.locals.user - object contains data accordingly:

async nuxtServerInit ({ dispatch }, { res }) {
    if (res && res.locals && res.locals.user) {
      const { allClaims: claims, ...authUser } = res.locals.user
      console.log(res.locals.user)
      console.info(
        'Auth User verified on server-side.'
      )
      console.log(this.$fireAuth.currentUser)
      await dispatch('onAuthStateChanged', {
        authUser,
        claims
      })
    }
  }

However, this.$fireAuth.currentUser returns an empty object during the server side rendering. Obviously the client SDK doesn't work on the server side...

During server side rendering I have also an action that fills a navigation menu for the vuex-store:

const snapshot = await this.$fireStore.collection('Navigation').orderBy('order', 'asc').get()

This expression now returns the error; during SSR there's no authenticated user. Of course, when calling this code in the client-side it works:

The current user object appears. The same problem not only occurs during setting up the store, but also on checking a middleware (not serverMiddleswares, but "normal" middlewares). There's also a request for a $firestore-collection which results in a permission denied-error.

I have two solutions in mind but have no idea how to implement either:

Find a way to authenticate the user on the server side (maybe with the refresh token API??)
Find a way to force the action/middleware to be run only on the client side...

Or is there a third way?

Nuxt SSR Firebase -> Permission denied

0 Answers