Introduction
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:
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 Kobble.io. 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
Sign in for free at Kobble
Create a new Project
Go to Applications and create an application
In the Redirect URI section, add http://localhost:3000/callback
The callback URL must match your Vue.js app. We’ll create that callback page later on.
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.
If you’ve configured everything correctly, your customer portal should be up and running already at https://[your-project].portal.kobble.io 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:
Install Kobble SDK
In your terminal, run the following command:
Then, create a file to init the SDK:
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
})
Replace the environment variables with the values provided in the Kobble Application we created earlier.
Implement the login
The OAuth flow will work as follows:
the user clicks on a login button
he’s redirected to your customer portal
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:
// We import the kobbleClient we init before
import { kobbleClient } from ‘@/kobble‘;
const login = () => {
kobbleClient.loginWithRedirect();
};
</script>
<template>
<button @click=“login”>Login</button>
</template>
Handle the callback
To make sure our flow can be completed, let’s create a callback page and use the handleRedirectCallback() method.
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)
}
}
}
</script>
<template>
<div>
<h1>Authenticating…</h1>
</div>
</template>
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)
})
Other methods
The Kobble client also exposes a lot of utility functions, such as:
logout()
getIdToken()
getAccessToken()
Conclusion
In under 10 minutes, we added authentication to our vuejs application using Kobble.io.
Demo website:
https://vue-auth-example.vercel.app
Full Code:
https://github.com/kobble-io/vue-auth-example
Thank you!
If you liked this tutorial, feel free to smash the like button and react in the comments below 🙂
