kobble-io / react Goto Github PK

This package helps you add authentication to your React Application with Kobble Auth SDK in a few minutes.

It's secure by design (using PKCE flow) and easy to use.

Using npm in your project directory run the following command:

npm install @kobbleio/react

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.

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";

render(
  <KobbleProvider
    domain={import.meta.env.VITE_KOBBLE_DOMAIN!}
    clientId={import.meta.env.VITE_KOBBLE_CLIENT_ID!}
    redirectUri={import.meta.env.VITE_KOBBLE_REDIRECT_URI!}
  >
    <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>
    </>
  );
}

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.

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 Kobble Client instance (which uses Kobble SPA SDK).

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

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

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

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

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

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.