Skip to content

Instantly share code, notes, and snippets.

@raultm
Last active May 11, 2018 10:43
Show Gist options
  • Save raultm/19d620951cd2c22341a0cd1df32d9993 to your computer and use it in GitHub Desktop.
Save raultm/19d620951cd2c22341a0cd1df32d9993 to your computer and use it in GitHub Desktop.
Steps/Files to add Google Auth to App-Framework

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

<template>
<div>
<f7-popup id="app-framework-login-popup" tablet-fullscreen :opened="true" style="left: 100%">
<f7-view url="/login/" />
</f7-popup>
</div>
</template>
const loginPopup = require('./components/loginPopup.vue')
module.exports = (vue) => {
vue.component('login-popup', loginPopup)
return vue
}
[
{
"path": "/home/",
"component": "home.vue"
},
{
"path": "/login/",
"component": "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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment