Vue.js

This guide explains how to set up your Vue.js project to begin using @badisi/auth-vue.

Before using this library

Make sure you properly configured your 👉 Authentication Provider.

Prerequisite

An existing Vue.js application.

Installation

1. Install the library from the NPM repository

   npm

   npm install @badisi/auth-vue --save

   yarn

   yarn add @badisi/auth-vue

2. Install required dependency

   npm

   npm install vite-plugin-static-copy --save-dev

   yarn

   yarn add vite-plugin-static-copy

3. Modify your Vite configuration file

   vite.config.ts

   import { viteStaticCopy } from 'vite-plugin-static-copy';
   
   export default defineConfig({
     plugins: [
       viteStaticCopy({
         targets: [{
           src: 'node_modules/@badisi/auth-vue/oidc/assets/*',
           dest: 'oidc/callback/'
         }]
       })
     ]
   });

   info

   Assets needs to be copy over to your application because some html web pages are used and required when navigating back from the Authentication Provider.

4. Provide the library

   main.ts

   import './assets/main.css'
   
   import { initAuth } from '@badisi/auth-vue';
   import { createApp } from 'vue'
   import app from './App.vue'
   import router from './router'
   
   initAuth({
     authorityUrl: 'https://dev-fijd1e9x.us.auth0.com',
     clientId: 'kRVVEnAWKMpxxpcodl0TqLXfIHgQvmmt'
   }).then(authPlugin => {
     const vueApp = createApp(app);
     vueApp.use(authPlugin, { router });
     vueApp.use(router);
     vueApp.mount('#app');
   }).catch(error => console.error(error));

   info

   Initializing the library prior to your Vue.js application bootstrapping ensures that all the security checks are made upstream (if needed) and avoid the whole application to be loaded twice when using redirects.

   tip

   For more info on how to configure the library please have a look at the configuration page.

5. You're done! 🚀

Basic example

AuthComponent.vue

<template>
  <div style="display:flex; flex-direction:column; align-items:start; gap:16px">
    <button @click="$authService.login()">Login</button>
    <button @click="$authService.logout()">Logout</button>
    <button @click="$authService.renew()">Silent renew</button>
    (Authenticated: {{ $authService.isRenewingRef.value ? 'renewing..' : $authService.isAuthenticatedRef }})
  </div>
</template>

<script setup lang="ts">
  import { useAuthService } from '@badisi/auth-vue';
  import { toRaw, watch } from 'vue';

  const authService = useAuthService();
  watch(authService.userProfileRef, value => {
    console.log('user profile:', toRaw(value));
  });
</script>