Email/Password Authentication

'use client'

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

export function SignUpForm() {
  const { signUp } = useAuth()
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [name, setName] = useState('')

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    try {
      await signUp({ email, password, name })
      // User is now signed in, redirect to dashboard
    } catch (error) {
      // Handle error (email taken, weak password, etc.)
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" placeholder="Name" value={name} onChange={e => setName(e.target.value)} />
      <input type="email" placeholder="Email" value={email} onChange={e => setEmail(e.target.value)} />
      <input type="password" placeholder="Password (min 8 characters)" value={password} onChange={e => setPassword(e.target.value)} />
      <button type="submit">Sign Up</button>
    </form>
  )
}

import { platform } from '@/lib/platform'

const result = await platform.auth.signup({
  email: 'user@example.com',
  password: 'securePassword123',
  name: 'John Doe',
})

// result.accessToken - JWT for API calls
// result.refreshToken - For refreshing access token
// result.user - User object

'use client'

import { useAuth } from '@sylphx/platform-sdk/react'
import { useState } from 'react'
import { useRouter } from 'next/navigation'

export function SignInForm() {
  const { signIn } = useAuth()
  const router = useRouter()
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [error, setError] = useState('')

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError('')

    try {
      await signIn({ email, password })
      router.push('/dashboard')
    } catch (err) {
      setError('Invalid email or password')
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      {error && <div className="text-red-500">{error}</div>}
      <input type="email" placeholder="Email" value={email} onChange={e => setEmail(e.target.value)} />
      <input type="password" placeholder="Password" value={password} onChange={e => setPassword(e.target.value)} />
      <button type="submit">Sign In</button>
    </form>
  )
}

'use client'

import { useAuth } from '@sylphx/platform-sdk/react'
import { useSearchParams, useRouter } from 'next/navigation'
import { useEffect, useState } from 'react'

export default function VerifyEmailPage() {
  const { verifyEmail } = useAuth()
  const searchParams = useSearchParams()
  const router = useRouter()
  const [status, setStatus] = useState<'loading' | 'success' | 'error'>('loading')

  useEffect(() => {
    const token = searchParams.get('token')
    if (!token) {
      setStatus('error')
      return
    }

    verifyEmail(token)
      .then(() => {
        setStatus('success')
        setTimeout(() => router.push('/dashboard'), 2000)
      })
      .catch(() => setStatus('error'))
  }, [searchParams, verifyEmail, router])

  if (status === 'loading') return <div>Verifying your email...</div>
  if (status === 'success') return <div>Email verified! Redirecting...</div>
  return <div>Invalid or expired verification link.</div>
}

'use client'

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

export function ForgotPasswordForm() {
  const { resetPassword } = useAuth()
  const [email, setEmail] = useState('')
  const [sent, setSent] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    await resetPassword.request(email)
    setSent(true)
  }

  if (sent) {
    return <div>Check your email for a reset link.</div>
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" placeholder="Enter your email" value={email} onChange={e => setEmail(e.target.value)} />
      <button type="submit">Send Reset Link</button>
    </form>
  )
}

'use client'

import { useAuth } from '@sylphx/platform-sdk/react'
import { useSearchParams, useRouter } from 'next/navigation'
import { useState } from 'react'

export default function ResetPasswordPage() {
  const { resetPassword } = useAuth()
  const searchParams = useSearchParams()
  const router = useRouter()
  const [password, setPassword] = useState('')
  const [confirmPassword, setConfirmPassword] = useState('')

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (password !== confirmPassword) {
      alert('Passwords do not match')
      return
    }

    const token = searchParams.get('token')
    if (!token) return

    await resetPassword.confirm({ token, password })
    router.push('/login?reset=success')
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="password" placeholder="New password" value={password} onChange={e => setPassword(e.target.value)} />
      <input type="password" placeholder="Confirm password" value={confirmPassword} onChange={e => setConfirmPassword(e.target.value)} />
      <button type="submit">Reset Password</button>
    </form>
  )
}

'use client'

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

export function SignOutButton() {
  const { signOut } = useAuth()

  return (
    <button onClick={() => signOut()}>
      Sign Out
    </button>
  )
}