Próxima aula

🎯 Aula 06

🔐 Integração Clerk Authentication

Implemente autenticação profissional em minutos usando Clerk - a solução mais avançada para autenticação em aplicações Next.js modernas.

35 minutos

Nível: Intermediário

Por que isso é importante

Aplicações com autenticação segura aumentam a confiança dos usuários em 78%. Clerk reduz o tempo de implementação de auth em 90% comparado a soluções custom, eliminando 95% dos bugs de segurança. Empresas como Linear, Loom e Raycast confiam no Clerk para proteger milhões de usuários.

Conceitos Importantes para Entender

Authentication vs Authorization:

Authentication verifica identidade (quem você é). Authorization controla acesso (o que pode fazer). Clerk gerencia ambos de forma integrada.

Server-Side Auth:

Clerk funciona tanto no cliente quanto no servidor Next.js, garantindo segurança em Server Components e Route Handlers.

Middleware Pattern:

Intercepta requests antes de chegar às páginas, verificando autenticação e redirecionando usuários não autenticados automaticamente.

Prebuilt Components:

Interface pronta para login, cadastro e gerenciamento de perfil. Totalmente customizável e responsiva.

O que é o Clerk?

🚀 Vantagens do Clerk

Setup em 10 minutos: Instalação e configuração ultra-rápida
Multi-provider: Google, GitHub, Discord, Apple, etc.
UI personalizável: Match perfeito com seu design
Next.js native: Otimizado para App Router

🔒 Recursos de Segurança

2FA nativo: SMS, TOTP, backup codes
Session management: Controle avançado de sessões
Rate limiting: Proteção contra ataques
GDPR compliant: Conformidade automática

Configuração Inicial

🌐 Criar Conta📱 Configurar App🔑 API Keys

conta

🌐 Criando Conta no Clerk

Primeiro passo é criar uma conta gratuita no Clerk Dashboard:

1️⃣ Acessar o Clerk Dashboard

Acesse: https://clerk.com

✅ Clique em "Get Started for Free"
✅ Faça cadastro com GitHub (recomendado)
✅ Confirme email se necessário

2️⃣ Criar Nova Aplicação

✅ Clique em "Add application"
✅ Nome: "Meu Projeto Next.js"
✅ Selecione "Next.js" como framework
✅ Escolha provedores de login (Google + GitHub recomendados)

app

📱 Configurações da Aplicação

Configure domínios e URLs de redirecionamento:

🏠 Domínios Permitidos

No dashboard, vá em Domains e adicione:

• localhost:3000 (desenvolvimento)

• seu-dominio.com (produção)

🔄 URLs de Redirecionamento

Sign-in URL:/sign-in

Sign-up URL:/sign-up

After sign-in:/dashboard

keys

🔑 Configurar API Keys

Copie as chaves da seção API Keys do dashboard:

📋 Arquivo .env.local

.env.local

# 🔑 Clerk API Keys
# Copie do dashboard: API Keys > Show API Keys

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...

# 🔄 URLs de Redirecionamento
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard

🚨 Segurança Importante

• NUNCA commite o arquivo .env.local
• Publishable key é pública (NEXT_PUBLIC_)
• Secret key deve ser privada (sem NEXT_PUBLIC_)
• Use keys diferentes para dev/staging/prod

Instalação e Setup

📦 Instalar🛡️ Middleware🔧 Provider📄 Páginas Auth

install

📦 Instalação do Pacote

🚀 Instalar @clerk/nextjs

typescript

# 📦 Instalar o pacote oficial do Clerk
npm install @clerk/nextjs

# ✅ Verificar instalação
npm list @clerk/nextjs

💡 Por que @clerk/nextjs?

• Otimizado: Especificamente para Next.js 13+ App Router
• Server Components: Funciona em componentes de servidor
• Middleware: Integração nativa com Next.js middleware
• TypeScript: Tipos incluídos automaticamente

middleware

🛡️ Configurar Middleware

O middleware intercepta todas as requests e aplica autenticação:

📄 Criar middleware.ts

middleware.ts

import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'

// 🎯 Definir rotas protegidas
const isProtectedRoute = createRouteMatcher([
  '/dashboard(.*)',
  '/profile(.*)',
  '/settings(.*)',
])

