I am currently working on implementing role-based authentication using Firebase auth and Firebase functions. I have successfully set up a registration form, but now I am facing an issue while trying to add a form that allows users to submit an email which triggers a Firebase function to assign custom claims. After adding the function to Firebase via terminal and calling it in my project, I encounter a httpsCallable is not a function error when submitting the form with the email.
Below are the relevant files:
index.js located inside functions folder
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;
});
});
My firebaseInit.js configuration file where all firebase related actions are called
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();
Lastly, here is my Vue component containing the form
<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>
I would appreciate any insights on why the error occurs. Could there be something missing or incorrectly imported related to Firebase?