Cómo Añadir Inicio de Sesión Social con BetterAuth

La autenticación social se ha convertido en el estándar para las aplicaciones web modernas, sin embargo, muchos desarrolladores aún luchan con la documentación desactualizada de Auth.js o con soluciones SaaS costosas. BetterAuth, una biblioteca de autenticación TypeScript agnóstica de framework ahora en versión 1.x, ofrece una alternativa auto-hospedada que es tanto potente como sencilla de implementar.

¿Qué es BetterAuth?

BetterAuth es una biblioteca de autenticación con TypeScript como prioridad que se ejecuta en tu propia infraestructura. A diferencia de NextAuth (ahora Auth.js) con sus complejos patrones de adaptadores, o proveedores SaaS como Clerk que te atan a sus precios, BetterAuth proporciona una API limpia con soporte integrado para OAuth2 con BetterAuth a través de su configuración socialProviders.

La biblioteca destaca por su simplicidad: configura proveedores en el servidor, crea un cliente con createAuthClient, y llama a authClient.signIn.social(). Sin endpoints de registro separados, sin flujos confusos—simplemente autenticación que funciona.

Configuración del Inicio de Sesión Social con BetterAuth

Configuración del Servidor

Comienza instalando BetterAuth y configurando tu servidor de autenticación con inicio de sesión de Google y GitHub con BetterAuth:

// auth.ts
import { betterAuth } from "better-auth"
import { drizzleAdapter } from "better-auth/adapters/drizzle"
import { db } from "./db"

export const auth = betterAuth({
  database: drizzleAdapter(db, {
    provider: "sqlite"
  }),
  socialProviders: {
    github: {
      clientId: process.env.GITHUB_CLIENT_ID!,
      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
    },
    google: {
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }
  }
})

Esta configuración maneja el flujo OAuth2 automáticamente. BetterAuth gestiona el intercambio OAuth y la creación de sesiones, pero debes configurar las URLs de callback correctas en el panel de cada proveedor.

Configuración del Cliente

Crea tu cliente de autenticación para habilitar el inicio de sesión social con BetterAuth en tu frontend:

// auth-client.ts
import { createAuthClient } from "better-auth/client"

export const authClient = createAuthClient({
  baseURL: process.env.NEXT_PUBLIC_APP_URL // La URL base de tu aplicación
})

Implementación del Inicio de Sesión Social en Next.js

Aquí te mostramos cómo implementar autenticación social en Next.js con un componente de inicio de sesión simple:

// components/login-button.tsx
import { authClient } from "@/lib/auth-client"

export function LoginButton() {
  const handleGoogleLogin = async () => {
    await authClient.signIn.social({
      provider: "google",
      callbackURL: "/dashboard"
    })
  }

  const handleGitHubLogin = async () => {
    await authClient.signIn.social({
      provider: "github",
      callbackURL: "/dashboard"
    })
  }

  return (
    <div className="flex gap-4">
      <button onClick={handleGoogleLogin}>
        Iniciar sesión con Google
      </button>
      <button onClick={handleGitHubLogin}>
        Iniciar sesión con GitHub
      </button>
    </div>
  )
}

El método signIn.social() maneja todo: redirige al proveedor, gestiona los callbacks y establece la sesión. Opcionalmente puedes especificar errorCallbackURL para autenticaciones fallidas o newUserCallbackURL para usuarios primerizos.

Proveedores OAuth Personalizados con el Plugin Generic OAuth

Para proveedores más allá de los integrados, BetterAuth ofrece el plugin Generic OAuth en BetterAuth. Este plugin permite la integración con cualquier proveedor compatible con OAuth 2.0 u OIDC:

// auth.ts with custom provider
import { betterAuth } from "better-auth"
import { genericOAuth } from "better-auth/plugins"

export const auth = betterAuth({
  plugins: [
    genericOAuth({
      config: [{
        providerId: "custom-provider",
        discoveryUrl: "https://provider.com/.well-known/openid-configuration",
        clientId: process.env.CUSTOM_CLIENT_ID!,
        clientSecret: process.env.CUSTOM_CLIENT_SECRET!,
        scopes: ["openid", "email", "profile"]
      }]
    })
  ]
})

Esta flexibilidad significa que no estás limitado a proveedores principales—SSO empresarial, servicios regionales o servidores OAuth internos funcionan sin problemas.

Gestión de Sesiones y Manejo de Tokens

BetterAuth proporciona gestión de sesiones reactiva lista para usar:

// components/user-profile.tsx
import { authClient } from "@/lib/auth-client"

export function UserProfile() {
  const { data: session, isPending } = authClient.useSession()

  if (isPending) return <div>Cargando...</div>
  if (!session) return <div>No autenticado</div>

  return (
    <div>
      <p>Bienvenido, {session.user.name}</p>
      <button onClick={() => authClient.signOut()}>
        Cerrar sesión
      </button>
    </div>
  )
}

Una nota sobre los tokens: el comportamiento del refresh token varía según el proveedor. GitHub, por ejemplo, no proporciona refresh tokens por defecto, mientras que Google sí. BetterAuth maneja estas diferencias de forma transparente, pero comprender las especificidades de tu proveedor ayuda al depurar casos extremos.

Consideraciones para Producción

Al desplegar la autenticación social con BetterAuth:

1. Variables de Entorno: Asegura tus credenciales OAuth adecuadamente
2. URLs de Callback: Actualiza las configuraciones del proveedor con las URLs de producción
3. Migraciones de Base de Datos: Ejecuta tus migraciones de base de datos normales después de actualizar el esquema de BetterAuth (por ejemplo, mediante npx @better-auth/cli generate cuando uses Drizzle).
4. HTTPS: OAuth2 requiere conexiones seguras en producción

La vinculación de cuentas—conectar múltiples cuentas sociales a un usuario—es una característica en evolución en BetterAuth. La biblioteca maneja bien los casos básicos, pero escenarios complejos podrían requerir lógica personalizada.

Conclusión

BetterAuth trae autenticación moderna con TypeScript como prioridad a tu stack sin la complejidad de Auth.js o los costos de proveedores SaaS. Con soporte integrado para los principales proveedores y el plugin Generic OAuth para integraciones personalizadas, cubre prácticamente cualquier escenario de OAuth2 con BetterAuth que encuentres.

La API unificada signIn.social(), la gestión de sesiones reactiva y el diseño agnóstico de framework hacen de BetterAuth una opción sólida para equipos que desean control sobre su infraestructura de autenticación mientras mantienen la productividad del desarrollador.

Preguntas Frecuentes

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.