Magic Links

await gately.sendMagicLink(email, options)

import { GatelyClient } from '@gately/sdk'

const gately = new GatelyClient('YOUR_PROJECT_ID')

async function handleMagicLink(email) {
  try {
    await gately.sendMagicLink(email, {
      redirectTo: '/dashboard'
    })
    
    // Show success message
    showMessage('Check your email for a login link!')
  } catch (error) {
    console.error('Failed to send magic link:', error.message)
  }
}

import { useState } from 'react'
import { useGately } from '@gately/sdk'

function MagicLinkForm() {
  const { sendMagicLink } = useGately()
  const [email, setEmail] = useState('')
  const [sent, setSent] = useState(false)
  const [error, setError] = useState('')

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

    try {
      await sendMagicLink(email, { redirectTo: '/dashboard' })
      setSent(true)
    } catch (err) {
      setError(err.message)
    }
  }

  if (sent) {
    return (
      <div className="success">
        <h2>Check your email</h2>
        <p>We sent a login link to {email}</p>
        <button onClick={() => setSent(false)}>
          Use a different email
        </button>
      </div>
    )
  }

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

try {
  await gately.sendMagicLink(email)
} catch (error) {
  switch (error.code) {
    case 'INVALID_EMAIL':
      showError('Please enter a valid email address')
      break
    case 'RATE_LIMITED':
      showError('Too many requests. Please wait a moment.')
      break
    default:
      showError('Failed to send login link. Please try again.')
  }
}

function LoginOptions() {
  const [mode, setMode] = useState('password') // or 'magic'

  return (
    <div>
      <div className="tabs">
        <button 
          className={mode === 'password' ? 'active' : ''}
          onClick={() => setMode('password')}
        >
          Password
        </button>
        <button 
          className={mode === 'magic' ? 'active' : ''}
          onClick={() => setMode('magic')}
        >
          Magic Link
        </button>
      </div>

      {mode === 'password' ? (
        <PasswordLoginForm />
      ) : (
        <MagicLinkForm />
      )}
    </div>
  )
}