'use client';
import { useCavos, useSession } from '@cavos/react';
export function AuthButtons() {
const { login, register, isAuthenticated, address } = useCavos();
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
// Social Login (Google/Apple)
const handleSocialLogin = async (provider) => {
await login(provider); // 'google' or 'apple'
};
// Email/Password Registration
const handleRegister = async () => {
try {
await register('firebase', { email, password });
alert('Check your email to verify your account!');
} catch (error) {
if (error.error === 'rate_limited') {
alert(`Wait ${error.wait_seconds} seconds before trying again`);
}
}
};
// Email/Password Login
const handleEmailLogin = async () => {
try {
await login('firebase', { email, password });
} catch (error) {
if (error.name === 'EmailNotVerifiedError') {
alert('Please verify your email before logging in');
}
}
};
if (isAuthenticated && address) {
return <p>Connected: {address.slice(0, 6)}...{address.slice(-4)}</p>;
}
return (
<div>
{/* Social Login */}
<button onClick={() => handleSocialLogin('google')}>
Login with Google
</button>
<button onClick={() => handleSocialLogin('apple')}>
Login with Apple
</button>
{/* Email/Password */}
<div>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Email"
/>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Password"
/>
<button onClick={handleRegister}>Register</button>
<button onClick={handleEmailLogin}>Login</button>
</div>
</div>
);
}