Skip to main content

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 install @badisi/auth-vue --save

  2. Install required dependency

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

  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/',
                rename: { stripBase: true } // flat copy
              }]
            })
          ]
        }
      };
    });
    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.
    • For more info on how to use the library please have a look at the usage page.

  5. You're done! 🚀