Implement callable cloud functions in Firebase client app

Question

I have recently discovered the Firebase callable functions which allows me to call HTTPS trigger like function from the client side (and with auth() support).

I struggle to implement this new feature in my already existing Firebase web-client application.

I have some cloud functions running, among them are some HTTPS functions I would like to transform into an HTTPS callable function (with functions.https.onCall).

The documentation indicates:

Set up your client development environment
<script src="https://www.gstatic.com/firebasejs/4.12.0/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.0/firebase-functions.js"></script>

And my code is:

import firebase from 'firebase';
import 'firebase/firestore';

const firebaseApp = firebase.initializeApp({
  apiKey: '....',
  authDomain: '....',
  databaseURL: '....',
  projectId: '....',
  storageBucket: '....',
  messagingSenderId: '....',
});

const db = firebaseApp.firestore();
const auth = firebaseApp.auth();
const functions = firebaseApp.functions();

export { db, auth, functions };

When I run my app, I got the following error:

Uncaught TypeError: firebaseApp.functions is not a function

I have tried yarn add firebase-functions and then import 'firebase-functions but then the app requires firebase-admin. I am affraid it is too much for a client-app so I might go in the wrong direction.

Can someone help me with this issue? (!) This issue is NOT about the server-side Firebase SDK for Cloud Functions (Node JS). It is about calling Cloud functions directly from a Firebase web app. Thank you!

UPDATE: Thanks to @Andrew's post, this solves my issue:

My configuration

import firebase from 'firebase';
import 'firebase/firestore';
import '@firebase/functions';
import firestoreConfig from '@/config/firestore';

const firebaseApp = firebase.initializeApp(firestoreConfig /* The JSON configuration from my Firebase project */);

const db = firebaseApp.firestore();
const auth = firebaseApp.auth();
const functions = firebaseApp.functions();

export { db, auth, functions };

Using the configuration:

import { db, functions } from '@/database/firestoreInit';

export default {
  addMessage(text) {
    const addMessage = functions.httpsCallable('addMessage');
    return addMessage({ text }).then(result => result);
  },
}

score 7 · Accepted Answer · answered Mar 26 '18 at 14:21

I just ran into this same problem myself and solved it by installing and importing the @firebase/functions npm package. I found the solution on github here: https://github.com/firebase/firebase-js-sdk/blob/master/packages/functions/README.md

From the README on github:

ES Modules

import firebase from '@firebase/app';
import '@firebase/functions'
// Do stuff w/ `firebase` and `firebase.functions`

CommonJS Modules

const firebase = require('@firebase/app').default;
require('@firebase/functions');

// Do stuff with `firebase` and `firebase.functions`

Hope that helps! The actual documentation is not very clear about having to do this in order to call the functions.

Thank you @Andrew, you made my day :) This is exactly what I missed — m.lapeyre, Mar 26 '18 at 16:32

galki · Answer 2 · 2018-12-10T11:57:28.267

1

About @firebase/functions:

This package is not intended for direct usage, and should only be used via the officially supported firebase package.

This worked for me:

import * as firebase from 'firebase/app'; // Typescript
// import firebase from 'firebase/app'; // JS
import 'firebase/functions';

const myCallableFunc = firebase.functions().httpsCallable('myCallableFunc');

I don't know about importing firebase-functions with a CDN but if you're using npm then you don't need the firebase-functions package, just installing firebase will do.

edited Dec 10 '18 at 11:57

answered Dec 10 '18 at 11:45

galki

8,149
7
50
62

for me, the key was the first import in your answer been banging my head fro 3 days – K.chim Feb 29 '20 at 09:39

score 0 · Answer 3 · answered Mar 26 '18 at 12:27

0

Follow the steps mentioned here. Firebase cloud functions

I think there is nothing like firebaseApp.functions.

answered Mar 26 '18 at 12:27

Chandrika

194
12

Hi, I have followed the tutorial from https://firebase.google.com/docs/functions/callable#set_up_your_client_development_environment. You can see there are two parts. The first one is and the second part is firebase.initializeApp({...}) and var functions = firebase.functions(); As I do not want to use – m.lapeyre Mar 26 '18 at 12:51

Implement callable cloud functions in Firebase client app

3 Answers3

Linked