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)
`Public Key`	`pk_*`	Client-side key (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/platform-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/platform-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/platform-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.

Authentication

Set up auth for your app

Billing

Add subscriptions and payments