Pular para o conteúdo
💎 QUICKSTART

Vue 3 + Vite + SuperDB.

Composable useSuperdb, Composition API e router guard — auth integrado de forma idiomática ao Vue.

A abordagem Vue — composables

Vue 3 usa a Composition API e o padrão de composables — funções reutilizáveis que encapsulam estado reativo. É a forma idiomática de integrar serviços externos no Vue.

Neste guia você cria um composable useSuperdb que pode ser importado em qualquer componente. A session fica em localStorage (padrão para SPAs), com reatividade automática via ref().

Passo a passo

1Criar o projeto

Use o template Vue com TypeScript do Vite. A opção --template vue-ts já configura TypeScript, Vite e Vue DevTools.

terminal
npm create vite@latest meu-app -- --template vue-ts
cd meu-app
npm install

2Instalar SDK e Vue Router

Instale o SDK do SuperDB e o Vue Router (para proteção de rotas no passo 6).

terminal
npm install @superdb/auth-js vue-router@4

3Variáveis de ambiente

No Vite (incluindo projetos Vue), as variáveis expostas ao browser precisam do prefixo VITE_.

.env.local
VITE_SUPERDB_URL=https://auth.superdb.com.br
VITE_SUPERDB_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

4Composable useSuperdb

Crie o composable em src/composables/useSuperdb.ts. O cliente SuperDB é instanciado uma vez (fora da função) e compartilhado entre todas as chamadas ao composable.

O user é um ref reativo — qualquer componente que o use atualiza automaticamente quando o estado muda.

src/composables/useSuperdb.ts
import { ref, onMounted, onUnmounted } from 'vue'
import { createClient } from '@superdb/auth-js'
import type { User } from '@superdb/auth-js'

// Cliente singleton — criado uma vez, compartilhado por todo o app
const superdb = createClient(
  import.meta.env.VITE_SUPERDB_URL,
  import.meta.env.VITE_SUPERDB_ANON_KEY
)

export function useSuperdb() {
  const user = ref<User | null>(null)
  const loading = ref(true)
  let subscription: { unsubscribe: () => void } | null = null

  onMounted(async () => {
    // Carregar sessão atual
    const { data } = await superdb.auth.getUser()
    user.value = data.user
    loading.value = false

    // Escutar mudanças de sessão
    const { data: { subscription: sub } } = superdb.auth.onAuthStateChange(
      (_event, session) => {
        user.value = session?.user ?? null
      }
    )
    subscription = sub
  })

  onUnmounted(() => {
    subscription?.unsubscribe()
  })

  async function signIn(email: string, password: string) {
    const { error } = await superdb.auth.signInWithPassword({ email, password })
    if (error) throw error
  }

  async function signUp(email: string, password: string) {
    const { error } = await superdb.auth.signUp({ email, password })
    if (error) throw error
  }

  async function signOut() {
    await superdb.auth.signOut()
    user.value = null
  }

  return { user, loading, signIn, signUp, signOut, superdb }
}

5Usar em componente Vue

Chame o composable dentro de <script setup>. O template reage automaticamente às mudanças em user e loading.

src/components/AuthStatus.vue
<script setup lang="ts">
import { ref } from 'vue'
import { useSuperdb } from '@/composables/useSuperdb'

const { user, loading, signIn, signOut } = useSuperdb()
const email = ref('')
const password = ref('')
const error = ref('')

async function handleSignIn() {
  try {
    await signIn(email.value, password.value)
  } catch (e: any) {
    error.value = e.message
  }
}
</script>

<template>
  <div v-if="loading">Carregando...</div>

  <div v-else-if="user">
    <p>Olá, {{ user.email }}</p>
    <button @click="signOut">Sair</button>
  </div>

  <form v-else @submit.prevent="handleSignIn">
    <input v-model="email" type="email" placeholder="Email" required />
    <input v-model="password" type="password" placeholder="Senha" required />
    <p v-if="error" style="color: red">{{ error }}</p>
    <button type="submit">Entrar</button>
  </form>
</template>

6Router guard (proteção de rotas)

Configure o Vue Router com um navigation guard global. Ele verifica a sessão antes de cada navegação e redireciona usuários não autenticados.

src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import { createClient } from '@superdb/auth-js'

const superdb = createClient(
  import.meta.env.VITE_SUPERDB_URL,
  import.meta.env.VITE_SUPERDB_ANON_KEY
)

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: () => import('../pages/Home.vue') },
    { path: '/login', component: () => import('../pages/Login.vue') },
    {
      path: '/dashboard',
      component: () => import('../pages/Dashboard.vue'),
      meta: { requiresAuth: true }
    }
  ]
})

router.beforeEach(async (to) => {
  if (to.meta.requiresAuth) {
    const { data: { user } } = await superdb.auth.getUser()
    if (!user) return { name: 'Login', query: { redirect: to.fullPath } }
  }
})

export default router

7Rodar o app

Inicie o servidor de desenvolvimento. O Vue DevTools no browser facilita inspecionar o estado reativo dos composables.

terminal
npm run dev
# → http://localhost:5173

Próximos passos

Essa página ajudou?