​
You will learn how to:

  • Create a new Vue.js application using Vite
  • Configure @kobbleio/javascript SDK
  • Protect your application routes
Pre-requisites: You need to set up your Kobble account before starting this guide.

​
Example repository

Vue Auth Example This is a simple Vue.js starter project that demonstrates how to implement authentication in a Vue.js application. It uses vue-router, pinia, tailwind and @kobbleio/javascript SDK to manage the authentication state of the application. Check our the repository for more information:

​
Getting started

1

Create your vue.js application

Scaffold your new Vue.js application using Vite.
npm create vite@latest my-vue-app -- --template vue-ts
cd my-vue-app
npm install
npm run dev
2

Install @kobbleio/javascript

Our auth SDK for SPAs helps you to easily authenticate your users in your Vue.js application and manage their session.
npm install @kobbleio/javascript
3

Initialize the SDK

Create a file src/kobble/index.ts where you will initialize the SDK and export the Kobble instance.
// src/kobble/index.ts

import { createKobbleClient } from '@kobbleio/javascript'

export const kobbleClient = createKobbleClient({
    domain: import.meta.env.VITE_KOBBLE_DOMAIN,
    clientId: import.meta.env.VITE_KOBBLE_CLIENT_ID,
    redirectUri: import.meta.env.VITE_KOBBLE_REDIRECT_URI
})
4

Setup the environment variables

Create a .env file at the root of your project and add the following environment variables.
VITE_KOBBLE_DOMAIN=https://your-project.portal.kobble.io
VITE_KOBBLE_CLIENT_ID=your-client-id
VITE_KOBBLE_REDIRECT_URI=http://localhost:3000/callback
KOBBLE_DOMAIN and KOBBLE_CLIENT_ID can be found in the Kobble Application we created earlier. The REDIRECT_URI must match the callback route we’re going to configure in the next step of this tutorial.
5

Create a callback handler

Install and configure vue-router.
If you’re not familiar with Vue Router, you can check our router configuration here.
Then create a new page view to handle our callback src/views/CallbackView.vue.Use the Kobble client to handle the callback and redirect the user to the home page on page mount.
// src/views/CallbackView.vue
// ... rest of your page

async mounted() {
    try {
        await kobbleClient.handleRedirectCallback()
        this.$router.replace({ name: 'home' })
    } catch (e: any) {
        console.error('Error handling redirect callback:', e)
    }
}
6

Use the loginWithRedirect method

Then we can use the loginWithRedirect method to redirect the user to the Kobble login page whenever we want to authenticate the user.For example with a simple button:
// src/components/LoginButton.vue
<script>
    import { kobbleClient } from '../kobble'

    const login = async () => {
        await kobbleClient.loginWithRedirect()
    }
</script>
<template>
    <button @click="login">Login</button>
</template>
7

Going further

At this stage, you have successfully added authentication to your Vue.js application using Kobble SDK.Now you can use all methods provided by our SDK to protect your routes, get the user profile, listen to the user state changes and more.Here are some useful examples:
import { kobbleClient } from '../kobble'

// In an async function
const user = await kobbleClient.getUser()

const isAuthenticated = await kobbleClient.isAuthenticated()

const accessToken = await kobbleClient.getAccessToken()

const idToken = await kobbleClient.getIdToken()

await kobbleClient.logout()
You can also listen to the user state changes:
import { kobbleClient } from '../kobble'

kobbleClient.onUserStateChanged((data) => {
    console.log('User state changed:', data.user) // User | null
})

​
🎉 You made it!

You have successfully added authentication to your Vue.js application using Kobble SDK.