Call firebase 9 functions from my app using VueJS and VueX

Question

I'm building a blog app using Firebase version: 9, VueJs version: 3 and VueX. All the functionalities like registering the user and authentication works, And when it comes to set a user as an Admin using firebase functions I got the error which I don't understand why it is happening. The error I'm getting is the following:

When I remove error catch I got this one

Can you help me!

By following the docs at https://firebase.google.com/docs/functions/callable it say that we have to initialize the functions like below: here it's in firebaseInit.js file

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import {
    getFirestore, 
} from "firebase/firestore"
import { getFunctions } from 'firebase/functions';

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "###",
  authDomain: "###",
  projectId: "###",
  storageBucket: "###",
  messagingSenderId: "###",
  appId: "###"
};

// Initialize Firebase and Functions
const app = initializeApp(firebaseConfig);
const functions = getFunctions(app);

// Init services
const db = getFirestore(app);

export { functions }
export default db;

and in Admin view where I use to set the Admin role I have called the functions like below: here it's in Admin.vue file

<template>
<div class="admin">
    <div class="container">
      <h2>Administration</h2>
      <div class="admin-info">
        <h2>Add Admin</h2>
        <div class="input">
          <input placeholder="Enter user email to make them an admin" type="text" id="addAdmins" v-model="adminEmail" />
        </div>
        <span>{{ this.functionMsg }}</span>
        <button @click="addAdmin" class="button">Submit</button>
      </div>
    </div>
  </div>
</template>

<script>
import { functions } from "../firebase/firebaseInit"
import { getFunctions, httpsCallable } from "firebase/functions"

export default {
    name: "Admin",
    data() {
        return {
            adminEmail: "",
            functionMsg: null
        }
    },
    methods: {
        async addAdmin() {
          const functions = getFunctions();
          const setAdminRole = await httpsCallable(functions, "addAdminRole");
          setAdminRole({ email: this.adminEmail })
          .then((result) => {
            const data = result.data;
            this.functionMsg = data.message;
          })
          .catch((error) => {
            // Getting the Error details.
            const code = error.code;
            const message = error.message;
            const details = error.details;
            console.log(code);
            console.log(message);
            console.log(details);
          });
        }
    }
}
</script>

Here is the Callable Cloud Function deployed to Firebase functions services in index.js :

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

// The Firebase Admin SDK to access Firestore.
const admin = require("firebase-admin");
admin.initializeApp();

exports.addAdminRole = functions.https.onCall((data, context) => {
    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 an admin!!`
        }
    })
    .catch((err) => {
        console.log(err.message);
    });
});

Answer 1

In your component you should not do:

import { functions } from "../firebase/firebaseInit"
import { getFunctions, httpsCallable } from "firebase/functions"

// ...

async addAdmin() {
  const functions = getFunctions();
  const setAdminRole = await httpsCallable(functions, "addAdminRole");
  setAdminRole({ email: this.adminEmail })
  ....   

but just

import { functions } from "../firebase/firebaseInit"
import { httpsCallable } from "firebase/functions"

// ...

async addAdmin() {
  const setAdminRole = await httpsCallable(functions, "addAdminRole");
  setAdminRole({ email: this.adminEmail })
  ....  

since you export functions in your firebaseInit.js file.