Ship Authentication & Embedded Wallets in MinutesShip Authentication & Embedded Wallets in Minutes

import { useState } from 'react';
import { useLoginWithEmail } from '@moon-key/react-auth';

export default function EmailLogin() {
  const [email, setEmail] = useState('');
  const [otp, setOtp] = useState('');
  const [codeSent, setCodeSent] = useState(false);
  const { sendCode, loginWithCode, state } = useLoginWithEmail();

  if (!codeSent) {
    return (
      <div>
        <input
          type="email"
          placeholder="Enter your email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <button 
          onClick={() => sendCode({ email }).then(() => setCodeSent(true))}
          disabled={!email || state === 'sending'}
        >
          Send Code
        </button>
      </div>
    );
  }

  return (
    <div>
      <input
        type="text"
        placeholder="Enter 6-digit code"
        value={otp}
        onChange={(e) => setOtp(e.target.value)}
        maxLength={6}
      />
      <button 
        onClick={() => loginWithCode({ code: otp })}
        disabled={otp.length !== 6}
      >
        Verify & Login
      </button>
    </div>
  );
}