Vue
This tutorial demonstrates how to add user login to an Vue application using BlitzWare.
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 install blitzware-vue-sdkyarn add blitzware-vue-sdkRegister 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().
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.
<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.
<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:
<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.
<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:
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!
Last updated
Was this helpful?