Outros Frameworks | SuperDB Docs

O princípio universal

O SDK @superdb/auth-js segue um padrão consistente independente do framework:

Client-side (browser/SPA): use createClient ou createBrowserClient — session em localStorage ou cookies gerenciados pelo SDK
Server-side (SSR/SSG): use createServerClient passando os cookies da requisição — session lida do cookie httpOnly sem expor ao JS
Middleware/Edge: intercepte requisições, valide o cookie, injete o usuário no contexto

Tabela comparativa

Framework	Session storage	Client init	Server init
Next.js	Cookie (httpOnly)	`createBrowserClient`	`createServerClient`
React/Vite SPA	localStorage	`createClient`	N/A
Vue/Vite SPA	localStorage	`createClient`	N/A
Expo	SecureStore	`createClient` + adapter	N/A
Astro	Cookie	`createBrowserClient` (island)	`createServerClient` (SSR)
Nuxt 3	Cookie	`createClient` (plugin)	via plugin/composable
SvelteKit	Cookie	`createBrowserClient`	`createServerClient`
Solid Start	Cookie	`createBrowserClient`	`createServerClient`

Astro

Astro usa o modelo de islands: a página é estática/SSR, mas partes interativas são "ilhas" client-side. Use createServerClient no middleware e createBrowserClient nas ilhas com client:only.

src/middleware.ts (Astro)

import { defineMiddleware } from 'astro:middleware'
import { createServerClient } from '@superdb/auth-js/astro'

export const onRequest = defineMiddleware(async (context, next) => {
  const superdb = createServerClient(
    import.meta.env.PUBLIC_SUPERDB_URL,
    import.meta.env.PUBLIC_SUPERDB_ANON_KEY,
    { cookies: context.cookies }
  )

  const { data: { user } } = await superdb.auth.getUser()
  context.locals.user = user

  if (!user && context.url.pathname.startsWith('/dashboard')) {
    return context.redirect('/login')
  }

  return next()
})

src/components/LoginForm.tsx (island client:only)

// Este componente é renderizado apenas no browser
import { createBrowserClient } from '@superdb/auth-js/astro'

const superdb = createBrowserClient(
  import.meta.env.PUBLIC_SUPERDB_URL,
  import.meta.env.PUBLIC_SUPERDB_ANON_KEY
)

export default function LoginForm() {
  async function handleLogin(e: Event) {
    e.preventDefault()
    const form = e.target as HTMLFormElement
    const email = (form.elements.namedItem('email') as HTMLInputElement).value
    const password = (form.elements.namedItem('password') as HTMLInputElement).value
    const { error } = await superdb.auth.signInWithPassword({ email, password })
    if (!error) window.location.href = '/dashboard'
  }
  return (
    <form onSubmit={handleLogin}>
      <input name="email" type="email" required />
      <input name="password" type="password" required />
      <button type="submit">Entrar</button>
    </form>
  )
}

Nuxt 3

No Nuxt 3, crie um plugin que inicializa o cliente uma vez e disponibiliza via useNuxtApp(). Em server routes, leia os cookies via parseCookies.

plugins/superdb.client.ts

import { createClient } from '@superdb/auth-js'

export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig()
  const superdb = createClient(
    config.public.superdbUrl,
    config.public.superdbAnonKey
  )

  return {
    provide: { superdb }
  }
})

composables/useAuth.ts (Nuxt)

export function useAuth() {
  const { $superdb } = useNuxtApp()
  const user = useState('user', () => null)

  async function fetchUser() {
    const { data } = await $superdb.auth.getUser()
    user.value = data.user
  }

  async function signIn(email: string, password: string) {
    const { error } = await $superdb.auth.signInWithPassword({ email, password })
    if (error) throw error
    await fetchUser()
    navigateTo('/dashboard')
  }

  async function signOut() {
    await $superdb.auth.signOut()
    user.value = null
    navigateTo('/login')
  }

  return { user, fetchUser, signIn, signOut }
}

