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

# Required
SYLPHX_APP_ID=your-app-slug

# Server-side (never expose to browser)
SYLPHX_APP_SECRET=sk_dev_xxxxxxxxxxxxxxxxxxxx

# Client-side (prefixed with NEXT_PUBLIC_ for Next.js)
NEXT_PUBLIC_SYLPHX_APP_ID=your-app-slug
NEXT_PUBLIC_SYLPHX_PLATFORM_URL=https://sylphx.com

Security Warning

Never expose your SYLPHX_APP_SECRET to the client. This key should only be used in server-side code.

Server-Side Client

Create a platform client for server-side usage:

lib/platform.ts

import { createPlatformAPI } from '@sylphx/sdk'

export const platform = createPlatformAPI({
  appId: process.env.SYLPHX_APP_ID!,
  appSecret: process.env.SYLPHX_APP_SECRET!,
  // Optional, defaults to https://sylphx.com
  platformUrl: process.env.SYLPHX_PLATFORM_URL,
})

Client-Side Provider

Wrap your app with the SylphxProvider for client-side features:

app/providers.tsx

'use client'

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

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <SylphxProvider
      appId={process.env.NEXT_PUBLIC_SYLPHX_APP_ID!}
      platformUrl={process.env.NEXT_PUBLIC_SYLPHX_PLATFORM_URL}
    >
      {children}
    </SylphxProvider>
  )
}

app/layout.tsx

import { Providers } from './providers'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

Auth Middleware

Set up authentication middleware for protected routes:

middleware.ts

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

export default authMiddleware({
  appId: process.env.SYLPHX_APP_ID!,
  // Routes that don't require authentication
  publicRoutes: [
    '/',
    '/login',
    '/signup',
    '/api/auth/callback',
    '/api/webhooks/(.*)',
  ],
})

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

Environment-Specific Keys

Sylphx supports environment-specific keys for development, staging, and production:

Property	Type	Description
`sk_dev_*`	`Development`	Local development and testing
`sk_staging_*`	`Staging`	Pre-production testing environment
`sk_live_*`	`Production`	Live production environment

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