[Logto](https://logto.io/) é um provedor moderno de serviços de autenticação de identidade que oferece suporte seguro, abrangente e amigável para login em aplicações. Ele também fornece uma variedade de SDKs e guias de integração em vários frameworks e linguagens de programação, permitindo integrar serviços de autenticação empresarial em sua aplicação de forma rápida e eficiente. Este artigo foca principalmente em detalhar como integrar o Supabase com o Logto. ## Fundamentos do Supabase O Supabase utiliza a [Segurança em Nível de Linha do Postgres](https://www.postgresql.org/docs/current/ddl-rowsecurity.html) para controlar as permissões de acesso a dados. Em termos simples, ao criar políticas de Segurança em Nível de Linha para tabelas no banco de dados, podemos restringir e gerenciar quem pode ler, escrever e atualizar dados em uma tabela. Vamos supor que você tenha uma tabela chamada "posts" em seu banco de dados, com o seguinte conteúdo: Tabela de Posts

O campo `user_id` na tabela representa o usuário ao qual cada dado do post pertence. Você pode restringir cada usuário a acessar apenas seus próprios dados de post com base no campo `user_id`. No entanto, antes que isso possa ser implementado, o Supabase precisa ter a capacidade de identificar o usuário atual que está acessando o banco de dados. ### Adicionar dados do usuário às requisições do Supabase Graças ao suporte do Supabase para JWT, quando nossa aplicação interage com o Supabase, podemos gerar um JWT contendo dados do usuário usando o segredo JWT fornecido pelo Supabase. Usamos esse JWT como o cabeçalho de Autenticação ao fazer requisições. Ao receber a requisição, o Supabase verifica automaticamente a validade do JWT e permite o acesso aos dados contidos nele durante os processos subsequentes. Primeiramente, podemos obter o segredo JWT fornecido pelo Supabase em “Configurações do Projeto” no painel do Supabase: Página de Configurações da API do Supabase

Página de Configurações da API do Supabase

Depois, ao usar o SDK do Supabase para fazer requisições ao Supabase, utilizamos esse segredo para gerar nosso JWT e anexá-lo como o cabeçalho de Autenticação na requisição. (Observe que este processo ocorre no serviço de backend da sua aplicação, e o segredo JWT nunca deve ser exposto a terceiros). ```jsx import { createClient } from '@supabase/supabase-js'; import { sign } from 'jsonwebtoken'; / * Nota: * Você pode encontrar o SUPABASE_URL e o SUPABASE_ANON_KEY no mesmo lugar onde encontra o Segredo JWT. */ const SUPABASE_URL = process.env.SUPABASE_URL; const SUPABASE_ANON_KEY = process.env.SUPABASE_ANON_KEY; const SUPABASE_JWT_SECRET = process.env.SUPABASE_JWT_SECRET; export const getSupabaseClient = (userId) => { const jwtPayload = { userId, }; const jwt = sign(jwtPayload, SUPABASE_JWT_SECRET, { expiresIn: '1h', // Apenas para demonstração }); const client = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, { global: { headers: { Authorization: `Bearer ${jwt}`, }, }, }); return client; }; ``` Em seguida, navegue até o Editor SQL no painel do Supabase e crie uma função para recuperar o userId carregado na requisição: Criar função para obter o ID do usuário

O código usado na imagem é o seguinte: ```sql create or replace function auth.user_id() returns text as $$ select nullif(current_setting('request.jwt.claims', true)::json->>'userId', '')::text; $$ language sql stable; ``` Como mostra o código, no Supabase, você pode recuperar o payload do JWT que geramos chamando `request.jwt.claims`. O campo `userId` dentro do payload é o valor que configuramos. Com esta função, o Supabase pode determinar o usuário que está acessando o banco de dados no momento. ### Criar política de Segurança em Nível de Linha Em seguida, podemos criar uma política de Segurança em Nível de Linha para restringir cada usuário a acessar apenas seus próprios dados de post com base no campo `user_id` na tabela de posts. 1. Navegue até a página do Editor de Tabelas no painel do Supabase e selecione a tabela posts. 2. Clique em "Adicionar Política RLS" no topo da tabela. 3. Na janela solicitada, clique em "Criar política". 4. Insira um Nome de Política e escolha o comando SELECT Policy. 5. No bloco `using` do código abaixo, insira: ```sql auth.user_id() = user_id ``` Criar política RLS

Ao aproveitar políticas como essas, o controle de acesso a dados dentro do Supabase é alcançado. Em aplicações reais, você criaria várias políticas para restringir ações dos usuários como inserção e modificação de dados. No entanto, isso está além do escopo deste artigo. Para mais informações sobre Segurança em Nível de Linha (RLS), consulte [Proteja seus dados usando Segurança em Nível de Linha no Postgres](https://supabase.com/docs/guides/database/postgres/row-level-security). ### Processo básico de integração com Logto Como mencionado anteriormente, porque o Supabase utiliza RLS para seu controle de acesso, a chave para integrar com o Logto (ou qualquer outro serviço de autenticação) reside em obter o id do usuário autenticado e enviá-lo ao Supabase. Todo o processo é ilustrado no diagrama abaixo: ```mermaid sequenceDiagram Participant U as Usuário final Participant Logto Participant B as Serviço de backend da App Participant Supabase U->>Logto: Entrar com Logto Logto-->>U: `access_token` U->>B: Solicitar dados com `access_token` B->>B: Recuperar `user_id` do `access_token` B->>B: Gerar jwt com `user_id` & `Segredo JWT do Supabase` B->>Supabase: Solicitar dados com jwt Supabase-->>B: Dados respondidos B-->>U: Dados respondidos ``` A seguir, explicaremos como integrar o Logto com o Supabase com base neste diagrama de processos. ## Integração com Logto O Logto oferece guias de integração para vários frameworks e linguagens de programação. Geralmente, aplicativos construídos com esses frameworks e linguagens se enquadram em categorias como aplicativos Nativos, SPA (aplicativos de página única), aplicativos web tradicionais e aplicativos M2M (máquina a máquina). Você pode visitar a página [Inícios rápidos do Logto](https://docs.logto.io/quick-starts/) para integrar o Logto em sua aplicação com base na stack de tecnologia que você está utilizando. Depois disso, siga as instruções abaixo para integrar o Logto em seu projeto com base no tipo de aplicação. ### Aplicativo nativo ou SPA Tanto os aplicativos nativos quanto os SPAs são executados em seu dispositivo, e as credenciais (token de acesso) obtidas após o login são armazenadas localmente em seu dispositivo. Portanto, ao integrar seu aplicativo com o Supabase, você precisa interagir com o Supabase por meio de seu serviço de backend, pois você não pode expor informações sensíveis (como o segredo JWT do Supabase) no dispositivo de cada usuário. Vamos supor que você esteja construindo seu SPA usando React e Express. Você integrou com sucesso o Logto em sua aplicação seguindo o [Guia do SDK React do Logto](https://docs.logto.io/quick-starts/react/) (você pode consultar o código em nosso [exemplo de react](https://github.com/logto-io/js/tree/master/packages/react-sample)). Além disso, você adicionou a validação de token de acesso do Logto ao seu servidor backend de acordo com a documentação [Proteja sua API no Node (Express)](https://docs.logto.io/docs/recipes/protect-your-api/node/). Em seguida, você usará o token de acesso obtido do Logto para solicitar dados do usuário ao seu servidor backend: ```jsx import { useLogto } from '@logto/react'; import { useState, useEffect } from 'react'; import PostList from './PostList'; const endpoint = 'https://www.meusite.com/api/posts'; const resource = 'https://www.meusite.com/api'; function PostPage() { const { isAuthenticated, getAccessToken } = useLogto(); const [posts, setPosts] = useState(); useEffect(() => { const fetchPosts = async () => { const response = await fetch(endpoint, { headers: { Authorization: `Bearer ${await getAccessToken(resource)}`, }, }); setPosts(response.json()); }; if (isAuthenticated) { void fetchPosts(); } }, [isAuthenticated, getAccessToken]); return ; } export default PostPage; ``` Em seu servidor backend, você já extraiu o id do usuário logado a partir do token de acesso usando middleware: ```jsx // auth-middleware.ts import { createRemoteJWKSet, jwtVerify } from 'jose'; //... export const verifyAuthFromRequest = async (ctx, next) => { // Extrair o token const token = extractBearerTokenFromHeaders(ctx.request.headers); const { payload } = await jwtVerify( token, // O token Bearer bruto extraído do cabeçalho da requisição createRemoteJWKSet(new URL('https:///oidc/jwks')), // gerar um jwks usando jwks_uri consultado do servidor Logto { // emissor esperado do token, deve ser emitido pelo servidor Logto issuer: 'https:///oidc', // audiência esperada do token, deve ser o indicador de recurso do API atual audience: '', } ); // se você estiver usando RBAC assert(payload.scope.includes('some_scope')); // lógica personalizada de payload ctx.auth = { userId: payload.sub, }; return next(); }; ``` Agora, você pode usar o `getSupabaseClient` descrito acima para anexar o `userId` ao JWT usado nas requisições subsequentes ao Supabase. Alternativamente, você pode criar um middleware para criar um cliente do Supabase para requisições que precisem interagir com o Supabase: ```jsx export const withSupabaseClient = async (ctx, next) => { ctx.supabase = getSupabaseClient(ctx.auth.userId); return next(); }; ``` No fluxo de processamento subsequente, você pode chamar diretamente `ctx.supabase` para interagir com o Supabase: ```jsx const fetchPosts = async (ctx) => { cosnt { data } = await ctx.supabase.from('posts').select('*'); return data; } ``` Neste código, o Supabase retornará apenas os dados de post pertencentes ao usuário atual com base nas políticas anteriormente configuradas. ### Aplicativo web tradicional A principal diferença entre um aplicativo web tradicional e um aplicativo Nativo ou SPA é que um aplicativo web tradicional renderiza e atualiza as páginas exclusivamente no servidor web. Portanto, as credenciais dos usuários são gerenciadas diretamente pelo servidor web, enquanto, nos aplicativos Nativos e SPAs, elas residem no dispositivo do usuário. Ao integrar o Logto num aplicativo web tradicional no Supabase, você pode recuperar diretamente o id do usuário logado a partir do backend. Tomando um projeto Next.js como exemplo, após integrar o Logto em seu projeto seguindo o [Guia do SDK Next.js](https://docs.logto.io/quick-starts/next-app-router/), você pode usar o SDK do Logto para recuperar as informações do usuário e construir o JWT correspondente para interagir com o Supabase. ```jsx import { getLogtoContext } from '@logto/next-server-actions'; import { logtoConfig } from '@/logto'; import { getSupabaseClient } from '@/utils'; import PostList from './PostList'; export default async function PostPage() { const { cliams } = await getLogtoContext(logtoConfig); // O valor de `sub` em `cliams` é o id do usuário. const supabase = getSupabaseClient(cliams.sub); const { data: posts } = await supabase.from('posts').select('*'); return ; } ``` ### Aplicativo máquina a máquina Máquina a máquina (M2M) é frequentemente usada quando seu aplicativo precisa se comunicar diretamente com servidores de recursos, como um serviço estático que busca posts diários, etc. Você pode usar o [Máquina a máquina: Autenticação com Logto](https://docs.logto.io/quick-starts/m2m/) guia para autenticação de aplicativo máquina a máquina. A integração entre Supabase e aplicativos M2M é semelhante à dos aplicativos Nativos e SPAs (conforme descrito na seção "Aplicativo nativo ou aplicativo de página única"). Ela envolve obter um token de acesso do Logto e, em seguida, validá-lo por meio de uma API backend protegida. No entanto, é importante notar que aplicativos Nativos e SPAs são geralmente projetados para usuários finais, então o id do usuário obtido representa o próprio usuário. No entanto, o token de acesso para aplicativos máquina a máquina representa o próprio aplicativo, e o campo `sub` no payload do token de acesso é o id do cliente do aplicativo M2M, não um usuário específico. Portanto, durante o desenvolvimento, é crucial distinguir quais dados são destinados aos aplicativos M2M. Além disso, se você quiser que um aplicativo M2M específico acesse o Supabase em nome de todo o serviço para contornar as restrições RLS, você pode usar o segredo `service_role` do Supabase para criar um cliente do Supabase. Isso é útil quando você quer realizar algumas tarefas administrativas ou automatizadas que requerem acesso a todos os dados sem serem restringidos pelas políticas de Segurança em Nível de Linha configuradas para usuários individuais. O segredo `service_role` pode ser encontrado na mesma página que o segredo JWT: Segredo da função de serviço

Ao criar um cliente do Supabase, use o segredo `service_role`, então este cliente poderá acessar todos os dados no banco de dados: ```jsx import { createClient } from '@supabase/supabase-js'; // ... const SUPABASE_SERVICE_ROLE_SCRET = process.env.SUPABASE_SERVICE_ROLE_SCRET; const client = createClient(SUPABASE_URL, SUPABASE_SERVICE_ROLE_SCRET, { // ...opções }); ``` ## Resumo Neste artigo, exploramos a integração do Logto com o Supabase, destacando insights importantes e aspectos críticos de integração. Exploramos conceitos como autenticação JWT e políticas de Segurança em Nível de Linha, guiando você através do processo de incorporar perfeitamente o Logto em suas aplicações com Supabase. Com este conhecimento, esperamos que você possa aprimorar a segurança e a funcionalidade de suas aplicações com confiança, e até mesmo estender seus projetos com recursos adicionais.