Getting an API Key

Steps

1. Visit sphere.gistda.or.th
2. Register for an account
3. Create a new API key and register your domain(s)

Host Restrictions

When creating your API key, set the allowed hosts to limit usage to only your domains. This is your primary security mechanism since the API key is sent as a query parameter in requests and is visible in the browser's network tab.

For example, if your site is deployed at example.com and you develop locally:

Usage

Pass the API key to SphereProvider:

<SphereProvider apiKey="YOUR_API_KEY">
  {/* Your app */}
</SphereProvider>

Environment Variables

While the API key is ultimately visible in network requests (it's sent as a query parameter to load the SDK), using environment variables keeps the key out of your source code and version control:

For Next.js projects:

NEXT_PUBLIC_SPHERE_API_KEY=your_api_key_here

<SphereProvider apiKey={process.env.NEXT_PUBLIC_SPHERE_API_KEY!}>
  {/* Your app */}
</SphereProvider>

For Vite projects:

VITE_SPHERE_API_KEY=your_api_key_here

<SphereProvider apiKey={import.meta.env.VITE_SPHERE_API_KEY}>
  {/* Your app */}
</SphereProvider>