0

I am currently constructing a file upload to my firebase account. But when I do this, I get this 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).

What I’ve done so far:

  1. I disabled authentication rules for development purposes. I set rules into this

     rules_version = '2';
     service firebase.storage {
       match /b/{bucket}/o {
         match /{allPaths=**} {
           allow read, write: if request.auth != true;
         }
       }
     }
    
  2. I installed firebase into my Vue Cli App using the command:

    				
    npm install --save firebase
    
  3. Initialized firebase in my App using the following:

    				
     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();
    
  4. Had this setup in my 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 {
       components: { Files },
       data() {
         return {
           dialog: false,
           employee: {},
           file_upload: null,
           uploadValue: 0,
         };
       },
       created() {
         this.employee = this.$store.state.user.user_view;
       },
       methods: {
         upload_file(e) {
           this.file_upload = e.target.files[0];
           console.log(this.file_upload);
           // this.picture_url = URL.createObjectURL(this.picture);
         },
         upload() {
           var storageRef = firebase
             .storage()
             .ref(this.employee.first_name + "/" + this.file_upload.name);
           var task = storageRef.put(this.file_upload);
           // monitor progress
           task.on(
             "state_change",
             (snapshot) => {
               this.uploadValue =
                 (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
             },
             (error) => {
               console.log(error.message);
             }
           );
    
           // task.on("state_change",)
         },
       },
     };
     </script>
    
     <style></style>
    

But when I click the submit button, console gives me an error saying: 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 don't have any idea what this error means. I followed the instructions in the documentation. Any help would be appreciated.

liubalarousse Answered question June 9, 2021