// 🛡️ Aplicar proteção apenas nas rotas necessárias
export default clerkMiddleware(async (auth, req) => {
  // 🔒 Proteger rotas específicas
  if (isProtectedRoute(req)) await auth.protect()
})

export const config = {
  matcher: [
    '/((?!_next|[^?]*\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    '/(api|trpc)(.*)',
  ],
}

⚠️ Comportamento Padrão

• Todas as rotas são públicas por padrão
• Middleware apenas injeta dados de auth
• Para proteger rotas, use auth protection
• Arquivo deve estar na raiz do projeto

provider

🔧 Configurar ClerkProvider

Envolva sua aplicação com o ClerkProvider no layout raiz:

🏗️ Atualizar app/layout.tsx

app/layout.tsx

import { ClerkProvider } from '@clerk/nextjs'
import { Inter } from 'next/font/google'
import './globals.css'

const inter = Inter({ subsets: ['latin'] })

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    // 🔐 ClerkProvider envolve toda a aplicação
    <ClerkProvider>
      <html lang="pt-BR">
        <body className={inter.className}>
          {children}
        </body>
      </html>
    </ClerkProvider>
  )
}

🎨 Adicionar Navegação com Auth

app/layout.tsx

import { ClerkProvider, SignInButton, SignUpButton, SignedIn, SignedOut, UserButton } from '@clerk/nextjs'

export default function RootLayout({ children }) {
  return (
    <ClerkProvider>
      <html lang="pt-BR">
        <body>
          {/* 🔝 Header com botões de autenticação */}
          <header className="border-b p-4">
            <div className="container mx-auto flex justify-between items-center">
              <h1 className="text-xl font-bold">Minha App</h1>
              
              <div className="flex gap-2">
                {/* 👤 Mostrar para usuários não logados */}
                <SignedOut>
                  <SignInButton mode="modal">
                    <button className="bg-blue-500 text-foreground px-4 py-2 rounded">
                      Entrar
                    </button>
                  </SignInButton>
                  <SignUpButton mode="modal">
                    <button className="bg-green-500 text-foreground px-4 py-2 rounded">
                      Cadastrar
                    </button>
                  </SignUpButton>
                </SignedOut>
                
                {/* ✅ Mostrar para usuários logados */}
                <SignedIn>
                  <UserButton afterSignOutUrl="/" />
                </SignedIn>
              </div>
            </div>
          </header>
          
          {children}
        </body>
      </html>
    </ClerkProvider>
  )
}

pages

📄 Criar Páginas de Autenticação

Crie páginas dedicadas para sign-in e sign-up:

🔑 Página de Login

app/sign-in/[[...sign-in]]/page.tsx

import { SignIn } from '@clerk/nextjs'

// 🔑 Página de login usando componente do Clerk
export default function SignInPage() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-bg-2">
      <SignIn 
        appearance={{
          elements: {
            formButtonPrimary: 'bg-blue-600 hover:bg-blue-700',
            card: 'shadow-xl'
          }
        }}
      />
    </div>
  )
}

📝 Página de Cadastro

app/sign-up/[[...sign-up]]/page.tsx

import { SignUp } from '@clerk/nextjs'

// 📝 Página de cadastro usando componente do Clerk
export default function SignUpPage() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-bg-2">
      <SignUp 
        appearance={{
          elements: {
            formButtonPrimary: 'bg-green-600 hover:bg-green-700',
            card: 'shadow-xl'
          }
        }} 
      />
    </div>
  )
}

🎨 Customização de Aparência

• appearance prop: Customize cores, fontes, espaçamentos
• CSS variables: Integre com Tailwind CSS
• redirectUrl: Para onde ir após autenticação
• Catch-all routes: [[...sign-in]] para máxima flexibilidade

Protegendo Rotas

Vamos criar uma página protegida que só usuários autenticados podem acessar:

🏠 Dashboard Protegido

app/dashboard/page.tsx

import { SignOutButton } from '@clerk/nextjs'
import { auth, currentUser } from '@clerk/nextjs/server'
import { redirect } from 'next/navigation'

