Using Account Kit by Facebook with Vue

Signin.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>