How to Use Callable Functions in Firebase: Simple Guide

To use a callable function in Firebase, you write a backend function with functions.https.onCall and call it from your app using the Firebase SDK's httpsCallable method. This lets your app securely run backend code and get results without managing HTTP requests manually.

Syntax

A Firebase callable function is created in your backend code using functions.https.onCall. Your app calls it with httpsCallable from the Firebase client SDK.

• functions.https.onCall: Defines the backend function that runs when called.
• httpsCallable: Client method to call the backend function and get a response.
• data: The input your app sends to the function.
• context: Metadata about the call, like authentication info.

javascript

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

exports.myCallableFunction = functions.https.onCall((data, context) => {
  // Your backend logic here
  return { message: 'Hello ' + data.name };
});

// Client side
import { getFunctions, httpsCallable } from 'firebase/functions';
const functions = getFunctions();
const myCallable = httpsCallable(functions, 'myCallableFunction');
myCallable({ name: 'Alice' }).then(result => {
  console.log(result.data.message);
});

Example

This example shows a Firebase callable function that greets a user by name. The client sends a name, and the function returns a greeting message.

javascript

// Backend (index.js)
const functions = require('firebase-functions');

exports.greetUser = functions.https.onCall((data, context) => {
  const name = data.name || 'Guest';
  return { greeting: `Hello, ${name}!` };
});

// Client (app.js)
import { initializeApp } from 'firebase/app';
import { getFunctions, httpsCallable } from 'firebase/functions';

const firebaseConfig = {
  // your config here
};
const app = initializeApp(firebaseConfig);
const functions = getFunctions(app);
const greetUser = httpsCallable(functions, 'greetUser');

greetUser({ name: 'Bob' })
  .then(result => {
    console.log(result.data.greeting);
  })
  .catch(error => {
    console.error('Error:', error);
  });

Output

Hello, Bob!

Common Pitfalls

• Not initializing Firebase Functions SDK properly on the client causes errors.
• Forgetting to deploy the function after changes means the client calls an old version.
• Not handling errors on the client leads to uncaught exceptions.
• Sending unsupported data types (like functions or undefined) in data causes failures.
• Assuming callable functions run without authentication when they require it.

javascript

/* Wrong: Calling without initializing functions */
// const functions = getFunctions(); // Missing app parameter
const greetUser = httpsCallable(functions, 'greetUser');

/* Right: Initialize with app */
import { initializeApp } from 'firebase/app';
import { getFunctions, httpsCallable } from 'firebase/functions';
const app = initializeApp(firebaseConfig);
const functions = getFunctions(app);
const greetUser = httpsCallable(functions, 'greetUser');

Quick Reference

Use this quick guide to remember the key steps:

• Define your callable function with functions.https.onCall in backend.
• Deploy your function using firebase deploy --only functions.
• Initialize Firebase app and functions SDK on client.
• Call the function with httpsCallable(functions, 'functionName').
• Handle the promise response and errors properly.

Key Takeaways

Define callable functions with functions.https.onCall in your Firebase backend.

Call these functions from your app using httpsCallable from Firebase client SDK.

Always initialize Firebase app and functions SDK correctly before calling.

Deploy your functions after changes to update the backend code.

Handle errors on the client to avoid crashes and understand failures.