Quasar

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

Before using this library

Make sure you properly configured your 👉 Authentication Provider.

Prerequisite

An existing Quasar application set up with TypeScript and Vite.

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 quasar configuration file

   quasar.config.ts

   import { viteStaticCopy } from 'vite-plugin-static-copy';
   import { defineConfig } from '#q-app/wrappers';
   
   export default defineConfig((/* ctx */) => {
     return {
       build: {
         vitePlugins: [
           ...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

   Create an src/boot/auth.ts file

   import { initAuth } from '@badisi/auth-vue';
   import { boot } from 'quasar/wrappers';
   
   export default boot(async ({ app, router }) => {
     const AuthPlugin = await initAuth({
       authorityUrl: 'https://dev-fijd1e9x.us.auth0.com',
       clientId: 'kRVVEnAWKMpxxpcodl0TqLXfIHgQvmmt'
     });
     app.use(AuthPlugin, { router });
   });

   Import it in your quasar.config.ts file

   import { defineConfig } from '#q-app/wrappers';
   
   export default defineConfig((/* ctx */) => {
     return {
       boot: ['auth']
     };
   });

   info

   Initializing the library during your Quasar application bootstrapping ensures that all the security checks are made upstream (if needed).

   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>