Magic Links (Passwordless Email)

import { AurisClient } from '@auris/js'
 
const auris = new AurisClient({
  domain: 'auth.yourdomain.com',
  clientId: 'your-client-id',
  redirectUri: 'http://localhost:3000/callback',
})
 
// Step 1: Send the magic link email
async function sendMagicLink(email) {
  const result = await auris.loginWithMagicLink(email)
 
  if (result.success) {
    console.log('Magic link sent — check your email')
  } else {
    console.error('Failed to send magic link:', result.error)
  }
}
 
// Step 2: Verify the token from the URL (on your redirect page)
async function verifyMagicLink() {
  const params = new URLSearchParams(window.location.search)
  const token = params.get('token')
 
  if (!token) {
    console.error('No token in URL')
    return
  }
 
  const result = await auris.verifyMagicLink(token)
 
  if (result.user) {
    console.log('Authenticated:', result.user)
    window.location.href = '/dashboard'
  } else {
    console.error('Verification failed:', result.error)
  }
}

import { useState } from 'react'
import { useAuris } from '@auris/react'
import { useSearchParams, useNavigate } from 'react-router-dom'
 
// Send magic link form
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>Check your email</h2>
        <p>We sent a sign-in link to {email}. The link expires in 15 minutes.</p>
      </div>
    )
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <label>Email address</label>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
      />
      {error && <p className="error">{error}</p>}
      <button type="submit">Send sign-in link</button>
    </form>
  )
}
 
// Verification page — receives the token from the email 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>Verifying your sign-in link...</p>
}

// app/auth/magic-link/page.tsx — send the email
'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>Check your inbox</h1>
        <p>
          A sign-in link has been sent to <strong>{email}</strong>.
          It expires in 15 minutes.
        </p>
      </main>
    )
  }
 
  return (
    <main>
      <h1>Sign in with a magic link</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="email"
          placeholder="[email protected]"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
        <button type="submit">Send sign-in link</button>
      </form>
    </main>
  )
}
 
// app/auth/magic-link/verify/page.tsx — verify the token
'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>Verifying your sign-in link...</p>
}