Frontend SDK

pnpm add @optare/react

import { OptareProvider } from '@optare/react';
 
function App() {
  return (
    <OptareProvider apiKey="pub_...">
      <YourApp />
    </OptareProvider>
  );
}

import { useAuth } from '@optare/react';
 
function Profile() {
  const { user, isAuthenticated, isLoading } = useAuth();
 
  if (isLoading) return <div>Loading...</div>;
  if (!isAuthenticated) return <div>Please log in</div>;
 
  return <div>Hello, {user.email}</div>;
}

import { useOrganization } from '@optare/react';
 
function OrgSettings() {
  const { organization, role } = useOrganization();
 
  return (
    <div>
      <h1>{organization.name}</h1>
      <p>Your role: {role}</p>
    </div>
 
## Security Warning: Client Secrets
 
<div className="bg-red-50 border border-red-200 rounded-lg p-4 my-4 text-red-800">
  <strong>CRITICAL:</strong> Never use your <code>clientSecret</code> in frontend code.
</div>
 
The SDK is isomorphic (runs on Node and Browser), but your **Client Secret** (`sk_...`) is for server-side use only.
 
If you attempt to initialize the client with a secret in a browser environment, the SDK will throw a hard error:
 
> "SECURITY ALERT: You are attempting to use 'clientSecret' in a browser environment. This will expose your secret key to attackers."
 
Always use the **Publishable Key** (`clientId` or `apiKey`) for frontend initialization.
  );
}