Skip to content

Instantly share code, notes, and snippets.

@talha08
Forked from tutley/Signin.vue
Created July 5, 2018 03:56
Show Gist options
  • Save talha08/bc3b5f3f368e47853445350dc164e076 to your computer and use it in GitHub Desktop.
Save talha08/bc3b5f3f368e47853445350dc164e076 to your computer and use it in GitHub Desktop.
Using Account Kit by Facebook with Vue
<template>
<!--
This is part of a larger project so it includes Vuex state handling which provides
a global error alert bar, logged in status, redirect if already logged in, etc.
This uses: Vue, Vuex, Vuetify
-->
<v-container fluid>
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<v-card>
<v-card-title primary-title>
<div>
<div class="headline light-blue--text text--darken-3">Sign in</div>
</div>
</v-card-title>
<v-card-text>
<span class="body-2">Password-free login with Facebook's Account Kit!</span>
</v-card-text>
<v-card-actions>
<v-btn
color="primary"
:dark="!loading"
:disabled="loading"
:loading="loading"
@click="useEmail">
<v-icon left>email</v-icon>
Use Email
<span slot="loader" class="custom-loader">
<v-icon light>cached</v-icon>
</span>
</v-btn>
<v-spacer></v-spacer>
<v-btn
color="primary"
:dark="!loading"
:disabled="loading"
:loading="loading"
@click="useSMS">
<v-icon left>sms</v-icon>
Use SMS
<span slot="loader" class="custom-loader">
<v-icon light>cached</v-icon>
</span>
</v-btn>
</v-card-actions>
<v-card-text>
<div class="body-1">
This uses a Facebook service to provide login, this does not give access to your Facebook account.
</div>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
// This is just an Axios constructor that points to your server's API
import {HTTP} from '../../api/http.js'
export default {
data () {
return {
akLoading: true
}
},
computed: {
isLoggedIn () {
return this.$store.getters.isLoggedIn
},
error () {
return this.$store.getters.error
},
loading () {
return this.akLoading
}
},
watch: {
isLoggedIn (value) {
if (value) {
this.$router.push('/')
}
}
},
mounted () {
if (!window.AccountKit) {
this.initAccountKit()
} else {
this.akLoading = false
}
},
methods: {
initAccountKit () {
const tag = document.createElement('script')
tag.setAttribute(
'src',
`https://sdk.accountkit.com/en_US/sdk.js`
)
tag.setAttribute('id', 'account-kit')
tag.setAttribute('type', 'text/javascript')
tag.onload = () => {
/* eslint-disable camelcase */
window.AccountKit_OnInteractive = this.onLoad.bind(this)
/* eslint-enable camelcase */
}
document.head.appendChild(tag)
},
/**
* Implementation of AccountKit_OnInteractive
* Initializes the facebook authentication kit calling the init function.
* @see https://developers.facebook.com/docs/accountkit/webjs/reference
*/
onLoad () {
// This fetches the required signin info from our API server, which generates the csrf
// The trick to this is that the server has to track this individual user with a session
// so that it can send the csrf and then later validate it
HTTP.get('/auth/signin').then((result) => {
window.AccountKit.init({
appId: result.data.appID,
state: result.data.csrf,
version: result.data.version,
debug: false
})
this.akLoading = false
}).catch((error) => {
this.$store.dispatch('setError', error)
console.log(error)
})
},
useEmail () {
this.akLoading = true
window.AccountKit.login('EMAIL', {}, this.loginCallback)
},
useSMS () {
this.akLoading = true
window.AccountKit.login('PHONE', {}, this.loginCallback)
},
loginCallback (response) {
console.log(response)
if (response.status === 'PARTIALLY_AUTHENTICATED') {
const akData = {
code: response.code,
csrf_nonce: response.state
}
// Now do the signin
HTTP.post('/auth/signin', akData).then(
result => {
let token = result.data.token.toString()
localStorage.setItem('token', token)
HTTP.defaults.headers.common['Authorization'] = 'Bearer ' + token
this.$store.dispatch('setIsLoggedIn', true)
// Load up the state of the app with the user profile
this.$store.dispatch('autoSignIn')
if (result.data.newUser) {
// send to the profile edit page
this.$router.push('/profile')
} else {
this.$router.push('/')
}
}
).catch(
error => {
this.$store.dispatch('setError', error)
console.log(error)
})
} else if (response.status === 'NOT_AUTHENTICATED') {
console.log('not authenticated')
this.$store.dispatch('setError', new Error('Authentication Failed'))
this.akLoading = false
} else if (response.status === 'BAD_PARAMS') {
console.log('bad params')
this.$store.dispatch('setError', new Error('We messed up on the login, sorry'))
this.akLoading = false
}
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment