Vue

This tutorial demonstrates how to add user login to an Vue application using BlitzWare.

This tutorial is based on the example app.

1. Configure BlitzWare

2. Install the BlitzWare Vue SDK

3. Add Login to your application

4. Show User profile info and add Logout to your application

5. Add Protection to your routes

Configure BlitzWare

Get Your Application Keys

You will need some details about your application to communicate with BlitzWare. You can get these details from the Application Settings section in the BlitzWare dashboard.

You need the Client ID.

Configure Redirect URIs

A redirect URI is a URL in your application where BlitzWare redirects the user after they have authenticated. The redirect URI for your app must be added to the Redirect URIs list in your Application Settings under the Security tab. If this is not set, users will be unable to log in to the application and will get an error.

Install the BlitzWare Vue SDK

Run the following command within your project directory to install the BlitzWare Vue SDK:

npm

npm install blitzware-vue-sdk

yarn

yarn add blitzware-vue-sdk

Register to plugin

To use the SDK in your Vue application, register the plugin with your Vue application by passing the return value of createBlitzWareAuth to app.use().

main.js

import './assets/main.css'

import { createApp } from 'vue'

import App from './App.vue'
import { createRouter } from './router'

import { createBlitzWareAuth } from 'blitzware-vue-sdk'

const app = createApp(App)

app
  .use(createRouter(app))
  .use(
    createBlitzWareAuth({
      clientId: 'your-client-id',
      redirectUri: 'your-redirect-uri'
    })
  )
  .mount('#app')

The createBlitzWareAuth function takes the properties clientId and redirectUri ; the values of these properties correspond to the Client ID and Redirect URI values that you can find under Settings in the Single Page Web Application (SPA) that you registered with BlitzWare.

The plugin will register the SDK using both provide and app.config.globalProperties, allowing the SDK to be used with both the Composition API and Options API.

Add Login to your application

To add login to your application, use the login() function that is exposed on the return value of useBlitzWareAuth, which you can access in your component's setup() function. Executing login() redirects your users to the BlitzWare Universal Login Page, where BlitzWare can authenticate them. Upon successful authentication, BlitzWare will redirect your users back to your application.

LoginView.vue

<template>
  <div class="login">
    <h1>Login Page</h1>
    <button @click="login">Login</button>
  </div>
</template>

<script>
import { useBlitzWareAuth } from 'blitzware-vue-sdk'
export default {
  name: 'LoginView',
  setup() {
    const BlitzWareAuth = useBlitzWareAuth()

    return {
      login() {
        BlitzWareAuth.login()
      }
    }
  }
}
</script>

<style>
@media (min-width: 1024px) {
  .login {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
</style>

Using the Options API

If you are using the Options API, you can use the same login() method from the global $blitzware property through the this accessor.

LoginView.vue

<template>
  <div class="login">
    <h1>Login Page</h1>
    <button @click="login">Login</button>
  </div>
</template>

<script>
  export default {
    methods: {
      login() {
        this.$blitzware.login();
      }
    }
  };
</script>

<style>
@media (min-width: 1024px) {
  .login {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
</style>

Show User profile info and add Logout to your application

Once the user authenticates, the SDK extracts the user's profile information and stores it in memory. It can be accessed by using the reactive user property exposed by the return value of useBlitzWareAuth, which you can access in your component's setup() function.

You also need a way to log out. Use the logout() function that is exposed on the return value of useBlitzWareAuth, which you can access in your component's setup() function, to log the user out of your application. Executing logout() clears the session and makes sure that the user can not access protected resources.

Take this Dashboard view as an example of how to use it:

DashboardView.vue

<template>
  <div class="dasboard">
    <h1>Dashboard</h1>
    <p>Welcome to the protected dashboard, {{ user?.username }}!</p>
    <button @click="logout">logout</button>
  </div>
</template>

<script>
import { useBlitzWareAuth } from 'blitzware-vue-sdk'
export default {
  name: 'LoginView',
  setup() {
    const BlitzWareAuth = useBlitzWareAuth()

    return {
      user: BlitzWareAuth.user,
      logout() {
        BlitzWareAuth.logout()
      }
    }
  }
}
</script>

<style>
@media (min-width: 1024px) {
  .dasboard {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
</style>

Using the Options API

If you are using the Options API, you can use the same user property and logout() method from the global $blitzware property through the this accessor.

DashboardView.vue

<template>
  <div class="dasboard">
    <h1>Dashboard</h1>
    <p>Welcome to the protected dashboard, {{ user?.username }}!</p>
    <button @click="logout">logout</button>
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        user: this.$blitzware.user
      };
    },
    methods: {
      logout() {
        this.$blitzware.logout();
      }
    }
  };
</script>

<style>
@media (min-width: 1024px) {
  .dasboard {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
</style>

Add Protection to your routes

The BlitzWare Vue SDK exports the createBlitzWareAuthGuard function used to protect routes by preventing unauthorized users from accessing certain pages or components within your application. Here is how you can do it:

router/index.js

import { createRouter as createVueRouter, createWebHashHistory } from 'vue-router'
import LoginView from '../views/LoginView.vue'
import DashboardView from '../views/DashboardView.vue'
import { createBlitzWareAuthGuard } from 'blitzware-vue-sdk'

export function createRouter(app) {
  return createVueRouter({
    routes: [
      {
        path: '/login',
        name: 'login',
        component: LoginView
      },
      {
        path: '/dashboard',
        name: 'dashboard',
        component: DashboardView,
        beforeEnter: createBlitzWareAuthGuard(app)
      },
      {
        path: '/',
        redirect: '/login'
      }
    ],
    history: createWebHashHistory()
  })
}

That's it!