@tabl.io/auth

Autenticação e autorização compartilhada para os apps Tabl com login real (Manager, Cashier).

Instalação

npm install @tabl.io/auth

O pacote tem @supabase/supabase-js e react como peerDependencies — devem estar instalados no app consumidor.

Setup

1. Criar o cliente Supabase (src/api/supabase.ts)

import { createTablaClient } from '@tabl.io/auth'

export const supabase = createTablaClient({
  url: import.meta.env.VITE_TABL_SERVER_URL,
  anonKey: import.meta.env.VITE_TABL_SERVER_ANON_KEY,
})

2. Inicializar no boot do app (src/App.tsx)

import { useEffect } from 'react'
import { useAuthStore, LoginPage } from '@tabl.io/auth'
import { supabase } from './api/supabase'

export default function App() {
  const { init, isInitializing, isAuthenticated } = useAuthStore()

  useEffect(() => {
    const unsubscribe = init(supabase)
    return unsubscribe        // cleanup do listener ao desmontar
  }, [])

  if (isInitializing) return <Loading />

  if (!isAuthenticated) {
    return (
      <div data-module="manager">   {/* ativa tema de cor do módulo */}
        <LoginPage supabase={supabase} moduleName="Manager" />
      </div>
    )
  }

  return (
    <div data-module="manager">
      <RouterProvider router={router} />
    </div>
  )
}

Para o Cashier, substituir data-module="manager" por data-module="cashier" e moduleName="Caixa".

Proteger rotas

Via hook — redireciona se não autorizado

import { useRequireRole } from '@tabl.io/auth'

export function SettingsPage() {
  const navigate = useNavigate()
  useRequireRole('manager', () => navigate('/'))
  // ...
}

Via componente — oculta elemento de UI

import { RoleGuard } from '@tabl.io/auth'

<RoleGuard role="manager">
  <DeleteButton />
</RoleGuard>

Verificar permissão em código

import { useAuth } from '@tabl.io/auth'

const { user, role, can } = useAuth()

can('manager')    // true se role >= manager
can('cashier')    // true se role >= cashier
can('supervisor') // true para qualquer role autenticado

Criar usuários com role

Via Supabase Dashboard ou edge function administrativa. O campo role deve ficar em app_metadata — nunca em user_metadata (editável pelo próprio usuário).

await supabase.auth.admin.createUser({
  email: '[email protected]',
  password: 'senha-segura',
  email_confirm: true,
  app_metadata: { role: 'manager' }, // 'manager' | 'cashier' | 'supervisor'
})

Hierarquia de roles

| Role | Acesso | |--------------|-------------------------------------| | manager | Total — gestão, caixa, supervisão | | cashier | Operação de caixa | | supervisor | Visualização e aprovações |

hasRole('manager', 'cashier') → true (manager pode tudo que cashier pode)

Tokens de cor por módulo (@tabl.io/ui)

Adicionar cashier-token.patch.css em @tabl.io/ui/src/foundation/tokens.css:

| data-module | Cor | App | |---------------|---------|------------| | pdv | Laranja | PDV | | kds | Azul | KDS | | manager | Roxo | Manager | | cashier | Teal | Cashier |