Módulo 2 - Aula 1

Sistema de Autenticação Completo

Implemente autenticação enterprise com Supabase: email/senha, OAuth social, JWT tokens, roles e Row Level Security. Sistema robusto em minutos.

55 min

Iniciante/Intermediário

Authentication

🔐 Autenticação Enterprise

🎯 Por que autenticação robusta é crítica?

Problema comum: Auth improvisada gera vazamentos de dados, tokens inseguros e compliance quebrado. 83% dos hacks exploram auth fraca.

Solução Supabase: Auth enterprise com JWT seguros, OAuth social, MFA nativo e Row Level Security automática.

✅ Recursos Avançados do Supabase Auth

JWT Tokens Seguros

Tokens auto-renováveis, refresh automático, expiração configurável

Row Level Security

Usuários só acessam próprios dados automaticamente no nível do banco

OAuth Social

Google, GitHub, Apple, Discord - 25+ providers nativos

User Management

Perfis customizados, roles, metadata e policies granulares

🔍 Fluxo de Autenticação Supabase

auth-flow.ts

// 📱 1. User faz signup/login
const { data, error } = await supabase.auth.signUp({
  email: 'user@example.com',
  password: 'password123'
})

// 🔐 2. Supabase gera JWT + Refresh Token
// JWT contém: user_id, role, metadata, exp

// 🏦 3. JWT é enviado automaticamente em requests
const { data: todos } = await supabase
  .from('todos')
  .select('*')
  // RLS aplica WHERE user_id = auth.uid() automaticamente

// 🔄 4. Refresh automático antes de expirar
// Client SDK renova tokens transparentemente

// 🚪 5. Logout limpa tokens
await supabase.auth.signOut()

🆚 Supabase vs Firebase Auth

✅ Supabase Vantagens

• JWT padrão (não proprietário)
• RLS nativo do PostgreSQL
• Policies SQL granulares
• Open source (sem lock-in)
• Preços mais agressivos

❌ Firebase Limitações

• Custom tokens proprietários
• Security rules limitadas
• NoSQL não relaciona dados
• Vendor lock-in total
• Preços crescem rapidamente

🛠️ Implementação Completa de Auth

Demo: Sistema de Autenticação

Senha

ou continue com

🔧 Implementação:

auth-handlers.ts

// 🔐 Login com email/senha
const handleLogin = async () => {
  const { data, error } = await supabase.auth.signInWithPassword({
    email: email,
    password: password
  })
  
  if (error) {
    console.error('Erro:', error.message)
  } else {
    console.log('Usuário logado:', data.user)
    // Redirect para dashboard
  }
}

// 📝 Cadastro novo usuário
const handleSignup = async () => {
  const { data, error } = await supabase.auth.signUp({
    email: email,
    password: password
  })
  
  if (error) {
    console.error('Erro:', error.message)
  } else {
    console.log('Usuário criado:', data.user)
    // Email de confirmação enviado
  }
}

// 🐙 OAuth com GitHub
const handleGitHubLogin = async () => {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'github',
    options: {
      redirectTo: 'http://localhost:3000/dashboard'
    }
  })
}

💡 Demo Interativa: Este formulário mostra a interface real que você vai construir. O código ao lado é exatamente o que implementamos no projeto.

⚙️ Configuração OAuth Providers

oauth-config.sql

-- SQL: Configurar no Supabase Dashboard → Authentication → Providers

-- 🐙 GitHub OAuth
Client ID: seu_github_client_id
Client Secret: seu_github_secret
Callback URL: https://seu-projeto.supabase.co/auth/v1/callback

-- 🔍 Google OAuth  
Client ID: seu_google_client_id.apps.googleusercontent.com
Client Secret: seu_google_secret
Authorized redirect URIs: https://seu-projeto.supabase.co/auth/v1/callback

-- ⚡ Configuração automática de providers:
- Apple, Discord, Facebook, Twitter
- LinkedIn, Spotify, Slack, Notion
- 25+ providers suportados nativamente