Skip to content
OctaPOctaPOctaP SDK

Frontend quickstart

Add sign-in the way you would add Firebase Auth. You never handle OAuth nonces, ephemeral keys, zero-knowledge proofs or Enoki.

You need your OctaP API URL, your organization ID and OctaP’s Google client ID, with your site’s origin added to that client.

1. Create the auth object

Section titled “1. Create the auth object”
auth.ts
import { createOctapAuth } from '@octap/browser-sdk';


export const auth = createOctapAuth({
  apiBaseUrl: 'https://your-octap-api.example',
  organizationId: 'your-organization-id',
  googleClientId: 'octap-google-client-id',
});

None of these values are secret. The API key stays on your server.

2. Show the button

Section titled “2. Show the button”
<div id="sign-in"></div>
await auth.renderGoogleButton(document.getElementById('sign-in'), {
  onError: (error) => showMessage(error.message),
});

Signing in also enrolls the customer in your organization. The button renders nothing while a customer is signed in, and returns when they sign out or their session expires.

3. React to the signed-in customer

Section titled “3. React to the signed-in customer”
auth.onAuthStateChanged((user) => {
  if (user) {
    // { endUserId, memberId, suiAddress }
    showAccount(user.memberId);
  } else {
    showSignedOut();
  }
});

The listener also runs once on load, after a reload restores the session. auth.currentUser gives the same value at any time.

4. Call your backend

Section titled “4. Call your backend”

Send the customer’s token to your backend, and verify it there. Never trust a member ID your frontend sends on its own.

const response = await fetch('/api/balance', {
  method: 'POST',
  headers: { authorization: `Bearer ${await auth.getIdToken()}` },
});

Balance, history and voucher calls need your API key, so they run on your backend through @octap/sdk. The Browser SDK does not make them.

5. Sign out

Section titled “5. Sign out”
await auth.signOut();

Next steps

Section titled “Next steps”