kobble-io/javascript

Add authentication to any Single Page Application using Kobble Auth SDK in under 10 minutes.

This package helps you add authentication to your Single Page Application with Kobble Auth SDK in under 10 minutes.

It's secure by design (using PKCE flow), easy to use, and works with any JavaScript framework.

Since v1.6.0 it also supports web extensions through the KobbleWebExtensionClient class, more info available in our documentation.

Getting Started

Installation

Using npm in your project directory run the following command:

npm install @kobbleio/javascript

Configure Kobble

Create an Application in your Kobble Dashboard.

Make sure your application can handle your localhost callback URL (see section below).

Note the Client ID and your Portal Domain values.

Configure the SDK

Create a KobbleClient instance before rendering or initializing your application. You should only have one instance of the client.

import { createKobbleClient } from '@kobbleio/javascript';

const kobble = createKobbleClient({
    domain: 'https://<YOUR_PORTAL_DOMAIN>',
    clientId: '<YOUR_CLIENT_ID>',
    redirectUri: '<YOUR_CALLBACK_URL>',
});

Note: <YOUR_CALLBACK_URL> must be allowed in your Kobble Application. In that route you must call the handleRedirectCallback to complete the flow (see the section below).

Then you can use the kobbleClient instance to log in, log out, and check the user's authentication status and more.

Logging In

<button id="login">Click to Login</button>

// redirect to your Kobble Customer Portal
document.getElementById('login').addEventListener('click', async () => {
  await kobble.loginWithRedirect();
});

// in your callback route (i.e. https://localhost:3000/callback)
window.addEventListener('load', async () => {
  const redirectResult = await kobble.handleRedirectCallback();
  // logged in. you can get the user profile like this:
  const user = await kobble.getUser();
  console.log(user);
});

Available methods

• loginWithRedirect(): Redirects the user to the Universal Login Page.
• handleRedirectCallback(): Handles the callback from the Universal Login Page.
• getUser(): Returns the user profile.
• logout(): Logs the user out.
• getAccessToken(): Returns the user's access token (to send to Kobble Gateway).

Raise an issue

To provide feedback or report a bug, please raise an issue on our issue tracker.

---

What is Kobble?

Kobble is the one-stop solution for monetizing modern SaaS and APIs. It allows to add authentication, analytics and payment to any app in under 10 minutes.