Vue auth workflow example

<div id="app">
  <div v-if="userId">
    <p>You are logged in! Your user ID is: {{userId}}</p>
    <p>Click <a @click="logout">here</a> to logout</p>
  </div>

  <div v-if="!userId">
    <p>I don't know you. You should <a @click="login">login</a>.</p>
  </div>
</div>

<script>
  const horizon = Horizon();

  let app = new Vue({
    el: "#app",
    data: {userId: null},
    ready() {
      if (horizon.hasAuthToken())
        horizon.currentUser().fetch().subscribe(user => this.userId = user.id);
    },
    methods: {
      login(ev) {
        horizon.authEndpoint("github").subscribe(endpoint =>
          window.location.replace(endpoint);
      },
      logout(ev) {
        Horizon.clearAuthTokens();
      }
    }
  });
</script>