Como Adicionar Login Social com BetterAuth

A autenticação social tornou-se o padrão para aplicações web modernas, mas muitos desenvolvedores ainda enfrentam dificuldades com a documentação desatualizada do Auth.js ou soluções SaaS caras. O BetterAuth, uma biblioteca de autenticação TypeScript agnóstica de framework agora na versão 1.x, oferece uma alternativa auto-hospedada que é tanto poderosa quanto simples de implementar.

O que é BetterAuth?

BetterAuth é uma biblioteca de autenticação TypeScript-first que roda na sua própria infraestrutura. Diferentemente do NextAuth (agora Auth.js) com seus padrões complexos de adaptadores, ou provedores SaaS como Clerk que te prendem aos seus preços, o BetterAuth fornece uma API limpa com suporte integrado para OAuth2 com BetterAuth através de sua configuração socialProviders.

A biblioteca se destaca pela sua simplicidade: configure provedores no servidor, crie um cliente com createAuthClient, e chame authClient.signIn.social(). Sem endpoints de cadastro separados, sem fluxos confusos—apenas autenticação que funciona.

Configurando Login Social com BetterAuth

Configuração do Servidor

Comece instalando o BetterAuth e configurando seu servidor de autenticação com login Google e GitHub com 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 configuração gerencia o fluxo OAuth2 automaticamente. O BetterAuth cuida da troca OAuth e criação de sessão, mas você deve configurar as URLs de callback corretas no painel de cada provedor.

Configuração do Cliente

Crie seu cliente de autenticação para habilitar o login social com BetterAuth no seu frontend:

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

export const authClient = createAuthClient({
  baseURL: process.env.NEXT_PUBLIC_APP_URL // URL base da sua aplicação
})

Implementando Login Social no Next.js

Veja como implementar autenticação social no Next.js com um componente de login simples:

// 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}>
        Entrar com Google
      </button>
      <button onClick={handleGitHubLogin}>
        Entrar com GitHub
      </button>
    </div>
  )
}

O método signIn.social() cuida de tudo: redirecionar para o provedor, gerenciar callbacks e estabelecer a sessão. Você pode opcionalmente especificar errorCallbackURL para autenticações que falharam ou newUserCallbackURL para usuários de primeira viagem.

Provedores OAuth Personalizados com Plugin Generic OAuth

Para provedores além dos integrados, o BetterAuth oferece o plugin Generic OAuth no BetterAuth. Este plugin permite integração com qualquer provedor compatível com OAuth 2.0 ou OIDC:

// auth.ts com provedor personalizado
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 flexibilidade significa que você não está limitado a provedores mainstream—SSO empresarial, serviços regionais ou servidores OAuth internos funcionam perfeitamente.

Gerenciamento de Sessão e Manipulação de Tokens

O BetterAuth fornece gerenciamento de sessão reativo pronto para uso:

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

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

  if (isPending) return <div>Carregando...</div>
  if (!session) return <div>Não autenticado</div>

  return (
    <div>
      <p>Bem-vindo, {session.user.name}</p>
      <button onClick={() => authClient.signOut()}>
        Sair
      </button>
    </div>
  )
}

Uma observação sobre tokens: o comportamento do refresh token varia por provedor. O GitHub, por exemplo, não fornece refresh tokens por padrão, enquanto o Google fornece. O BetterAuth lida com essas diferenças de forma transparente, mas entender as especificidades do seu provedor ajuda ao depurar casos extremos.

Considerações para Produção

Ao implantar autenticação social com BetterAuth:

1. Variáveis de Ambiente: Proteja suas credenciais OAuth adequadamente
2. URLs de Callback: Atualize as configurações dos provedores com URLs de produção
3. Migrações de Banco de Dados: Execute suas migrações normais de banco de dados após atualizar o schema do BetterAuth (por exemplo, via npx @better-auth/cli generate ao usar Drizzle).
4. HTTPS: OAuth2 requer conexões seguras em produção

Vinculação de contas—conectar múltiplas contas sociais a um único usuário—é um recurso em evolução no BetterAuth. A biblioteca lida bem com casos básicos, mas cenários complexos podem exigir lógica personalizada.

Conclusão

O BetterAuth traz autenticação moderna e TypeScript-first para sua stack sem a complexidade do Auth.js ou os custos de provedores SaaS. Com suporte integrado para os principais provedores e o plugin Generic OAuth para integrações personalizadas, ele cobre praticamente qualquer cenário de OAuth2 com BetterAuth que você encontrará.

A API unificada signIn.social(), gerenciamento de sessão reativo e design agnóstico de framework fazem do BetterAuth uma escolha sólida para equipes que desejam controle sobre sua infraestrutura de autenticação mantendo a produtividade dos desenvolvedores.

Perguntas Frequentes

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.