What's Included
Email/Password
Registration, login, email verification
OAuth Providers
Google, GitHub, Apple, Discord, Twitter, and more
Two-Factor Auth
TOTP-based 2FA with backup codes
Session Management
Secure JWTs with automatic refresh
Password Reset
Secure token-based recovery flow
Security Features
Rate limiting, login history, security alerts
Quick Setup
Three files to add auth to your Next.js app:
middleware.ts
import { authMiddleware } from '@sylphx/platform-sdk/nextjs'
export default authMiddleware({
appId: process.env.SYLPHX_APP_ID!,
publicRoutes: ['/', '/login', '/signup', '/forgot-password'],
})
export const config = {
matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
}app/api/auth/callback/route.ts
import { handleCallback } from '@sylphx/platform-sdk/nextjs'
export const GET = handleCallback()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" />
</div>
)
}That's It
The SDK handles everything else: password hashing, token generation, session management, email verification, and security.
UI Components
Pre-built, customizable auth components:
| Property | Type | Description |
|---|---|---|
<SignIn /> | Component | Complete sign-in form with OAuth buttons |
<SignUp /> | Component | Registration form with email verification |
<UserButton /> | Component | Avatar dropdown with profile and sign-out |
<ForgotPassword /> | Component | Request password reset email |
<ResetPassword /> | Component | Set new password with token |
<VerifyEmail /> | Component | Email verification page |
import {
SignIn,
SignUp,
UserButton,
ForgotPassword,
ResetPassword,
VerifyEmail
} from '@sylphx/platform-sdk/react'
// Embedded forms
<SignIn mode="embedded" afterSignInUrl="/dashboard" />
<SignUp mode="embedded" afterSignUpUrl="/verify-email" />
// Modal (opens in overlay)
<SignIn mode="modal" />
// User avatar button with dropdown
<UserButton afterSignOutUrl="/" />React Hooks
Use hooks for custom UI or programmatic auth:
import { useUser, useAuth, useSession } from '@sylphx/platform-sdk/react'
function MyComponent() {
// Current user data
const { user, isLoading, isSignedIn } = useUser()
// Auth actions
const { signIn, signUp, signOut, resetPassword } = useAuth()
// Session info
const { session, refresh } = useSession()
// Example: Custom sign-in
const handleSubmit = async (email: string, password: string) => {
const result = await signIn({ email, password })
if (result.success) {
// Redirect to dashboard
}
}
}| Property | Type | Description |
|---|---|---|
useUser() | Hook | Returns user, isLoading, isSignedIn, refresh |
useAuth() | Hook | Returns signIn, signUp, signOut, resetPassword |
useSession() | Hook | Returns session, refresh, isValid |
Protected Content
Show/hide content based on auth state:
import { SignedIn, SignedOut, Protect } from '@sylphx/platform-sdk/react'
function Page() {
return (
<div>
{/* Show only to authenticated users */}
<SignedIn>
<Dashboard />
</SignedIn>
{/* Show only to unauthenticated users */}
<SignedOut>
<SignIn mode="embedded" />
</SignedOut>
{/* Role-based access */}
<Protect role="admin">
<AdminPanel />
</Protect>
{/* Premium-only content */}
<Protect condition={(user) => user?.isPremium}>
<PremiumFeatures />
</Protect>
</div>
)
}Server-Side Auth
Access auth in Server Components and API routes:
Server Component
import { currentUser, auth } from '@sylphx/platform-sdk/nextjs'
import { redirect } from 'next/navigation'
export default async function ProtectedPage() {
// Get current user (null if not signed in)
const user = await currentUser()
if (!user) {
redirect('/login')
}
return <div>Hello, {user.name}!</div>
}
// Or use auth() for more control
export default async function ApiPage() {
const { userId, accessToken } = await auth()
if (!userId) {
return new Response('Unauthorized', { status: 401 })
}
// Use accessToken for platform API calls
}