What You Get
Auth, billing, analytics, AI, storage, push notifications, and more—all through one SDK. No separate integrations needed.
1. Install the SDK
npm install @sylphx/platform-sdk2. Get Your Credentials
Create an app in the Sylphx Dashboard to get your credentials. Add them to your environment:
.env.local
SYLPHX_APP_ID=your-app-slug
SYLPHX_APP_SECRET=sk_dev_xxxxxxxxxxxx
NEXT_PUBLIC_SYLPHX_APP_ID=your-app-slugKeep Your Secret Safe
Never expose
SYLPHX_APP_SECRET to the client. Use NEXT_PUBLIC_ prefix only for the app ID.3. Add Provider to Layout
Wrap your app with the SylphxProvider to enable all hooks and components:
app/layout.tsx
import { SylphxProvider } from '@sylphx/platform-sdk/react'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<SylphxProvider appId={process.env.NEXT_PUBLIC_SYLPHX_APP_ID!}>
{children}
</SylphxProvider>
</body>
</html>
)
}4. Add Auth Middleware
Protect your routes with the auth middleware:
middleware.ts
import { authMiddleware } from '@sylphx/platform-sdk/nextjs'
export default authMiddleware({
appId: process.env.SYLPHX_APP_ID!,
publicRoutes: ['/', '/login', '/signup', '/api/auth/callback'],
})
export const config = {
matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
}5. Create Auth Callback
Handle the OAuth callback:
app/api/auth/callback/route.ts
import { handleCallback } from '@sylphx/platform-sdk/nextjs'
export const GET = handleCallback()6. Create Login Page
Use the built-in SignIn component:
app/login/page.tsx
import { SignIn } from '@sylphx/platform-sdk/react'
export default function LoginPage() {
return (
<div className="flex min-h-screen items-center justify-center">
<SignIn
mode="embedded"
afterSignInUrl="/dashboard"
signUpUrl="/signup"
/>
</div>
)
}7. Use in Your App
Now use the SDK anywhere in your app:
app/dashboard/page.tsx
'use client'
import {
useUser,
useBilling,
SignedIn,
SignedOut,
UserButton
} from '@sylphx/platform-sdk/react'
export default function Dashboard() {
const { user, isLoading } = useUser()
const { isPremium } = useBilling()
if (isLoading) return <div>Loading...</div>
return (
<div>
<SignedIn>
<header className="flex justify-between items-center p-4">
<h1>Hello, {user?.name}</h1>
<UserButton />
</header>
{isPremium ? (
<PremiumFeatures />
) : (
<UpgradePrompt />
)}
</SignedIn>
<SignedOut>
<p>Please sign in to continue.</p>
</SignedOut>
</div>
)
}Server-Side Usage
Access user data in Server Components:
app/profile/page.tsx
import { currentUser } from '@sylphx/platform-sdk/nextjs'
import { redirect } from 'next/navigation'
export default async function ProfilePage() {
const user = await currentUser()
if (!user) {
redirect('/login')
}
return (
<div>
<h1>Welcome back, {user.name}</h1>
<p>Email: {user.email}</p>
</div>
)
}