Reference
Frontend SDK

Frontend SDK

The @optare/optareid-react package provides hooks and context providers to make integrating authentication easy.

Installation

npm install @optare/optareid-react @optare/optareid-js

Setup

Wrap your application in the OptareProvider:

import { OptareProvider } from '@optare/optareid-react';
 
function App() {
  return (
    <OptareProvider 
      domain="https://id.optare.one"
      clientId="your_client_id"
    >
      <YourApp />
    </OptareProvider>
  );
}

Hooks

useOptare

The core hook for checking authentication state.

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

useOrganization

Access the current organization context.

import { useOptare } from '@optare/optareid-react';
 
function OrgSettings() {
  const { organization, role } = useOptare();
 
  return (
    <div>
      <h1>{organization?.name}</h1>
      <p>Your role: {role}</p>
    </div>
  );
}

Security Warning: Client Secrets

CRITICAL: Never use your clientSecret in frontend code.

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 Client ID for frontend initialization.

Backend SDKUI Components