JSFiddle - React, Tailwind, and code Playground

by thai

HTML

<div id="app">
  <div v-if="!signedIn">
    Please <button v-on:click="signIn">sign in with GitHub</button>
    <div style="color:red">{{signInError}}</div>
  </div>
  <div v-if="signedIn">
    Hello, <strong>{{user.displayName}}</strong> (user id {{user.providerData[0].uid}})<br/>
    <br />
    Data: {{data}}
  </div>
</div>
<script src="https://www.gstatic.com/firebasejs/4.0.0/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyBOYr6jXrv94HFe5TDiyeoxBGWJFj_brFI",
    authDomain: "reactbkk-tickets-claim.firebaseapp.com",
    databaseURL: "https://reactbkk-tickets-claim.firebaseio.com",
    projectId: "reactbkk-tickets-claim",
    storageBucket: "reactbkk-tickets-claim.appspot.com",
    messagingSenderId: "87653092751"
  };
  firebase.initializeApp(config);
</script>
<script src="https://unpkg.com/vue"></script>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    signedIn: false,
    signInError: null,
    user: null,
    data: null
  },
  methods: {
    signIn: function () {
			var provider = new firebase.auth.GithubAuthProvider()
    	firebase.auth().signInWithPopup(provider).then(function(result) {
        var token = result.credential.accessToken;
        var user = result.user;
        app.signedIn = true
        app.user = user
        firebase.database().ref('users').child(user.providerData[0].uid).on('value', function (snapshot) {
          app.data = snapshot.val()
        }, function (err) {
          alert(err)
        })
      }).catch(function(error) {
        var errorCode = error.code;
        var errorMessage = error.message;
        var email = error.email;
        var credential = error.credential;
        app.signInError = errorMessage
      })
    }
  }
})