Get Your Credentials
1
Create an App
Go to the Sylphx Dashboard and create a new app to get your credentials.
2
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) |
3
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_xxxxxxxxxxxxxxxxxxxxSecurity 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.