When refreshing the page I get the Error [FirebaseError]: Missing or insufficient permissions.

Hi everyone. Every time the page is refreshed, it verifies if it is authenticated and also consults the data to cloud firestore. But the problem comes here, I get the following error. [FirebaseError]: Missing or insufficient permissions. I am using the authenticated ssr.

When I had the Cloud firestore rules so that any user can consult and read data, I did not get this error, but now that I established the rules so that only authenticated users have access, I started getting this error. Maybe any suggestions?

This is the code of nuxtServerInit:

async nuxtServerInit({ dispatch, commit }, { res, ctx }) {
    if (res && res.locals && res.locals.user) {
      const { allClaims: claims, idToken: token, ...authUser } = res.locals.user;

      await dispatch("onAuthStateChangedAction", {
        authUser,
        claims,
        token
      });
    }
  },

This is the onAuthStateChangedActioncode where I am consulting the data to cloud firestore:

async onAuthStateChangedAction({ commit, dispatch }, { authUser, claims }) {
    try {
      if (!authUser) {
        // await dispatch("cleanupAction");

        return;
      }

      const { uid, email, emailVerified, displayName, photoURL } = authUser;

      let respUsuario = await this.$fireStore.collection("usuarios").doc(uid).get();
      if (respUsuario.data().tipoUsuario == "FUNCIONARIO") {
        let respFuncionario = await this.$fireStore.collection("funcionarios").doc(uid).get();
        let user = {
          uid,
          emailVerified,
          displayName,
          photoURL,
          email,
          nombre1: respFuncionario.data().nombre1,
          apellido1: respFuncionario.data().apellido1,
          juntaCantonal: respFuncionario.data().juntaCantonal,
          tipoUsuario: respUsuario.data().tipoUsuario,
          rol: respFuncionario.data().rol
        };
        commit("SET_USER", user);
      }
    } catch (error) {
      console.log(error);
    }
  }

And these are the rules that are defined in my cloud firestore

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth.uid != null;
    }
  }
}

[lupas]

Hey guys, sorry for the late response. Let me try to clear some things up:

In general: I think you guys don’t all have the same issue, so I’ll split my answers up:

First @bozobit:

As with your example stated here, you are not using serverLogin and therefore the Client SDK is also not meant to be logged in on server-side. This option only provides you with the information about the authenticated user, but we do not log in the Client SDK. Therefore, any calls you do in fetch() hooks are not authenticated.

I updated the documentation to make it more clear. If such calls shall be authenticated, one can use serverLogin - BUT this is experimental and might lead buggy - so I advice anyone against using it except for playing around.

@GuasaPlay

On contrary to bozobit you are using the experimental serverLogin, which tries to authenticate the Firebase Client SDK on the server by creating a new session for each user. This is not well-tested and runs into problems after a certain amount of traffic due to limitations by Firebase - so I don’t advice you to use this for a productive website.

If you still want to play around with it:

Could you try setting loginDelay to 20 to test if it works then (see here)? Not sure if that could be it, but give it a try. As mentioned in the docs this is experimental so you might need to do some investigating yourself.

@Kazuto , @loicmarie, @ChristophePetitjeanAi3

Your problem is that the serviceWorker is/was not properly running and therefore the authUser came back empty. Seems most of you resolved the issue, if not please create a new issue for it so we can look at it separated from the other issue.

@loicmarie

Regarding the dev config: This shall always be false in production. For development, usually you can set it to true too. If you run into HRM issues thogh due to the PWA service worker, you can set it to false in dev (but in that case don’t expect auth to work). So dev: process.NODE_ENV !== 'production' is fine. If you run into the GuasaPlay’s issue now, follow what I wrote to GuasaPlay 😃

In general

In my humble opinion SSR authentication is rarely necessary. I generally SSR all my non-authenticated content, and load auth-content dynamically (e.g. in the mounted() hook). I don’t see much benefit in server-side render user-specific content that is not available to any of Google’s crawlers anyway.

You can do this by e.g. by putting all user-authenticated data in <client-only> tags and setting fetchOnServer to true, see here, or by loading your data in the mounted() hook.

And with the simple ssr: true option you at least know if a user is logged in or not and see the user claims, so based on that you can make most template decisions (e.g. show user dropdown in navbar, show “login” or “logout” and so on) so you can server render such elements easily.

Hope that helps at least a bit.

[lupas]

@loicmarie The way I wrote it is a bit wrong, what I meant is that server-side rendering user specific data is rarely necessary. With the simpe ssr: true option you can already check if the client is signed in, so that should suffice to make the call whether the route shall be protected or not. Then you just load & render the user specific content only on client side.

Regarding the docs: Will keep it in my head (see https://github.com/nuxt-community/firebase-module/issues/363) and probably create a good example at some point, thx!