myheats

Auth.jsx (1420B)

---

 import { useState } from 'react'
 import { supabase } from './supabaseClient'
 
 function Auth() {
   const [loading, setLoading] = useState(false)
   const [email, setEmail] = useState('')
 
   const handleLogin = async (e) => {
     e.preventDefault()
 
     try {
       setLoading(true)
       const { error } = await supabase.auth.signInWithOtp({
         email: email,
         options: {
           shouldCreateUser: false,
           emailRedirectTo: window.location.origin
         }})
       if (error) throw error
       alert('Check your email for the login link!')
     } catch (error) {
       alert(error.error_description || error.message)
     } finally {
       setLoading(false)
     }
   }
 
   return (
     <div className="Auth">
       <div>
         <button disabled={!loading}>{loading ? '🛸 sending magic link ...' : ''}</button>
         <h1>Login</h1>
         <p>Sign in with a magic link.</p>
         <div className='loginForm'>
           <form onSubmit={handleLogin}>
             <input
               id="email"
               type="email"
               placeholder="Your email"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
             /><br/>
             <button>🛸 Send magic link</button>
           </form>
         </div>
         <h1>Registration</h1>
         <p>No account yet? Contact event administrator to sign up.</p>
       </div>
     </div>
   )
 }
 
 export default Auth;