Vue.js Tutorial

<template>
    <div id="app">
        <Header></Header>
        <router-view />
    </div>
</template>
<script>
import Header from './components/Header'
export default {
    name: 'App',
    components: { Header }
}
</script>
<style>
body {
    padding-top: 5rem;
}
</style>

<template>
  <header>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
      <a class="navbar-brand" href="/">Plusauth Starter</a>
      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto"></ul>
        <template v-if="user">
          <li class="nav-item navbar-nav">
            <router-link class="nav-link" to="/profile">{{
              `Logged in as: ${userDisplayName}`
            }}</router-link>
          </li>
          <button class="btn btn-link" @click="$auth.logout()">Logout</button>
        </template>
        <li v-else class="nav-item navbar-nav">
          <button class="btn btn-link" @click="$auth.login()">Login</button>
        </li>
      </div>
    </nav>
  </header>
</template>

<script>
export default {
  data() {
    return {
      user: null
    }
  },
  computed: {
    userDisplayName() {
      if (!this.user) {
        return null
      } else {
        if (!this.user.given_name || !this.user.family_name) {
          return this.user.username || this.user.email || this.user.sub
        }
        return `${this.user.given_name} ${this.user.family_name}`
      }
    }
  },
  async created() {
    this.$auth.on('user_login', ({ user }) => {
      this.user = user
    })
    this.$auth.on('user_logout', () => {
      this.user = null
    })
    this.user = await this.$auth.getUser()
  }
}
</script>

<template>
  <div></div>
</template>
<script>
export default {
  name: 'AuthCallback',
  async mounted() {
    try {
      await this.$auth.loginCallback(window.location.href)
      this.$router.replace('/')
    } catch (e) {
      console.error(e)
    }
  }
}
</script>

<template> </template>
<script>
import { OIDCClient } from '@plusauth/oidc-client-js'
export default {
  name: 'SilentRenew',
  async mounted() {
    await new OIDCClient({
      issuer: process.env.VUE_APP_OIDC_ISSUER
    }).loginCallback()
  }
}
</script>

<template>
  <div class="jumbotron">
    <div class="container">
      <h1 class="display-3">Hello, world!</h1>
      <p>
        This is a template for a simple login/register system. It includes the
        OpenID Connect Implicit Flow. To view Profile page please login.
      </p>
      <p>
        <router-link v-if="user" class="btn btn-success btn-lg" to="/profile">
          View Profile &raquo;
        </router-link>
        <button v-else class="btn btn-primary btn-lg" @click="$auth.login()">
          Login/Register &raquo;
        </button>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      user: null
    }
  },
  async created() {
    this.$auth.on('user_login', ({ user }) => {
      this.user = user
    })
    this.$auth.on('user_logout', () => {
      this.user = null
    })
    this.user = await this.$auth.getUser()
  }
}
</script>

<template>
  <div class="container" v-if="user">
    <h3>Welcome {{ user.username }} !</h3>
    <pre>User object: {{ JSON.stringify(user, null, 2) }} </pre>
  </div>
</template>

<script>
export default {
  name: 'Profile',
  data() {
    return {
      user: null
    }
  },
  async created() {
    this.$auth.on('user_login', ({ user }) => {
      this.user = user
    })
    this.$auth.on('user_logout', () => {
      this.user = null
    })
    this.user = await this.$auth.getUser()
  }
}
</script>

<template>
  <div class="container">
    <p>You must log in to view the page</p>
    <button class="btn btn-primary" @click="$auth.login()">Log in</button>
  </div>
</template>

<script>
export default {
  name: 'Unauthorized'
}
</script>