How to call Firebase Functions from AngularFire

Issue

I created a Firebase Cloud function with functions.https.onRequest and I made it work like an API that responds with JSON data from the Firebase Realtime database.

However, I found out about functions.https.onCall which handles authentication and that's what I need because each user will only have access to it's own data.

I didn't find any useful documentation about Callable Cloud Functions with AngularFire on their page https://github.com/angular/angularfire/blob/master/docs/functions.md .They only show how to add some code in Angular but don't show a practical example of how to interact with a Cloud Function?

I use Cloud Functions v1 with Node.js v16.

"@angular/core": "^16.2.12",
"@angular/fire": "^7.5.0"

Solution

Found the documentations here https://github.com/angular/angularfire/blob/master/docs/compat/functions/functions.md

Import the NgModule Cloud Functions for AngularFire is contained in the @angular/fire/functions module namespace. Import the AngularFireFunctionsModule in your NgModule. This sets up the AngularFireFunction service for dependency injection.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireFunctionsModule } from '@angular/fire/compat/functions';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireFunctionsModule
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Injecting the AngularFireFunctions service Once the AngularFireFunctionsModule is registered you can inject the AngularFireFunctions service.

import { Component } from '@angular/core';
import { AngularFireFunctions } from '@angular/fire/compat/functions';

@Component({
  selector: 'app-component',
  template: ``
})
export class AppComponent {
  constructor(private fns: AngularFireFunctions) { }
}

Creating a callable function AngularFireFunctions is super easy. You create a function on the server side and then "call" it by its name with the client library.

method
httpCallable(name: string): (data: T) Creates a callable function based on a function name. Returns a function that can create the observable of the http call.

import { Component } from '@angular/core';
import { AngularFireFunctions } from '@angular/fire/compat/functions';

@Component({
  selector: 'app-root',
  template: `{ data$  | async }`
})
export class AppComponent {
  constructor(private fns: AngularFireFunctions) { 
    const callable = fns.httpsCallable('my-fn-name');
    this.data$ = callable({ name: 'some-data' });
  }
}

Configuration via Dependency Injection Functions Region Allow configuration of the Function's region by adding REGION to the providers section of your NgModule. The default is us-central1.

import { NgModule } from '@angular/core';
import { AngularFireFunctionsModule, REGION } from '@angular/fire/compat/functions';

@NgModule({
  imports: [
    ...
    AngularFireFunctionsModule,
    ...
  ],
  ...
  providers: [
   { provide: REGION, useValue: 'asia-northeast1' }
  ]
})
export class AppModule {}

Cloud Functions emulator Point callable Functions to the Cloud Function emulator by adding USE_EMULATOR to the providers section of your NgModule.

import { NgModule } from '@angular/core';
import { AngularFireFunctionsModule, USE_EMULATOR } from '@angular/fire/compat/functions';

@NgModule({
  imports: [
    ...
    AngularFireFunctionsModule,
    ...
  ],
  ...
  providers: [
   { provide: USE_EMULATOR, useValue: ['localhost', 5001] }
  ]
})
export class AppModule {}

Answered By - Marian07