Componentes
Cubes

AuthCube

Flujo de auth (login/registro/reset) sobre un adapter (better-auth).

Login / registro / reset

Vista previa

Inicia sesión

Bienvenido de vuelta. Ingresa tus credenciales.

¿No tienes cuenta?
// app/(auth)/auth-cube.tsx — el adapter mapea 1:1 a better-auth.
"use client";
import { AuthCube, type AuthAdapter } from "@eidondev/acme-ui/cubes";
import { signIn, signUp } from "@/lib/auth-client";
import { useRouter } from "next/navigation";

const adapter: AuthAdapter = {
  signIn: async ({ email, password }) => {
    const { error } = await signIn.email({ email, password });
    return error ? { ok: false, error: error.message } : { ok: true };
  },
  signUp: async ({ name, email, password }) => {
    const { error } = await signUp.email({ name, email, password });
    return error ? { ok: false, error: error.message } : { ok: true };
  },
  // omite requestPasswordReset y el cube oculta ese modo automáticamente.
};

const router = useRouter();
<AuthCube
  adapter={adapter}
  onAuthenticated={() => router.push("/dashboard")}
  social={<GoogleButton />}   // slot opcional, va arriba con separador "o"
/>

// Headless si quieres otra piel: const { state, submit } = useAuth({ adapter })

Comparación de temas

El mismo componente bajo distintos modos y marcas. No cambia el componente — solo los tokens (CSS variables) del contenedor.
Legacy · claro

Inicia sesión

Bienvenido de vuelta. Ingresa tus credenciales.

¿No tienes cuenta?
Editorial · claro

Inicia sesión

Bienvenido de vuelta. Ingresa tus credenciales.

¿No tienes cuenta?
Technical · oscuro

Inicia sesión

Bienvenido de vuelta. Ingresa tus credenciales.

¿No tienes cuenta?
Warm · claro

Inicia sesión

Bienvenido de vuelta. Ingresa tus credenciales.

¿No tienes cuenta?
Playful · claro

Inicia sesión

Bienvenido de vuelta. Ingresa tus credenciales.

¿No tienes cuenta?