DEV Community

Cover image for The easiest way to authenticate users with Vue.js
Kevin Piacentini
Kevin Piacentini

Posted on

The easiest way to authenticate users with Vue.js


A wise man once said:

The easiest way to code authentication is not to code it.

Well, maybe I was that man. But as a matter of fact, it's true.

The result (in 10 minutes)

First, here's what we're going to build:

Demo Page

Screenshot of the result

As you can see, it's a simple Single Page Application built with Vue.js where our users can sign up / sign in with a few clicks.

Once logged in, we can access various methods to fetch the user's profile, user's access token and more.

Only 10 minutes? What's the catch?

There is no catch. In this tutorial, we're going to use This service provides a full-featured customer portal as a service that you can use from any website.

This portal includes authentication, monetization, rate-limiting, and more advanced features.

TL;DR: We'll save hours of tedious work by implementing their Auth SPA SDK with a few lines of code.

Create an application on Kobble

The callback URL must match your Vue.js app. We'll create that callback page later on.

Creating a Kobble Application

Select your authentication providers

Kobble has already created a customer portal for us. But now, we need to activate the authentication providers we want.

  • Go to Authentication and activate the providers of your choice (it's straightforward, but you can read their docs if needed).
  • That's it.

Image description

If you've configured everything correctly, your customer portal should be up and running already at https://[your-project] and you can customize it on the Customer Portal section of your dashboard.

Setting up your Vue.js app

Quick note

Here I'm assuming you already have a Vue.JS app up and running. If you don't the easiest way to get started is probably to use a Vite template by running:

npm create vite@latest my-vue-app -- --template vue-ts
Enter fullscreen mode Exit fullscreen mode

Install Kobble SDK

In your terminal, run the following command:

npm i -S @kobbleio/auth-spa-js
Enter fullscreen mode Exit fullscreen mode

Then, create a file to init the SDK:

// src/kobble/index.ts

import { createKobbleClient } from '@kobbleio/auth-spa-js'

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
Enter fullscreen mode Exit fullscreen mode

Replace the environment variables with the values provided in the Kobble Application we created earlier.

Kobble Application Screenshot

Implement the login

The OAuth flow will work as follows:

  1. the user clicks on a login button
  2. he's redirected to your customer portal
  3. once logged-in he's redirected back to your callback URL to complete the OAuth flow

Kobble provides everything we need to handle this.

Handle login

To handle login, you only have to use the loginWithRedirect() method provided by our Kobble instance.

You just have to create a button anywhere on your app that looks like this:

<script lang="ts">
// We import the kobbleClient we init before
import { kobbleClient } from '@/kobble';

const login = () => {

    <button @click="login">Login</button>
Enter fullscreen mode Exit fullscreen mode

Handle the callback

To make sure our flow can be completed, let's create a callback page and use the handleRedirectCallback() method.

<script lang="ts">
import { kobbleClient } from '@/kobble'

export default {
  async mounted() {
    try {
      await kobbleClient.handleRedirectCallback()
      this.$router.replace({ name: 'home' })
    } catch (e: any) {
      console.log('Error while authenticating', e.message)

Enter fullscreen mode Exit fullscreen mode

Make sure your callback page URL matches the Redirect URI you previously used.

Listen to the user state changes

That's it. Your vue.js app is ready to authenticate your users.

Now, you can listen to the user's state using the following method:

 * This callback is triggered every time the user object changes:
 * - on login
 * - on logout
 * - on access token refreshed
kobbleClient.onAuthStateChanged((data) => {
  console.log('User', data.user)

Enter fullscreen mode Exit fullscreen mode

Other methods

The Kobble client also exposes a lot of utility functions, such as:

  • logout()
  • getIdToken()
  • getAccessToken()


In under 10 minutes, we added authentication to our vuejs application using

Demo website:

Full Code:

Thank you!

If you liked this tutorial, feel free to smash the like button and react in the comments below :)

Top comments (0)