I am facing an issue while trying to upload a file to my firebase account. Whenever I attempt this, I encounter the following error message:
Uncaught (in promise) FirebaseError: AppCheck: AppCheck is being used before activate() is called for FirebaseApp [DEFAULT]. Please make sure you call activate() before instantiating other Firebase services. (appCheck/use-before-activation).
Here are the steps I have taken so far:
I disabled authentication rules for development purposes and set up the following rules:
rules_version = '2'; service firebase.storage { match /b/{bucket}/o { match /{allPaths=**} { allow read, write: if request.auth != true; } } }I installed the firebase package in my Vue Cli App using the command:
npm install --save firebaseI initialized firebase in my App with the following configuration:
import firebase from 'firebase/app'; import "firebase/analytics"; import "firebase/storage"; import 'animate.css'; var firebaseConfig = { apiKey: "*API KEY*", authDomain: "lgu-cantilan-hrms.firebaseapp.com", projectId: "lgu-cantilan-hrms", storageBucket: "lgu-cantilan-hrms.appspot.com", messagingSenderId: "*SENDER ID*", appId: "*APP ID*", measurementId: "*G-8ZQZT5BCZQ*" }; // Initialize Firebase firebase.initializeApp(firebaseConfig); firebase.analytics();Included the necessary setup in my file upload component:
<template> <v-dialog v-model="dialog" max-width="800"> <template v-slot:activator="{ on, attrs }"> <v-btn elevation="" color="blue white--text" class="ml-10" v-bind="attrs" v-on="on" @click="dialog = true" ><v-icon class="mr-2">mdi-file-outline</v-icon>View Files</v-btn > </template> <v-card> <v-toolbar color="red" dark> <span class="headline mr-2">Files</span> <span class="ml-10"> {{ employee.last_name }}, {{ employee.first_name }}'s Files</span > </v-toolbar> <v-card-text> <div class="pa-5"> <span class="primary--text overline">Add A File</span> <div class="mb-5 mt-2"> <input type="file" class="ml-2" @change="upload_file" /> <v-btn small color="" @click="upload"> Submit</v-btn> </div> <v-divider> </v-divider> <Files /> </div> </v-card-text> </v-card> </v-dialog> </template> <script> import Files from "@/components/Files/Files.vue"; import firebase from "firebase"; export default { ...
However, upon clicking the submit button, the console displays the following error: Uncaught (in promise):
FirebaseError: AppCheck: AppCheck is being used before activate() is called for FirebaseApp [DEFAULT]. Please make sure you call activate() before instantiating other Firebase services. (appCheck/use-before-activation).
I'm unsure of what this error signifies as I have followed the documentation instructions. Any assistance on this matter would be greatly appreciated.