@crossid/vue-wrapper

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>
  <!-- user will be avaliable here if isAuthenticated === true -->
  <!-- without "disableAutoLogin", the component will automatically redirect the user to the login page -->
  <AuthProvider disableAutoLogin="true" v-slot="{ user, loginRedirect, isAuthenticated }">
    <h1 v-if="isAuthenticated">Hello {{ user.name }}</h1>
    <button
      v-else
      v-on:click="loginRedirect('<app-id>', 'openid offline_access profile email', returnTo)"
    >
      Login!
    </button>
  </AuthProvider>
</template>

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

  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