Problem with nuxt (SSR) and firestore rules - firebase

Question

I use Nuxt (universal mode) with Firestore, I set rules properly but I still get this error:
I get Missing or insufficient permissions
when I reload the page. When ccessing the page through the router, I don't get any error, the rules re working as it's supposed to.
Firestore is called in the asyncData (as it's a SSR app).
If I check the req.user in asynData when loading the page, everything looks fine. I have the roles and all information. It seems that serverMiddleware is activated after the asyncData, when reloading the browser. Any ideas why?
My Firestore rules:
service cloud.firestore {
match /databases/{database}/documents {
function isApplicant() {
return request.auth.token.roles.applicant == true
}
match /tests/{test} {
allow read: if isApplicant();
}
}
}
serverMiddleware:
const admin = require('../services/firebase-admin-init.js')
const cookieParser = require('cookie-parser')();
global.XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest
module.exports = async function (req, res, next) {
await getIdTokenFromRequest(req, res).then(idToken => {
if (idToken) {
addDecodedIdTokenToRequest(idToken, req).then(() => {
next();
});
} else {
next();
}
});
}
function getIdTokenFromRequest(req, res) {
if (req.headers.authorization && req.headers.authorization.startsWith('Bearer ')) {
return Promise.resolve(req.headers.authorization.split('Bearer ')[1]);
}
return new Promise(function(resolve) {
cookieParser(req, res, () => {
if (req.cookies && req.cookies.__session) {
console.log("new")
console.log('Found "__session" cookie');
// Read the ID Token from cookie.
resolve(req.cookies.__session);
} else {
resolve();
}
});
});
}
/**
* Returns a Promise with the Decoded ID Token and adds it to req.user.
*/
function addDecodedIdTokenToRequest(idToken, req) {
// console.log('Start addDecodedIdTokenToRequest')
return admin.auth().verifyIdToken(idToken).then(decodedIdToken => {
console.log('ID Token correctly decoded', decodedIdToken);
req.user = decodedIdToken;
}).catch(error => {
console.error('Error while verifying Firebase ID token:', error);
});
}
Nuxt config files:
const path = require('path');
const environment = process.env.NODE_ENV || 'development';
const envSet = require(`./config/env.${environment}.js`);
module.exports = {
env: envSet,
mode: 'universal',
plugins: [
{ src: '~/plugins/fireinit.js', ssr: false, },
{ src: '~/plugins/auth-cookie.js', ssr: false },
{ src: '~/plugins/fireauth.js', ssr: false }
],
router: {
},
serverMiddleware: [
'~/serverMiddleware/validateFirebaseIdToken'
],
modules: [
'vue-scrollto/nuxt',
['nuxt-validate', {
lang: 'ja'
}],
'#nuxtjs/axios',
],
css: [
{src: '~/assets/scss/app.scss', lang: 'scss'}
],
/*
** Customize the progress bar color
*/
loading: { color: '#403a8f' },
resolve: {
extensions: ['.js', '.json', '.vue', '.ts'],
root: path.resolve(__dirname),
alias: {
'~': path.resolve(__dirname),
'#': path.resolve(__dirname)
},
},
/*
** Build configuration
*/
buildDir: '../cloud/front/',
build: {
publicPath: '/assets/',
extractCSS: true,
quiet: false,
terser: {
terserOptions: {
compress: {
drop_console: environment === 'production' ? true : false,
},
},
},
},
}