title: With Vue.js and FirebaseUI, how to store the authResult object after a successful authentication?
body: <p>I am implementing Twitter authentication using FirebaseUI in my Vue.js app.</p>
  
  <p>While I can successfully authenticate the user, I can't figure out how to store info from the AuthResult object.</p>
  
  <p>In my parent component (App.vue), I listen for the onAuthStateChanged event to save the user details. This works well, but the user object doesn't contain API credentials returned by Twitter.</p>
  
  <pre><code>firebase.auth().onAuthStateChanged((user) =&gt; {
    if (user) {
      this.user = user
      this.$router.push('/user')
    } else {
      this.$router.push('/login')
    }
  })
  </code></pre>
  
  <p>Those credentials are contained in the firebaseui.auth.AuthResult object, which is accessible in the FirebaseUI callback named <a href="https://github.com/firebase/firebaseui-web#signinsuccesswithauthresultauthresult-redirecturl" rel="nofollow noreferrer" title="signInSuccessWithAuthResult">signInSuccessWithAuthResult</a>.</p>
  
  <p>The problem I am facing is that I cannot call Vue.js functions from within this callback - I can't modify data using this.foo, I can't emit an event either with this.$emit. I can console.log() the authResult object, but that's about it.</p>
  
  <p><strong>Q:</strong> How can I save the authResult object in my Vue app?</p>
  
  <p>For clarity, here is my child Login component (template simplified):</p>
  
  <pre><code>&lt;template&gt;
     &lt;div&gt;
        &lt;div id="firebaseui-auth-container"&gt;&lt;/div&gt;
     &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  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)
    }
  }
  &lt;/script&gt;
  </code></pre>