I am working on implementing Twitter authentication using FirebaseUI in my Vue.js application.
Although I have successfully authenticated the user, I am struggling to figure out how to store information from the AuthResult object.
In my main component (App.vue), I have set up a listener for the onAuthStateChanged event to save the user details. This method works effectively, but I am unable to access the API credentials returned by Twitter within the user object.
firebase.auth().onAuthStateChanged((user) => {
if (user) {
this.user = user
this.$router.push('/user')
} else {
this.$router.push('/login')
}
})
The API credentials are included in the firebaseui.auth.AuthResult object, which is accessible in the FirebaseUI callback called signInSuccessWithAuthResult.
The issue I'm encountering is that I cannot invoke Vue.js functions from within this callback - I can't change data using this.foo, nor can I emit an event with this.$emit. I am only able to log the authResult object using console.log(), nothing more.
Q: How can I store the authResult object in my Vue application?
Here is a simplified version of my child Login component template:
<template>
<div>
<div id="firebaseui-auth-container"></div>
</div>
</template>
<script>
import firebase from 'firebase'
import * as firebaseui from 'firebaseui'
export default {
name: 'Login',
data () {
return {
foo: ''
}
},
mounted () {
var uiConfig = {
signInOptions: [
firebase.auth.TwitterAuthProvider.PROVIDER_ID
],
signInFlow: 'popup',
callbacks: {
signInSuccessWithAuthResult: function (authResult) {
// this.$emit('updateAuthResult', authResult)
// this.foo = 'bar'
console.log(authResult)
return true
}
}
}
var ui = new firebaseui.auth.AuthUI(firebase.auth())
ui.start('#firebaseui-auth-container', uiConfig)
}
}
</script>