// 🛡️ Página protegida - só usuários autenticados
export default async function DashboardPage() {
  // 🔍 Verificar se usuário está autenticado
  const { userId } = await auth()
  
  // 🚫 Redirecionar se não autenticado
  if (!userId) {
    redirect('/sign-in')
  }
  
  // 👤 Buscar dados do usuário atual
  const user = await currentUser()

  return (
    <div className="container mx-auto p-8">
      <div className="bg-white rounded-lg shadow-md p-6">
        <h1 className="text-2xl font-bold mb-4">
          🎉 Bem-vindo, {user?.firstName}!
        </h1>
        
        <div className="grid md:grid-cols-2 gap-6">
          <div>
            <h3 className="font-semibold mb-2">Informações do Perfil</h3>
            <p><strong>Nome:</strong> {user?.fullName}</p>
            <p><strong>Email:</strong> {user?.emailAddresses[0]?.emailAddress}</p>
            <p><strong>ID:</strong> {user?.id}</p>
          </div>
          
          <div>
            <h3 className="font-semibold mb-2">Última Atividade</h3>
            <p><strong>Último login:</strong> {user?.lastSignInAt?.toString()}</p>
            <p><strong>Cadastrado em:</strong> {user?.createdAt?.toString()}</p>
          </div>
          <SignOutButton/>
        </div>
      </div>
    </div>
  )
}

🛡️ Middleware com Proteção

middleware.ts

import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'

// 🎯 Definir rotas protegidas
const isProtectedRoute = createRouteMatcher([
  '/dashboard(.*)',
  '/profile(.*)',
  '/settings(.*)',
])

// 🛡️ Aplicar proteção apenas nas rotas necessárias
export default clerkMiddleware((auth, req) => {
  // 🔒 Proteger rotas específicas
  if (isProtectedRoute(req)) auth().protect()
})

export const config = {
  matcher: [
    '/((?!_next|[^?]*\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    '/(api|trpc)(.*)',
  ],
}

Testando a Integração

Agora vamos testar se tudo está funcionando corretamente:

🚀 Iniciar Aplicação

typescript

# 🚀 Rodar em modo desenvolvimento
npm run dev

# 🌐 Acessar no navegador:
# http://localhost:3000

✅ Checklist de Teste

• Página inicial: Botões "Entrar" e "Cadastrar" visíveis
• Sign-in: Modal/página de login aparece corretamente
• Sign-up: Processo de cadastro funciona
• Dashboard: Redireciona após login bem-sucedido
• UserButton: Menu do usuário funciona
• Logout: Limpa sessão e redireciona
• Proteção: Dashboard inacessível sem login

🐛 Debug e Logs

app/debug/page.tsx

// 🔍 Debug de autenticação
import { auth, currentUser } from '@clerk/nextjs/server'

export default async function DebugPage() {
  const { userId, sessionId } = await auth()
  const user = await currentUser()
  
  console.log('Auth Debug:', {
    userId,
    sessionId,
    user: user ? 'Authenticated' : 'Not authenticated'
  })
  
  return (
    <div className="p-8">
      <h1>Debug de Autenticação</h1>
      <pre className="bg-bg-2 p-4 rounded">
        {JSON.stringify({ userId, sessionId }, null, 2)}
      </pre>
    </div>
  )
}

Vantagens desta Implementação

🚀 Setup Ultra-Rápido:
Autenticação completa em 10 minutos vs semanas de desenvolvimento custom
🔒 Segurança Enterprise:
2FA, rate limiting e conformidade GDPR incluídos
🎨 UI Customizável:
Interface adapta-se perfeitamente ao seu design system

📱 Multi-Provider:
Google, GitHub, Discord, Apple e mais de 20 provedores
⚡ Performance:
Server Components otimizados e middleware eficiente
🔧 Manutenção Zero:
Updates de segurança e novos recursos automáticos

O que Você Conquistou

🎉 Parabéns! Você implementou um sistema de autenticação profissional que rivalize com as maiores empresas de tecnologia.

✅ Conta Clerk configurada com domínios e redirects
✅ Autenticação completa com login/cadastro/logout
✅ Proteção de rotas via middleware Next.js
✅ UI profissional com componentes customizáveis
✅ Multi-provider auth (Google, GitHub, etc.)
✅ Server Components com dados de usuário
✅ Base escalável para aplicações enterprise

Próxima aula