Auth Components

import { SignInForm } from '@sylphx/platform-sdk/react'

export default function LoginPage() {
  return (
    <div className="flex min-h-screen items-center justify-center">
      <SignInForm
        onSuccess={(user) => {
          console.log('Signed in:', user.email)
          // Redirect handled automatically, or customize:
          // router.push('/dashboard')
        }}
        onError={(error) => {
          console.error('Sign in failed:', error.message)
        }}
      />
    </div>
  )
}

import { SignUpForm } from '@sylphx/platform-sdk/react'

export default function RegisterPage() {
  return (
    <div className="flex min-h-screen items-center justify-center">
      <SignUpForm
        onSuccess={(user) => {
          // User created, email verification sent
          router.push('/verify-email')
        }}
        requireEmailVerification={true}
      />
    </div>
  )
}

import { UserProfile } from '@sylphx/platform-sdk/react'

export default function SettingsPage() {
  return (
    <div className="max-w-2xl mx-auto py-8">
      <h1 className="text-2xl font-bold mb-6">Profile Settings</h1>
      <UserProfile
        onUpdate={(user) => {
          toast.success('Profile updated!')
        }}
      />
    </div>
  )
}

import { SecuritySettings } from '@sylphx/platform-sdk/react'

export default function SecurityPage() {
  return (
    <div className="max-w-2xl mx-auto py-8">
      <h1 className="text-2xl font-bold mb-6">Security</h1>
      <SecuritySettings
        onPasswordChange={() => {
          toast.success('Password updated successfully!')
        }}
        on2FAEnabled={() => {
          toast.success('Two-factor authentication enabled!')
        }}
      />
    </div>
  )
}

import { AccountSection } from '@sylphx/platform-sdk/react'

export default function AccountPage() {
  return (
    <div className="max-w-2xl mx-auto py-8">
      <h1 className="text-2xl font-bold mb-6">Account</h1>
      <AccountSection
        onAccountDeleted={() => {
          // Redirect to goodbye page
          router.push('/goodbye')
        }}
        onDataExportRequested={() => {
          toast.success('Data export started. You\'ll receive an email when ready.')
        }}
      />
    </div>
  )
}

import { OAuthButtons } from '@sylphx/platform-sdk/react'

export default function LoginPage() {
  return (
    <div className="max-w-md mx-auto py-8">
      <h1 className="text-2xl font-bold mb-6">Sign In</h1>

      <OAuthButtons
        providers={['google', 'github', 'apple']}
        onSuccess={(user, provider) => {
          console.log(`Signed in with ${provider}`)
          router.push('/dashboard')
        }}
      />

      <div className="relative my-6">
        <div className="absolute inset-0 flex items-center">
          <div className="w-full border-t" />
        </div>
        <div className="relative flex justify-center text-sm">
          <span className="bg-background px-2 text-muted-foreground">
            Or continue with email
          </span>
        </div>
      </div>

      {/* Your custom email form here */}
    </div>
  )
}

import { SignInForm, defaultTheme, type ThemeVariables } from '@sylphx/platform-sdk/react'

const customTheme: ThemeVariables = {
  ...defaultTheme,
  colorPrimary: '#6366f1',
  colorPrimaryHover: '#4f46e5',
  colorBackground: '#ffffff',
  colorForeground: '#1f2937',
  colorMuted: '#f3f4f6',
  colorMutedForeground: '#6b7280',
  colorBorder: '#e5e7eb',
  colorInput: '#ffffff',
  colorDestructive: '#ef4444',
  colorSuccess: '#22c55e',
  fontFamily: 'Inter, sans-serif',
  fontSize: '14px',
  borderRadius: '0.75rem',
  shadowSm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
  shadowMd: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
}

<SignInForm theme={customTheme} />
<SignUpForm theme={customTheme} />
<UserProfile theme={customTheme} />