This package helps you add authentication to your React-based Chrome extension with Kobble Auth SDK in a few minutes.

It's secure by design (using PKCE flow), compatible with all web extensions and easy to use.

Getting Started

Installation

Using npm in your project directory run the following command:

npm install @kobbleio/react-web-extension

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.

Visit our Quick Start Guide to learn more.

Usage

Kobble requires your app to be wrapped in a KobbleProvider component. This component should be at the root of your application.

import ReactDOM from 'react-dom/client';
import { KobbleProvider, SignedIn, SignedOut } from "@kobbleio/react-web-extension";

render(
  <KobbleProvider
    domain={import.meta.env.VITE_KOBBLE_DOMAIN!}
    clientId={import.meta.env.VITE_KOBBLE_CLIENT_ID!}
  >
    <App />
  </KobbleProvider>,
  document.getElementById('root'),
);

function App() {
  return (
    <>
      <h1>Hello World!</h1>
      <SignedIn>
        <p>This is only visible for signed in users.</p>
      </SignedIn>
      
      <SignedOut>
        <p>This is only visible for unauthenticated users.</p>
      </SignedOut>
    </>
  );
}

Utility Components

The package provides various utility components to help you manage the user's authentication status.

• <SignedIn />: Only shows its children if the user is signed in.
• <SignedOut />: Only shows its children if the user is signed out.
• <LoginButton />: A button that triggers the login flow. I can be customized by passing a child prop.
• <LogoutButton />: A button that triggers the logout flow. I can be customized by passing a child prop.
• <HandleCallback />: A component that handles the authentication callback for the PKCE flow.
• <PortalLink />: A link that redirects to your Customer Portal.
• <PricingLink />: A link that redirects to your Pricing Page.
• <ProfileLink />: A link that redirects to the user's profile page.

Utility Hooks

The package provides some hooks to access the user's authentication status and Kobble Client.

• useAuth(): Returns the user's authentication status and the Kobble Client.
• useAuthStateChanged(callback): Calls the callback function when the user's authentication status changes.
• useKobble(): Returns the KobbleWebExtensionClient instance (which uses Kobble SPA SDK).

Examples

import { LoginButton, LogoutButton } from "@kobbleio/react-web-extension";

const MyPage = () => {
  const { user } = useAuth();

  return (
    <>
      <SignedIn>
        <h1>Hello {user.name}</h1>
        <LogoutButton />
      </SignedIn>

      <SignedOut>
        <LoginButton />
      </SignedOut>
    </>
  )
}

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.