Integrando Supabase com Nuxt

O Supabase é uma das melhores alternativas open-source ao Firebase: banco de dados PostgreSQL, autenticação, storage e API em tempo real, tudo em um único lugar. Combinado com o Nuxt, você tem uma stack full-stack extremamente produtiva.

Instalação

Instale o módulo oficial do Supabase para Nuxt:

npx nuxi module add supabase

Ele adiciona @nuxtjs/supabase automaticamente ao nuxt.config.ts.

Configuração

Adicione suas credenciais no arquivo .env:

SUPABASE_URL=https://seu-projeto.supabase.co
SUPABASE_KEY=sua-anon-key-publica

O módulo expõe essas variáveis automaticamente — não é necessário nenhuma configuração extra no nuxt.config.ts.

Consultando o banco de dados

O módulo disponibiliza o composable useSupabaseClient() em qualquer componente ou página:

<script setup>
const supabase = useSupabaseClient()

const { data: posts } = await useAsyncData('posts', () =>
  supabase.from('posts').select('*').order('created_at', { ascending: false })
)
</script>

Autenticação

<script setup>
const supabase = useSupabaseClient()

async function login(email, password) {
  const { error } = await supabase.auth.signInWithPassword({ email, password })
  if (error) console.error(error.message)
}
</script>

await supabase.auth.signInWithOAuth({ provider: 'github' })

Usuário autenticado

Use o composable useSupabaseUser() para acessar o usuário atual de forma reativa:

<script setup>
const user = useSupabaseUser()
</script>

<template>
  <p v-if="user">Olá, {{ user.email }}</p>
  <p v-else>Você não está logado.</p>
</template>

Protegendo rotas

Crie um middleware em middleware/auth.ts:

export default defineNuxtRouteMiddleware(() => {
  const user = useSupabaseUser()
  if (!user.value) return navigateTo('/login')
})

E adicione na página que deseja proteger:

<script setup>
definePageMeta({ middleware: 'auth' })
</script>

Row Level Security (RLS)

Não esqueça de ativar o RLS nas suas tabelas no painel do Supabase. A anon key usada no frontend tem acesso apenas ao que as políticas de RLS permitem — isso é fundamental para a segurança da aplicação.

Com essa base você já tem autenticação e acesso ao banco funcionando. A partir daqui é só construir.