SvelteKit

No SvelteKit, use +hooks.server.ts para gerenciar a sessão no servidor. Em +page.server.ts, acesse o usuário via event.locals.

src/hooks.server.ts

import type { Handle } from '@sveltejs/kit'
import { createServerClient } from '@superdb/auth-js/sveltekit'
import { PUBLIC_SUPERDB_URL, PUBLIC_SUPERDB_ANON_KEY } from '$env/static/public'

export const handle: Handle = async ({ event, resolve }) => {
  event.locals.superdb = createServerClient(
    PUBLIC_SUPERDB_URL,
    PUBLIC_SUPERDB_ANON_KEY,
    { cookies: { get: (key) => event.cookies.get(key),
                 set: (key, value, opts) => event.cookies.set(key, value, opts) } }
  )

  const { data: { user } } = await event.locals.superdb.auth.getUser()
  event.locals.user = user

  return resolve(event)
}

src/routes/dashboard/+page.server.ts

import { redirect } from '@sveltejs/kit'
import type { PageServerLoad } from './$types'

const ANON_KEY = import.meta.env.PUBLIC_SUPERDB_ANON_KEY

export const load: PageServerLoad = async ({ locals }) => {
  if (!locals.user) throw redirect(303, '/login')

  // Dados via fetch direto — api.superdb.com.br (sem /rest/v1/)
  const res = await fetch(
    'https://api.superdb.com.br/posts?select=id,title,created_at&order=created_at.desc&limit=10',
    { headers: { 'Authorization': `Bearer ${ANON_KEY}`, 'apikey': ANON_KEY } }
  )
  const posts = await res.json()

  return { user: locals.user, posts }
}

ℹ️

Dados via HTTP direto. @superdb/auth-js é apenas auth — não tem .from(). O endpoint PostgREST é https://api.superdb.com.br/<tabela> (sem prefixo /rest/v1/). Para queries tipadas, use @supabase/supabase-js apontando para api.superdb.com.br.

Solid Start

Solid Start usa server functions para código server-side. Use createServerClient dentro de server actions e createBrowserClient em componentes client.

src/lib/auth.ts (Solid Start)

import { createClient } from '@superdb/auth-js'

// Client-side
export const superdb = createClient(
  import.meta.env.VITE_SUPERDB_URL,
  import.meta.env.VITE_SUPERDB_ANON_KEY
)

// Server action — proteger rota
export const getUser = cache(async () => {
  "use server"
  const event = getRequestEvent()
  const token = getCookie(event, 'superdb-token')
  if (!token) return null
  const { data: { user } } = await superdb.auth.getUser()
  return user
}, 'user')

Qwik City

No Qwik City, use routeLoader$ para carregar a session no servidor antes de renderizar.

src/routes/dashboard/index.tsx (Qwik)

import { component$ } from '@builder.io/qwik'
import { routeLoader$, routeAction$, redirect } from '@builder.io/qwik-city'
import { createServerClient } from '@superdb/auth-js'

export const useUser = routeLoader$(async (requestEv) => {
  const superdb = createServerClient(
    requestEv.env.get('PUBLIC_SUPERDB_URL')!,
    requestEv.env.get('PUBLIC_SUPERDB_ANON_KEY')!,
    { cookies: requestEv.cookie }
  )
  const { data: { user } } = await superdb.auth.getUser()
  if (!user) throw redirect(302, '/login')
  return user
})

export default component$(() => {
  const user = useUser()
  return <div>Olá, {user.value.email}</div>
})

Não achou seu framework?

O padrão geral é sempre o mesmo: inicialize o cliente com as credenciais do projeto, chame auth.signInWithPassword() ou auth.signUp(), e armazene a session conforme o que o framework suporta (cookie httpOnly para SSR, localStorage para SPA).

Se ainda tiver dúvidas ou quiser ver um exemplo específico:

Vote no próximo quickstart oficial →

Essa página ajudou?

← Anterior

Quickstart Expo

Flutter