Steps/Files to add Google Auth to App-Framework

00.Steps.md

We want Google Auth for our app with app-framework.

We need to override a component <login-popup> which is used in app/app.js

To override we need to create a component -> https://github.com/scriptPilot/app-framework/blob/master/docs/extend-vue-root-object.md#own-components

First, create "app/components/loginPopup.vue"

Second, register the component in the "app/vue.js" file

Third, add a route "login", there is a hardcoded route pushed in the source code of app-framework

Fourth, populate the "app/pages/login.vue" page with the content. In this case the Google Button and modify the login of user/password with the google provider

01.app_components_loginPopup.vue

<template>
  <div>
    <f7-popup id="app-framework-login-popup" tablet-fullscreen :opened="true" style="left: 100%">
      <f7-view url="/login/" />
    </f7-popup>
  </div>
</template>

02.app_vue.js

const loginPopup = require('./components/loginPopup.vue')

module.exports = (vue) => {
  vue.component('login-popup', loginPopup)
  return vue
}

03.app_routes.json

[
  {
    "path": "/home/",
    "component": "home.vue"
  },
  {
    "path": "/login/",
    "component": "login.vue"
  }
]

04.app_pages_login.vue

<template>
  <f7-page no-navbar no-toolbar no-swipeback layout="white">
    <f7-block style="text-align: center; font-size: 25px;">{{!$root.user ? "Sign In" : "Sign Out"}}</f7-block>
    <f7-block>
      <f7-button big fill raised bg="green" @click="googleSignIn" external>Google Auth</f7-button>
    </f7-block>
  </f7-page>
</template>
<script>
  // Export module
  export default {

    computed: {
      firebaseConfig() {
        return process.env.NODE_ENV === 'production' ? this.$root.config.firebase : this.$root.config.devFirebase
      },
      text() {
        return text[this.$root.language] || text.en
      },
    },
    created() {
      this.mode = this.$root.user ? 'signOut' : 'signIn'
      this.$root.$signOut = this.handleSignOut
    },
    mounted() {
      // Workaround to close login popup on initial load and shift it back to the left -->
      // Close only if there are no login requiring pages on start or the user is logged in
      if ((!this.$root.loginRequiringPagesOnStart && !this.$root.config.loginRequiredForAllPages)
        || this.$root.user) {
        this.$f7.closeModal('#app-framework-login-popup', false)
      }
      this.$$('#app-framework-login-popup').css('left', '0')
    },
    methods: {
      googleSignIn() {
        const firebaseSDK = require('firebase/app')
        const provider = new firebaseSDK.auth.GoogleAuthProvider()
        provider.setCustomParameters({
          prompt: 'select_account',
        })
        this.$fireAuth().signInWithPopup(provider).then((result) => {
        // This gives you a Google Access Token. You can use it to access the Google API.
        const token = result.credential.accessToken
        // The signed-in user info.
        const user = result.user
        // Hide loading indicator
        window.f7.hideIndicator()
        this.mode = 'signOut'
        // Load required URL per view
        const loginRequiringPages = this.$root.loginRequiringPages
        this.$f7.views.forEach((view) => {
        if (loginRequiringPages[view.selector]) {
          this.$nextTick(() => {
            view.router.load({url: loginRequiringPages[view.selector], animatePages: false})
            })
          }
        })
        // Reset required URLs
        this.$root.loginRequiringPages = []
        // Close popup
        this.$f7.closeModal('#app-framework-login-popup')
      }).catch((error) => {
        // Handle Errors here.
        const errorCode = error.code
        const errorMessage = error.message
        // The email of the user's account used.
        const email = error.email
        // The firebase.auth.AuthCredential type that was used.
        const credential = error.credential
        // ...
        //console.log(error)
      })
    },
    handleSignOut() {
      this.$f7.popup('#app-framework-login-popup')
      window.firebase.auth().signOut()
        .then(() => {
        // Reset form
          this.mode = 'signIn'
          // Navigate pages back
          const navBack = (view, times) => {
            if (times > 0) {
              view.router.back()
              this.$nextTick(() => {
                times--
                navBack(view, times)
              })
            }
          }
          this.$f7.views.forEach((view) => {
            const history = view.history
            let historyRequiresLoginAtPosition = 0
            history.forEach((url) => {
              if (this.$root.urlRequiresLogin(url) == false) {
                historyRequiresLoginAtPosition++
              }
            })
            navBack(view, history.length - historyRequiresLoginAtPosition)
           })
           // Do only if there are pages which do not require login
           if (!this.$root.config.loginRequiredForAllPages && !this.$root.loginRequiringPagesOnStart) {
           // Close popup
              this.$f7.closeModal('#app-framework-login-popup')
              // Show notification
              window.f7.addNotification({
                title: this.text.signOut,
                message: this.text.signOutDone,
                hold: 3000,
                closeIcon: false,
              })
            }
          })
      },
    },
  }
</script>