# Vue

{% hint style="info" %}
This tutorial is based on the [example app](https://github.com/LanderDK/blitzware-vue-sdk/tree/master/examples/blitzware-vue-example).
{% endhint %}

1. [**Configure BlitzWare**](#configure-blitzware)
2. [**Install the BlitzWare Vue SDK**](#install-the-blitzware-vue-sdk)
3. [**Add Login to your application**](#add-login-to-your-application)
4. [**Show User profile info and add Logout to your application**](#show-user-profile-info-and-add-logout-to-your-application)
5. [**Add Protection to your routes**](#add-protection-to-your-routes)

## 1) Configure BlitzWare <a href="#configure-blitzware" id="configure-blitzware"></a>

### Get Your Application Keys <a href="#get-your-application-keys" id="get-your-application-keys"></a>

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.

<figure><img src="https://3971581513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYjb41by6V7VaMjHbf8VN%2Fuploads%2FwQUuApkYQcdaekNmrQIy%2Fspa_settings.png?alt=media&#x26;token=33781bdf-97e2-4ad5-aae8-d767017b70a6" alt=""><figcaption></figcaption></figure>

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.

## 2) Install the BlitzWare Vue SDK

Run the following command within your project directory to install the [BlitzWare Vue SDK](https://www.npmjs.com/package/blitzware-vue-sdk):

{% code title="npm" overflow="wrap" lineNumbers="true" %}

```
npm install blitzware-vue-sdk
```

{% endcode %}

{% code title="yarn" lineNumbers="true" %}

```
yarn add blitzware-vue-sdk
```

{% endcode %}

### 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()`.

{% code title="main.js" lineNumbers="true" %}

```jsx
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',
      responseType: "code" // or "token" for implicit flow
    })
  )
  .mount('#app')
```

{% endcode %}

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](https://v3.vuejs.org/guide/composition-api-introduction.html) and [Options API](https://vuejs.org/guide/introduction.html#options-api).

## 3) 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.

{% code title="LoginView\.vue" lineNumbers="true" %}

```html
<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>
```

{% endcode %}

### **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.

{% code title="LoginView\.vue" lineNumbers="true" %}

```html
<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>
```

{% endcode %}

## 4) 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:

{% code title="DashboardView\.vue" lineNumbers="true" fullWidth="false" %}

```html
<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>
```

{% endcode %}

### **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.

{% code title="DashboardView\.vue" lineNumbers="true" %}

```html
<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>
```

{% endcode %}

## 5) 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:

{% code title="router/index.js" lineNumbers="true" %}

```javascript
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()
  })
}
```

{% endcode %}

That's it!