I am currently in the process of developing a blog application using Firebase version 9, VueJs version 3, and VueX. All functionalities such as user registration and authentication are working smoothly. However, I encountered an error when attempting to assign a user as an Admin using Firebase functions, and I'm unsure of the reason behind this issue. The specific error message I am receiving is shown below: https://i.sstatic.net/m0gTw.png
Upon removing the error catch block, a different error arises: https://i.sstatic.net/pZpID.png
I would greatly appreciate any assistance with resolving this matter.
According to the documentation provided at https://firebase.google.com/docs/functions/callable, it is mentioned that the functions need to be initialized as follows: This initialization process takes place in the firebaseInit.js file
// Necessary SDK imports
import { initializeApp } from "firebase/app";
import {
getFirestore,
} from "firebase/firestore"
import { getFunctions } from 'firebase/functions';
// Configuration for web app's Firebase settings
const firebaseConfig = {
apiKey: "###",
authDomain: "###",
projectId: "###",
storageBucket: "###",
messagingSenderId: "###",
appId: "###"
};
// Initializing Firebase and Functions
const app = initializeApp(firebaseConfig);
const functions = getFunctions(app);
// Service initialization
const db = getFirestore(app);
export { functions }
export default db;
In the Admin view section where the Admin role is set, the function call is made as demonstrated below: This code snippet is extracted from the 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) => {
// Retrieving Error details.
const code = error.code;
const message = error.message;
const details = error.details;
console.log(code);
console.log(message);
console.log(details);
});
}
}
}
</script>
The following Callable Cloud Function has been deployed on Firebase functions services in the index.js file:
const functions = require("firebase-functions");
// Required Firebase Admin SDK for Firestore access
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);
});
});