Install vue CLI

npm install -g @vue/cli

Create a new app

vue create Choose vue3 as the base

Enable typescript for project

vue add typescript

Install crossid vue wrapper

npm install @crossid/vue-wrapper

Create a new crossid client and globaly register wrapper components

In main.ts:

import { create } from "@crossid/vue-wrapper";

const [AuthProvider, AuthCallback] = create({
  issuer: "https://dev.local.crossid.io/oauth2/default/",
  authorization_endpoint: "https://dev.local.crossid.io/oauth2/default/auth",
  token_endpoint: "https://dev.local.crossid.io/oauth2/default/token",
  client_id: "<client-id>",
  refreshToken: true,
  redirect_uri:
    window.location.protocol + "//" + window.location.host + "/callback",
  audience: ["<app-id>"],
  scope: "openid offline_access profile email",
});

createApp(App)
  .component("AuthProvider", AuthProvider)
  .component("AuthCallback", AuthCallback)
  .mount("#app");

Create a protected component Protected.vue

(This is for non automatic redirects)

<template>
  <AuthProvider
    v-bind:disableAutoLogin="true"
    v-slot="{ user, loginRedirect, isAuthenticated, getToken }"
  >
    <!-- user will be avaliable here if isAuthenticated === true -->
    <!-- without "disableAutoLogin", the component will automatically redirect the user to the login page -->
    <!-- getToken is an async function get the an access token -->
    <div v-if="isAuthenticated">
      <h1>Hello {{ user.name }}</h1>
      <button v-on:click="getAccessToken(getToken)">Get Token</button>
      Token: {{ token }}
    </div>
    <button
      v-else
      v-on:click="
        loginRedirect('foo', 'openid offline_access profile email', returnTo)
      "
    >
      Login!
    </button>
  </AuthProvider>
</template>

<script>
  export default {
    name: "Protected",
    data() {
      return { returnTo: window.location.href, token: "" };
    },

    methods: {
      getAccessToken(getToken) {
        getToken().then((tok) => (this.token = tok));
      },
    },

    props: {
      msg: String,
    },
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h3 {
    margin: 40px 0 0;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
</style>

Register components in App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div v-if="currentRoute == '/callback'">
    <!-- we need @navigate="navigate() to respond to redirect events back to "main" page after callback-->
    <AuthCallback @navigate="navigate()">callback...</AuthCallback>
  </div>
  <div v-else>
    <Protected />
  </div>
</template>

<script lang="ts">
  // Our protected component
  import Protected from "./components/Protected.vue";

  export default {
    name: "App",
    // This is a basic routing / navigation setup
    data() {
      return { currentRoute: window.location.pathname };
    },
    components: {
      Protected,
    },
    methods: {
      // This is needed to respond to redirect event after callback
      navigate() {
        //@ts-ignore
        this.currentRoute = window.location.pathname;
      },
    },
  };
</script>

<style>
  OAuthCallback #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

Run the app

npm run serve