How to use “cordova-plugin-idfa” in Vue.js (Quasar) application?

[Goran Teshich]

We have Vue.js (Quasar) mobile app that is published on App Store. Start from iOS 14.5+, it's mandatory when first time start the app to ask user for permission to access its personal data. There is standard dialog, which is part of iOS that should be invoked for that purpose.

We've found "Cordova plugin for getting Advertising ID (IDFA or AAID)" - cordova-plugin-idfa that should help us. Here is the link:

https://github.com/chemerisuk/cordova-plugin-idfa

There is some code example and I've tried to use it in our application in the following way:

MainLayout.vue:

<template>
  <q-layout view="hHh Lpr fFf" class="overflow-hidden-x layout">
    <spinner v-if="spinnerVisible" full-screen />

    <q-header ref="header" class="header">
      <Toolbar />
      <MasterInfo v-if="showMasterInfo" :master="getMaster" />
    </q-header>

    <Drawer />

    <q-page-container ref="pageContainer" class="page-container">
      <slot />
    </q-page-container>
  </q-layout>
</template>

<script>
import { mapGetters } from 'vuex'
import Drawer from '../components/Drawer'
import Toolbar from '../components/Toolbar'
import Spinner from '../components/Spinner'
import MasterInfo from '../components/MasterInfo'
import UnitInfo from '../components/UnitInfo'

const idfaPlugin = cordova.plugins.idfa

export default {
  name: 'MainLayout',
  components: {
    Toolbar,
    Drawer,
    Spinner,
    MasterInfo,
    UnitInfo,
  },
  mounted () {
    idfaPlugin.getInfo()
      .then(info => {
          if (!info.trackingLimited) {
              return info.idfa || info.aaid;
          } else if (info.trackingPermission === idfaPlugin.TRACKING_PERMISSION_NOT_DETERMINED) {
              return idfaPlugin.requestPermission().then(result => {
                  if (result === idfaPlugin.TRACKING_PERMISSION_AUTHORIZED) {
                      return idfaPlugin.getInfo().then(info => {
                          return info.idfa || info.aaid;
                      });
                  }
              });
          }
      })
      .then(idfaOrAaid => {
          if (idfaOrAaid) {
              console.log(idfaOrAaid);
          }
      });
  },
  computed: {
    ...mapGetters(['getCountGlobalLoader']),
    ...mapGetters('master', ['getMaster']),
    showMasterInfo() {
      return this.$route.meta.showMasterInfo
    },
    spinnerVisible() {
      return (
        this.getCountGlobalLoader > 0 &&
        this.$route.meta.disableGlobalSpinner !== true
      )
    },
    iosScrollBugFixEnabled() {
      return this.spinnerVisible && this.$route.meta.fixIosScrollBug === true
    },
  },
  watch: {
    iosScrollFixEnabled: {
      immediate: true,
      handler(value) {
        if (value) {
          window.scroll({ top: 10 })
          requestAnimationFrame(() => {
            window.scroll({ top: -10 })
          })
        }
      },
    },
  },
}
</script>

<style scoped>
.layout,
.header {
  background: var(--gradient);
}
.header {
  /* WebKit-based browsers fix (Safari and Chrome) */
  transform: translate3d(0, 0, 0);
}
</style>

But, the error came up.

Here's what we have before using the plugin (the app works fine):

https://drive.google.com/file/d/1WfdOlhZ8qnS-mlagOHuB87R76Ynf0RSU/view?usp=sharing

And here's what we have after using the plugin (the app doesn't work fine, there's an white screen on mobile device):

https://drive.google.com/file/d/1KdGyVxPbXtCXQwd3X4_VjHxNPZV6qt9a/view?usp=sharing

How to make it work?