Magic Links (Passwortlose E-Mail)

import { AurisClient } from '@auris/js'
 
const auris = new AurisClient({
  domain: 'auth.yourdomain.com',
  clientId: 'your-client-id',
  redirectUri: 'http://localhost:3000/callback',
})
 
// Schritt 1: Magic-Link-E-Mail senden
async function sendMagicLink(email) {
  const result = await auris.loginWithMagicLink(email)
 
  if (result.success) {
    console.log('Magic Link gesendet — prüfe deine E-Mails')
  } else {
    console.error('Senden des Magic Links fehlgeschlagen:', result.error)
  }
}
 
// Schritt 2: Token aus der URL verifizieren (auf deiner Redirect-Seite)
async function verifyMagicLink() {
  const params = new URLSearchParams(window.location.search)
  const token = params.get('token')
 
  if (!token) {
    console.error('Kein Token in der URL')
    return
  }
 
  const result = await auris.verifyMagicLink(token)
 
  if (result.user) {
    console.log('Authentifiziert:', result.user)
    window.location.href = '/dashboard'
  } else {
    console.error('Verifizierung fehlgeschlagen:', result.error)
  }
}

import { useState } from 'react'
import { useAuris } from '@auris/react'
import { useSearchParams, useNavigate } from 'react-router-dom'
 
// Magic-Link-Formular senden
function MagicLinkForm() {
  const { loginWithMagicLink } = useAuris()
  const [email, setEmail] = useState('')
  const [sent, setSent] = useState(false)
  const [error, setError] = useState(null)
 
  async function handleSubmit(e) {
    e.preventDefault()
    const result = await loginWithMagicLink(email)
    if (result.success) {
      setSent(true)
    } else {
      setError(result.error)
    }
  }
 
  if (sent) {
    return (
      <div>
        <h2>Prüfe deine E-Mails</h2>
        <p>Wir haben einen Anmelde-Link an {email} gesendet. Der Link läuft in 15 Minuten ab.</p>
      </div>
    )
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <label>E-Mail-Adresse</label>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
      />
      {error && <p className="error">{error}</p>}
      <button type="submit">Anmelde-Link senden</button>
    </form>
  )
}
 
// Verifizierungsseite — empfängt den Token vom E-Mail-Link
function MagicLinkVerifyPage() {
  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>Dein Anmelde-Link wird verifiziert...</p>
}

// app/auth/magic-link/page.tsx — E-Mail senden
'use client'
import { useState } from 'react'
import { useAuris } from '@auris/react'
 
export default function MagicLinkPage() {
  const { loginWithMagicLink } = useAuris()
  const [email, setEmail] = useState('')
  const [submitted, setSubmitted] = useState(false)
 
  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    await loginWithMagicLink(email)
    setSubmitted(true)
  }
 
  if (submitted) {
    return (
      <main>
        <h1>Prüfe deinen Posteingang</h1>
        <p>
          Ein Anmelde-Link wurde an <strong>{email}</strong> gesendet.
          Er läuft in 15 Minuten ab.
        </p>
      </main>
    )
  }
 
  return (
    <main>
      <h1>Mit Magic Link anmelden</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="email"
          placeholder="[email protected]"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
        <button type="submit">Anmelde-Link senden</button>
      </form>
    </main>
  )
}
 
// app/auth/magic-link/verify/page.tsx — Token verifizieren
'use client'
import { useEffect } from 'react'
import { useAuris } from '@auris/react'
import { useRouter, useSearchParams } from 'next/navigation'
 
export default function MagicLinkVerifyPage() {
  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>Dein Anmelde-Link wird verifiziert...</p>
}