httpsCallable не является функцией при вызове функции firebase

Question

Я пытаюсь реализовать аутентификацию на основе ролей с использованием функций firebase auth и firebase. Прямо сейчас у меня есть форма регистрации, которая работает как положено, и сейчас я пытаюсь добавить форму, в которую вы отправляете электронное письмо, которое вызывает функцию firebase, которая будет прикреплять пользовательское утверждение к пользователю. Я уже добавил свою функцию в firebase через терминал, и я вызываю функции в своем проекте, но всякий раз, когда я отправляю форму с электронным письмом, я могу, httpscallable не является ошибкой функции.

Вот мои файлы

index.js внутри папки функций

const functions = require("firebase-functions");
const admin = require("firebase-admin");
admin.initializeApp();

exports.addAdminRole = functions.https.onCall((data, context) => {
  //get user and add custom claim (admin)
  return admin
    .auth()
    .getUserByEmail(data.email)
    .then(user => {
      return admin.auth().setCustomUserClaims(user.uid, {
        admin: true
      });
    })
    .then(() => {
      return {
        message: `Success! ${data.email} has been made admin`
      };
    })
    .catch(err => {
      return err;
    });
});

Мой конфигурационный файл firebaseInit.js, в котором я называю все, что связано с firebase

import firebase from "firebase/app";
import "firebase/firestore";
import "@firebase/functions";
import firebaseConfig from "./firebaseConfig";
const firebaseApp = firebase.initializeApp(firebaseConfig);

export const fc = firebase.functions();
export const db = firebase.firestore();
export const fv = firebase.firestore.FieldValue;

export default firebaseApp.firestore();

И мой компонент Vue, где форма

<template>
  <div class="home">
    <h3>Welcome to Site</h3>

    <h3>Add user to admin</h3>
    <div class="row">
      <form @submit.prevent="addAdmin()" class="col s12">
        <div class="row">
          <div class="input-field col s12">
            <input id="email" type="email" class="validate" v-model="email" />
            <label for="email">Email</label>
          </div>
        </div>
        <button type="submit" class="btn">Submit</button>
        <router-link to="/members" class="btn grey">Cancel</router-link>
      </form>
    </div>
  </div>
</template>

<script>
import firebase from "firebase/app";
import fc from "../data/firebaseInit";
export default {
  name: "home",
  data() {
    return {
      email: ""
    };
  },
  methods: {
    addAdmin() {
      const addAdminRole = fc.httpsCallable("addAdminRole");
      addAdminRole(this.email).then(result => {
        console.log(result);
      });
    }
  }
};
</script>

Может кто-нибудь пролить свет на то, почему я получаю эту ошибку? Я забыл импортировать что-то связанное с Firebase?

Answer 1

Ваша проблема связана с тем, что, делая

export const fc = firebase.functions();
export const db = firebase.firestore();
export const fv = firebase.firestore.FieldValue;

export default firebaseApp.firestore();

в файле firebaseInit.js, вы не экспортируете fc (и, кстати, fv)

Следующее должно работать

import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/functions";   // <-- Note that the @ was removed
import firebaseConfig from "./firebaseConfig";
const firebaseApp = firebase.initializeApp(firebaseConfig);

const fc = firebase.functions();
const db = firebase.firestore();
const fv = firebase.firestore.FieldValue;

export { fc, db, fv };

Затем, в вашем компоненте вы делаете:

import {fc, db, fv} from "../data/firebaseInit";

//....

Или следующее вам нужно только fc и db, например:

import {fc, db} from "../data/firebaseInit";

//....