Magic Links (Email sin contraseña)

import { AurisClient } from '@auris/js'
 
const auris = new AurisClient({
  domain: 'auth.tudominio.com',
  clientId: 'tu-client-id',
  redirectUri: 'http://localhost:3000/callback',
})
 
// Paso 1: Enviar el correo con el magic link
async function enviarMagicLink(email) {
  const result = await auris.loginWithMagicLink(email)
 
  if (result.success) {
    console.log('Magic link enviado — revisa tu correo')
  } else {
    console.error('Error al enviar el magic link:', result.error)
  }
}
 
// Paso 2: Verificar el token de la URL (en la página de redirección)
async function verificarMagicLink() {
  const params = new URLSearchParams(window.location.search)
  const token = params.get('token')
 
  if (!token) {
    console.error('No hay token en la URL')
    return
  }
 
  const result = await auris.verifyMagicLink(token)
 
  if (result.user) {
    console.log('Autenticado:', result.user)
    window.location.href = '/dashboard'
  } else {
    console.error('Verificación fallida:', result.error)
  }
}

import { useState } from 'react'
import { useAuris } from '@auris/react'
import { useSearchParams, useNavigate } from 'react-router-dom'
 
// Formulario para enviar el magic link
function FormularioMagicLink() {
  const { loginWithMagicLink } = useAuris()
  const [email, setEmail] = useState('')
  const [enviado, setEnviado] = useState(false)
  const [error, setError] = useState(null)
 
  async function handleSubmit(e) {
    e.preventDefault()
    const result = await loginWithMagicLink(email)
    if (result.success) {
      setEnviado(true)
    } else {
      setError(result.error)
    }
  }
 
  if (enviado) {
    return (
      <div>
        <h2>Revisa tu correo</h2>
        <p>Hemos enviado un enlace de inicio de sesión a {email}. El enlace expira en 15 minutos.</p>
      </div>
    )
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <label>Dirección de correo electrónico</label>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
      />
      {error && <p className="error">{error}</p>}
      <button type="submit">Enviar enlace de acceso</button>
    </form>
  )
}
 
// Página de verificación — recibe el token del enlace del correo
function PaginaVerificacionMagicLink() {
  const { verifyMagicLink } = useAuris()
  const [searchParams] = useSearchParams()
  const navigate = useNavigate()
 
  useEffect(() => {
    const token = searchParams.get('token')
    if (!token) {
      navigate('/login?error=missing_token')
      return
    }
 
    verifyMagicLink(token).then((result) => {
      if (result.user) {
        navigate('/dashboard')
      } else {
        navigate('/login?error=invalid_token')
      }
    })
  }, [])
 
  return <p>Verificando tu enlace de acceso...</p>
}

// app/auth/magic-link/page.tsx — enviar el correo
'use client'
import { useState } from 'react'
import { useAuris } from '@auris/react'
 
export default function PaginaMagicLink() {
  const { loginWithMagicLink } = useAuris()
  const [email, setEmail] = useState('')
  const [enviado, setEnviado] = useState(false)
 
  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    await loginWithMagicLink(email)
    setEnviado(true)
  }
 
  if (enviado) {
    return (
      <main>
        <h1>Revisa tu bandeja de entrada</h1>
        <p>
          Se ha enviado un enlace de acceso a <strong>{email}</strong>.
          Expira en 15 minutos.
        </p>
      </main>
    )
  }
 
  return (
    <main>
      <h1>Iniciar sesión con un magic link</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="email"
          placeholder="[email protected]"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
        <button type="submit">Enviar enlace de acceso</button>
      </form>
    </main>
  )
}
 
// app/auth/magic-link/verify/page.tsx — verificar el token
'use client'
import { useEffect } from 'react'
import { useAuris } from '@auris/react'
import { useRouter, useSearchParams } from 'next/navigation'
 
export default function PaginaVerificacionMagicLink() {
  const { verifyMagicLink } = useAuris()
  const router = useRouter()
  const searchParams = useSearchParams()
 
  useEffect(() => {
    const token = searchParams.get('token')
    if (!token) {
      router.push('/auth/magic-link?error=missing_token')
      return
    }
 
    verifyMagicLink(token).then((result) => {
      if (result.user) {
        router.push('/dashboard')
      } else {
        router.push('/auth/magic-link?error=invalid_token')
      }
    })
  }, [])
 
  return <p>Verificando tu enlace de acceso...</p>
}