Guia prático para implementar autenticação com Supabase e Next.js

Introdução

Se você está construindo um aplicativo web moderno, uma das primeiras preocupações deve ser a autenticação de usuários. Neste guia, vamos mostrar como implementar um sistema seguro usando Supabase — uma alternativa open-source ao Firebase — e Next.js, o framework React ideal para SSR e APIs.

A combinação dessas duas tecnologias permite uma integração fluida, com performance, segurança e escalabilidade.

---

Por que usar Supabase com Next.js?

Supabase oferece autenticação baseada em tokens JWT, fácil integração com OAuth, e ainda possui uma camada de banco de dados PostgreSQL. Já o Next.js é ideal para proteger rotas do lado do servidor e gerenciar sessões com SSR/SSG.

Benefícios:

• Setup rápido sem reinventar a roda
• Tokens seguros com controle de sessão
• Suporte a provedores como Google, GitHub, etc.
• API REST e GraphQL pronta

---

1. Configuração inicial

Passo 1: Criar projeto no Supabase

Acesse supabase.com, crie uma conta e um novo projeto. Após criado, copie a SUPABASE_URL e SUPABASE_ANON_KEY.

Passo 2: Instalar dependências

npm install @supabase/supabase-js @supabase/auth-helpers-nextjs

---

2. Inicializando o Supabase Client

Crie um arquivo lib/supabaseClient.ts:

import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'

export const supabase = createBrowserSupabaseClient()

---

3. Setup do Provider de Sessão

No _app.tsx, envolva seu app com o provedor de sessão:

import { SessionContextProvider } from '@supabase/auth-helpers-react'
import { supabase } from '@/lib/supabaseClient'

function MyApp({ Component, pageProps }) {
  return (
    <SessionContextProvider
      supabaseClient={supabase}
      initialSession={pageProps.initialSession}
    >
      <Component {...pageProps} />
    </SessionContextProvider>
  )
}

---

4. Página de Login

Crie uma página simples para login:

import { useSupabaseClient } from '@supabase/auth-helpers-react'

export default function Login() {
  const supabase = useSupabaseClient()

  const loginWithGoogle = async () => {
    await supabase.auth.signInWithOAuth({ provider: 'google' })
  }

  return <button onClick={loginWithGoogle}>Login com Google</button>
}

---

5. Protegendo rotas com SSR

Use o helper getServerSideProps para proteger páginas:

import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs'

export const getServerSideProps = async (ctx) => {
  const supabase = createServerSupabaseClient(ctx)
  const {
    data: { session },
  } = await supabase.auth.getSession()

  if (!session) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    }
  }

  return {
    props: { user: session.user },
  }
}

---

6. Logout e gerenciamento de sessão

const logout = async () => {
  await supabase.auth.signOut()
}

---

Tabela de comparação: Firebase vs Supabase

Recurso	Firebase	Supabase
Open Source	Não	Sim
Banco de dados	Firestore (NoSQL)	PostgreSQL (relacional)
Hospedagem	Incluída	Separado

---

Conclusão

Integrar o Supabase com o Next.js proporciona uma solução robusta, escalável e moderna para lidar com autenticação de usuários. Com poucos passos, você implementa login social, proteção de rotas e gerenciamento de sessões.

Para desenvolvedores frontend que querem acelerar a entrega de MVPs ou apps completos, essa é uma das abordagens mais diretas e eficazes.

---

Pronto para acelerar seu negócio com autenticação moderna?

Nossa equipe pode te ajudar a implementar soluções seguras e escaláveis com Supabase e Next.js.

Solicitar orçamento