How do I access vuefire in a Nuxt 3 Server Route?

[chilledtonic]

I'm trying to write a server route that renders the documents from a firestore query as an RSS feed. I'm having a very hard time understanding how to actually access the Firestore object when working inside a server route. Extrapolating out from the middleware example in the documentation, the code should look something like this:

import { getFirestore } from 'firebase/firestore';
export default defineEventHandler(async () => {
const db = getFirestore();
console.log(db)
})

This doesn't work, failing with Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options).

Nuxt has access to a service account and SSR should be working. What am I not understanding?

[chiuwah]

Since I had the same question as you, and there has been no answer to this question yet, I will share how I solved it. Not sure if it's the right way to do it, but it works for me. As far as I know, the Vuefire object is only available in the Vue part of the app and not in the server routes. So I created a useFirebaseServer composable in 'server/api/utils', where it checks if there already is an initialized app available and if not, a new Firebase app is initialized.

// server/utils/useFirebaseServer.js
import {initializeApp, getApps, cert} from "firebase-admin/app";

export default function useFirebaseServer() {
  if (getApps().length == 0)
    initializeApp({
      credential: cert('./firebase-credentials.json') // path to service account credentials file
    });
}

Then you can use this composable in the server route that you want:

// server/api/route.js
import useFirebaseServer from "~/server/utils/useFirebaseServer";

export default defineEventHandler( (event) => {
  useFirebaseServer(); // this will initialize Firebase app if not initialized yet
  // now you can use getAuth, getFirestore etc. from the firebase-admin SDK
})

[ekoeryanto]

import {ensureAdminApp} from 'vuefire/server'
const adminApp = ensureAdminApp()

vuefire/src/server/admin.ts

Line 21 in 1e2c71e

export function ensureAdminApp(

[robokozo]

Hmm.. I'm having trouble getting it working. Does this approach still work for you?

[Ripwords]

Just tried it last night, it's still working

[Subin-Qreative]

also i noticed that /api/__session session needs to be exposed, i had a middleware that was killing all routes except for few specified routes, but when using session cookies i believe vuefire calls /api/__session

[posva]

What do you mean by a middleware killing all routes?
Yes, VueFire adds that endpoint to handle session cookies

[lincolnlemos]

@posva I guess he had the same issue as me. I have a middleware that checks for specific information/params. In case it doesn't find it, he throws an error. That is how I figured out that Vuefire was making this call to /api/__session. I fixed it by adding the __session to my whitelist. I believe adding something related to this to the VueFire documentation authentication will help other people.

By the way, can you give details on what this __session does?

[posva]

that api endpoint creates the session cookie to authenticate the user on the server

[Subin-Qreative]

hey @posva i had a server middleware that checks if usertoken (non firebase) exists on certain routes, however i did not know about __session and because of that i would raise Unauthorised before the request reaches the actual path.. I am still learning about nuxt so I might be doing it completely wrong, but at the moment I have to manually check the route that is being called and ensure i skip those routes from being rejected.

but this did not seem to be the problem.
#1408 (comment)

'An internal error has occurred. Raw server response: "{"error":{"code":403,"message":"Request had insufficient authentication scopes.","errors":[{"message":"Insufficient Permission","domain":"global","reason":"insufficientPermissions"}],"status":"PERMISSION_DENIED","details":[{"@type":"type.googleapis.com/google.rpc.ErrorInfo","reason":"ACCESS_TOKEN_SCOPE_INSUFFICIENT","domain":"googleapis.com","metadata":{"service":"identitytoolkit.googleapis.com","method":"google.cloud.identitytoolkit.v1.SessionManagementService.CreateSessionCookie"}}]}}"'

I posted the error here. This lead me to believe that I had incorrect permission , which was really strange because it was working before and I did not make any changes to firebase. I spent many hours trying to figuring this out . But it seems like it wasn't a firebase configuration issue.

I finally dug into the __session route it self to see where "Error minting the cookie" is coming from.
...runtimeConfig.vuefire?.admin?.options , it seems to be be empty.

I double checked the .env file
GOOGLE_APPLICATION_CREDENTIALS='/example/service-account.json'
even tried to contain the entire service account object in one line ( just like your example in the docs). However it still didnt work

so i decided to comment out the ensureAdminApp portion

 assertMethod(event, "POST");
  const { token } = await readBody(event);
  const runtimeConfig = useRuntimeConfig();
  // const adminApp = FirebaseServer()
  
  // ensureAdminApp(
  //   {
  //     // NOTE: ensured by the module
  //     projectId: runtimeConfig.public.vuefire.config.projectId,
  //     ...runtimeConfig.vuefire?.admin?.options
  //   },
  //   "session-verification"
  // );
  const { app } = FirebaseServer();

  const adminAuth = getAuth();

and i replace it with the above,
FirebaseServer.ts is in made in nuxt server utils. ( I was using FirebaseServer util method prior to these issues to initialise and do firestore queries with firebase admin )

FiresbaseServer.ts

import {initializeApp, getApps, cert } from 'firebase-admin/app'
import data from '../../service-account.json';

export default function FirebaseServer() {
    let app

    if (getApps().length === 0) {
        app = initializeApp({
            credential: cert(data)
          });
  
    }

    return { app }
}

This seems to have fixed the issue. As the sessioncookies are now being created and stored in cookie without error.

So I have no idea why it broke in the first place and why this fixes it.

Do you have any ideas ?

Thanks

[Subin-Qreative]

also noted if you dont put GOOGLE_APPLICATION_CREDENTIALS= in the .env file the __session route does not become integrated.
So if hosted on Google environment and dont set this then setCookies will fail to apply to work for SSR.

[Subin-Qreative]

So ... when i ran the production version with DEBUG using DEBUG=* node .output/server/index.mjs. I noticed that the GOOGLE_APPLICATION_CREDENTIALS is empty.
I found this really strange since it was declared in the .env file.

Even the _inlineRuntimeConfig parses the .env file , I checked the .output server chunks and it had these
"public": {
"vuefire": {
"config": {
"apiKey": "asdfsdafsdaf-I",
"authDomain": "adsfdfasdf",
"databaseURL": "asdfasdf",
"projectId": "asdfsadf",
"storageBucket": "asfsadfsdaf.appspot.com",
"messagingSenderId": "asdfasdfsdaf",
"appId": "1:asdfsadfsadfasdf",
"measurementId": "G-asdfsdafasdf"
},

So I thought i would export GOOGLE_APPLICATION_CREDENTIALS='ActualServiceAccountObjectGoesHere'

and then it works .. what could be the problem here ??

[Subin-Qreative]

So .env files are not read at production point ( so process.env won't detect anything during server runtime) , side note: they are read at build hence why the runtimeconfig is populated.

https://nuxt.com/docs/guide/directory-structure/env

So to run in production you have to do the following:
GOOGLE_APPLICATION_CREDENTIALS='./service-account.json' node .outp
ut/server/index.mjs

@posva can I make a request to have this added for other newbies like me for production.

[posva]

This is already in the docs: https://vuefire.vuejs.org/nuxt/environment-variables.html#Admin-SDK