Configuration | Sylphx Documentation

Get Your Credentials

Create an App

Go to the Sylphx Dashboard and create a new app to get your credentials.

Copy Your Keys

Property	Type	Description
`App ID`	`string`	Your unique app identifier (slug)
`App Secret`	`sk_*`	Server-side secret key (never expose to client)
`App ID`	`app_*`	Client-side identifier (safe to expose)

Add to Environment

Add the credentials to your environment file.

Environment Variables

.env.local

# Server-side only — never expose to the browser
SYLPHX_SECRET_KEY=sk_dev_xxxxxxxxxxxxxxxxxxxxxxxxxxxx

# Client-safe — prefix required for Next.js client access
NEXT_PUBLIC_SYLPHX_APP_ID=app_dev_xxxxxxxxxxxxxxxxxxxx

Security Warning

Never expose your SYLPHX_SECRET_KEY to the client. Only use it in server-side code (API routes, Server Components, middleware).

That's All You Need

No platform URL to set. The SDK knows where to connect. Get both keys from Console → Your App → API Keys.

Root Layout (Server Component)

Fetch app config server-side and pass it to the provider:

app/layout.tsx

import { getAppConfig } from '@sylphx/sdk/server'
import { SylphxProvider } from '@sylphx/sdk/react'

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const config = await getAppConfig({
    secretKey: process.env.SYLPHX_SECRET_KEY!,
    appId: process.env.NEXT_PUBLIC_SYLPHX_APP_ID!,
  })

  return (
    <html lang="en">
      <body>
        <SylphxProvider
          config={config}
          appId={process.env.NEXT_PUBLIC_SYLPHX_APP_ID!}
        >
          {children}
        </SylphxProvider>
      </body>
    </html>
  )
}

Server API Client

For server-side API calls:

lib/platform.ts

import { createServerClient } from '@sylphx/sdk/server'

export const platform = createServerClient({
  secretKey: process.env.SYLPHX_SECRET_KEY!,
})

Middleware

Handles auth routes and route protection automatically — no manual /api/auth/* routes needed:

middleware.ts

import { createSylphxMiddleware } from '@sylphx/sdk/nextjs'

export default createSylphxMiddleware({
  publicRoutes: ['/', '/about', '/pricing', '/login'],
})

export const config = {
  matcher: ['/((?!_next|.*\\..*).*)', '/'],
}

Environment-Specific Keys

Keys encode the environment in their prefix — the SDK auto-detects and routes accordingly:

Property	Type	Description
`sk_dev_* / app_dev_*`	`Development`	Local development and testing. Relaxed rate limits.
`sk_stg_* / app_stg_*`	`Staging`	Pre-production testing. Production-like settings.
`sk_prod_* / app_prod_*`	`Production`	Live production environment. Strict limits.

Auto-Detection

The SDK automatically detects the environment from the key prefix and routes requests to the appropriate backend.

Content Security Policy (CSP)

If your application uses a Content Security Policy, you must allow connections to Sylphx domains. Add the following to your CSP connect-src directive:

Required CSP Domains

connect-src 'self' https://sylphx.com https://*.sylphx.com;

For Next.js applications, add this to your next.config.ts:

next.config.ts

const nextConfig = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: [
              "default-src 'self'",
              "connect-src 'self' https://sylphx.com https://*.sylphx.com",
              // ... other directives
            ].join('; '),
          },
        ],
      },
    ]
  },
}

Important

Both https://sylphx.com AND https://*.sylphx.com are required. The wildcard pattern does not match the apex domain.

Industry Standard

Manual CSP configuration is standard practice. Firebase, Supabase, Auth0, and other authentication providers all require you to configure CSP in your application—the SDK cannot modify browser security headers.

Authentication

Set up auth for your app

Billing

Add subscriptions and payments