CODEWITHSUNDEEP
firebasegoogle-cloud-functions
m.lapeyre
m.lapeyre

Reputation: 486

Implement callable cloud functions in Firebase client app

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);
  },
}

Upvotes: 3

Views: 5047

Answers (3)

galki
galki

Reputation: 8715

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.

Upvotes: 1

Andrew
Andrew

Reputation: 86

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.

Upvotes: 7

Chandrika
Chandrika

Reputation: 194

Follow the steps mentioned here. Firebase cloud functions

I think there is nothing like firebaseApp.functions.

Upvotes: 0

Related Questions