How to use httpsCallable on SSR page and pass user auth info to Cloud Function?

[dosstx]

Why am I getting a request.auth is undefined in this onCall function?

I am using Firebase Function emulator for this test.

I am trying to call a Firebase function directly from my app like so:

/functions/getStory.js:

import { getFirestore } from 'firebase-admin/firestore'
import { error, log } from 'firebase-functions/logger'
import { onCall, HttpsError } from 'firebase-functions/v2/https'

export const getStory = onCall({ cors: true }, async (request) => {
  const db = getFirestore() // in v2, this is how you get Firestore instance

  log('request.auth from client:', request.auth)
  if (!request.auth) {
    throw new HttpsError('unauthenticated', 'Request not authenticated')
  }

  return {
    uid: request.auth.uid,
    docId: request.data.docId,
    text: 'Hello World from Server!'
  }
})

The above function, when invoked, responds with the following:

i  functions: Beginning execution of "us-central1-getStory"
>  {"verifications":{"app":"MISSING","auth":"MISSING"},"logging.googleapis.com/labels":{"firebase-log-type":"callable-req                                                                                                                   quest-verification"},"severity":"DEBUG","message":"Callable request verification passed"}
>  {"severity":"ERROR","message":"request.auth from client: undefined"}\n    at 
i  functions: Finished "us-central1-getStory" in 3.5084ms
i  functions: Beginning execution of "us-central1-getStory"
i  functions: Finished "us-central1-getStory" in 1.4233ms
i  functions: Beginning execution of "us-central1-getStory"
>  {"verifications":{"app":"MISSING","auth":"VALID"},"logging.googleapis.com/labels":{"firebase-log-type":"callable-request-verification"},"severity":"DEBUG","message":"Callable request verification passed"}
>  {"severity":"INFO","message":"request.auth from client: kRUx8ZxLoUd0y7kTcxgPfwTiGu13"}
i  functions: Finished "us-central1-getStory" in 2.5383ms

Here is the client side code that invokes the cloud function:

/pages/test-oncall.vue:

<template>
    <section>
        {{ response }}
    </section>
</template>

<script setup>
import { httpsCallable } from 'firebase/functions'

const response = ref('')

const { functions } = useFirebase()
const instance = httpsCallable(functions, 'getStory')
try {
    response.value = await instance({ uid: 'uidTest', docId: 'docIdTest' })
    console.warn('Response ===>', response.value)
} catch (error) {
    console.log('Error ===>', error)
}


</script>

The browser log for the above client code is:

Error ===> [FirebaseError: INTERNAL] {
  code: 'functions/internal',
  customData: undefined,
  details: undefined
}

Notice that the request.auth is undefined at an initial log point ("message":"request.auth from client: undefined"}, but then later resolves correctly. Why does this happen? It's like auth is not initialized yet until a later time. If that's the case, how do I properly check request.auth so I can do some authentication on the server to determine if the user is eligible to receive confidential data from Firestore when using the onCall method?

[dosstx]

Solved

[rublev]

Solved

How?