O que clerk-nuxt-patterns faz?
Padrões de autenticação para Nuxt 3 com @clerk/nuxt - middleware, composables, rotas de API do servidor, SSR. Acionado por: Nuxt auth, composable useAuth, clerkMiddleware Nuxt, server API Clerk, proteção de rotas Nuxt.
Instalação
npm install @clerk/nuxt
Configuração
- Adicione ao
nuxt.config.ts:
export default defineNuxtConfig({
modules: ['@clerk/nuxt'],
})
- Defina as variáveis de ambiente no arquivo
.env:
NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_publishable_key
CLERK_SECRET_KEY=your_secret_key
- Crie o middleware global para proteger rotas em
middleware/auth.global.ts:
export default defineNuxtRouteMiddleware((to, from) => {
const { isSignedIn } = useAuth()
if (!isSignedIn.value && to.path !== '/sign-in') {
return navigateTo('/sign-in')
}
})
Uso
Composable useAuth e useUser
<template>
<div>
<p v-if="isSignedIn">Bem-vindo, {{ user?.firstName }}!</p>
<p v-else>Você não está autenticado.</p>
</div>
</template>
<script setup lang="ts">
const { isSignedIn } = useAuth()
const { user } = useUser()
</script>
Rotas de API do Servidor
Crie em server/api/protected.ts:
export default defineEventHandler(async (event) => {
const { auth } = event.context
if (!auth.userId) {
throw createError({ statusCode: 401, message: 'Não autorizado' })
}
return {
message: `Dados protegidos para o usuário ${auth.userId}`
}
})
Usando clerkMiddleware para proteção avançada
Em middleware/auth.ts:
export default clerkMiddleware((auth, req) => {
if (!auth.userId && req.url !== '/sign-in') {
return Response.redirect(new URL('/sign-in', req.url))
}
})
Notas
- Certifique-se de que as chaves do Clerk estejam configuradas corretamente.
- O middleware pode ser aplicado globalmente ou por rota.
- Para SSR, o Clerk lida automaticamente com a troca de tokens.