Firebase functions authorize only requests from Firebase hosting app

Question

I have a simple Firebase Hosting web application (based on a Vue app) which invokes Firebase Function (Google cloud function):

import firebase from "firebase/app";
import "firebase/functions";


firebase.initializeApp(firebaseConfig);

let functions = firebase.app().functions("us-west4");
let testFunction = functions.httpsCallable("testFunction");

and corresponding functions index.js file:

const functions = require("firebase-functions");

exports.testFunction = functions.region("us-west4").https.onCall(async (data, context) => {
  console.log("Very important things here");
  return {"response": "data"};
});

From security perspective is it possible to

1. Allow this invocation only from my domain name (Firebase hosting) myhostedapp.web.app
2. Check for any kind of authentication (e.g. token) that my JS app provides during the request?

I've tried accessing context.auth property (see docs) buth seems like some kind of service account is required and this cannot be used when called from Firebase hosting web application.

Basically I don't want my function to be publicly accessible (simple invocation via trigger url), so any advice or best practice for securing Firebase Hosting + Functions would be appreciated.

Answer 1

Firebase just released a new feature called App Check that does precisely this: it allows the Cloud Functions in your project to only be invoked from apps that are registered in that project.

For web apps this happens through reCAPTCHA v3, which . Then once you enable enforcement of the check on Cloud Functions, it will reject any requests coming from other sources.

You'll typically want to combine App Check with your current user-based approach, so that you can easily block calls from outside your web app, but also still ensure authenticated users only can make calls that they're authorized for.