Как добавить социальную авторизацию с помощью BetterAuth

Социальная аутентификация стала стандартом для современных веб-приложений, однако многие разработчики всё ещё сталкиваются с устаревшей документацией Auth.js или дорогостоящими SaaS-решениями. BetterAuth — это фреймворк-агностичная библиотека аутентификации на TypeScript, которая сейчас находится на версии 1.x и предлагает самостоятельно размещаемую альтернативу, которая одновременно мощная и простая в реализации.

Что такое BetterAuth?

BetterAuth — это TypeScript-ориентированная библиотека аутентификации, которая работает на вашей инфраструктуре. В отличие от NextAuth (теперь Auth.js) со сложными паттернами адаптеров или SaaS-провайдеров, таких как Clerk, которые привязывают вас к своим тарифам, BetterAuth предоставляет чистый API со встроенной поддержкой OAuth2 с BetterAuth через конфигурацию socialProviders.

Библиотека выделяется своей простотой: настройте провайдеры на сервере, создайте клиент с помощью createAuthClient и вызовите authClient.signIn.social(). Никаких отдельных эндпоинтов для регистрации, никаких запутанных потоков — просто аутентификация, которая работает.

Настройка социальной авторизации в BetterAuth

Конфигурация сервера

Начните с установки BetterAuth и настройки вашего сервера аутентификации с входом через Google и GitHub с 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!,
    }
  }
})

Эта конфигурация автоматически обрабатывает поток OAuth2. BetterAuth управляет обменом OAuth и созданием сессии, но вы должны настроить правильные callback URL в панели управления каждого провайдера.

Настройка клиента

Создайте клиент аутентификации для включения социальной авторизации BetterAuth во фронтенде:

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

export const authClient = createAuthClient({
  baseURL: process.env.NEXT_PUBLIC_APP_URL // Базовый URL вашего приложения
})

Реализация социальной авторизации в Next.js

Вот как реализовать социальную аутентификацию Next.js с простым компонентом входа:

// 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}>
        Войти через Google
      </button>
      <button onClick={handleGitHubLogin}>
        Войти через GitHub
      </button>
    </div>
  )
}

Метод signIn.social() обрабатывает всё: перенаправление к провайдеру, обработку callback’ов и установку сессии. Вы можете опционально указать errorCallbackURL для неудачных аутентификаций или newUserCallbackURL для новых пользователей.

Пользовательские OAuth-провайдеры с плагином Generic OAuth

Для провайдеров, выходящих за рамки встроенных, BetterAuth предлагает плагин Generic OAuth в BetterAuth. Этот плагин позволяет интегрироваться с любым провайдером, совместимым с OAuth 2.0 или OIDC:

// auth.ts с пользовательским провайдером
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"]
      }]
    })
  ]
})

Эта гибкость означает, что вы не ограничены основными провайдерами — корпоративные SSO, региональные сервисы или внутренние OAuth-серверы работают без проблем.

Управление сессиями и обработка токенов

BetterAuth предоставляет реактивное управление сессиями из коробки:

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

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

  if (isPending) return <div>Загрузка...</div>
  if (!session) return <div>Не аутентифицирован</div>

  return (
    <div>
      <p>Добро пожаловать, {session.user.name}</p>
      <button onClick={() => authClient.signOut()}>
        Выйти
      </button>
    </div>
  )
}

Замечание о токенах: поведение refresh-токенов варьируется в зависимости от провайдера. GitHub, например, не предоставляет refresh-токены по умолчанию, в то время как Google предоставляет. BetterAuth обрабатывает эти различия прозрачно, но понимание специфики вашего провайдера помогает при отладке граничных случаев.

Соображения для продакшена

При развертывании социальной аутентификации BetterAuth:

1. Переменные окружения: Правильно защитите ваши OAuth-учётные данные
2. Callback URL: Обновите конфигурации провайдеров с продакшен-URL
3. Миграции базы данных: Запустите обычные миграции базы данных после обновления схемы BetterAuth (например, через npx @better-auth/cli generate при использовании Drizzle).
4. HTTPS: OAuth2 требует защищённых соединений в продакшене

Связывание аккаунтов — подключение нескольких социальных аккаунтов к одному пользователю — это развивающаяся функция в BetterAuth. Библиотека хорошо справляется с базовыми случаями, но сложные сценарии могут потребовать пользовательской логики.

Заключение

BetterAuth привносит современную, TypeScript-ориентированную аутентификацию в ваш стек без сложности Auth.js или затрат SaaS-провайдеров. Со встроенной поддержкой основных провайдеров и плагином Generic OAuth для пользовательских интеграций, он покрывает практически любой сценарий OAuth2 с BetterAuth, с которым вы столкнётесь.

Унифицированный API signIn.social(), реактивное управление сессиями и фреймворк-агностичный дизайн делают BetterAuth отличным выбором для команд, желающих контролировать свою инфраструктуру аутентификации, сохраняя при этом продуктивность разработчиков.

Часто задаваемые вопросы

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.