Pular para o conteúdo

Autenticação

Autenticação e autorização são dois processos de segurança que te ajudam a controlar quem possui acesso a diferentes parte do seu website ou aplicativo. Autenticação é o processo de verificar a identidade de um visitante, e autorização é o processo de permitir aos visitantes acesso a recursos e rotas protegidas.

Autenticação te permite customizar áreas do seu site para indivíduos logados e fornece proteção máxima a informações pessoais ou privadas. Bibliotecas de autenticação (e.x. Lucia Auth, Auth.js) fornecem utilidades para múltiplos métodos de autenticação como acesso por email e provedores OAuth.

Veja como adicionar autenticação com Supabase ou adicionar autenticação com Firebase em nossos guias dedicados a esses serviços backend.

Lucia

Seção intitulada Lucia

Lucia é uma biblioteca de autenticação baseada em sessões que não depende de frameworks com grande suporte para o Astro.

Instalação

Seção intitulada Instalação

Instale Lucia utilizando o gerenciador de pacotes da sua escolha.

Terminal window
npm install lucia

Configuração

Seção intitulada Configuração

Use o guia “Começando com Astro” da Lucia para inicializar a Lucia com um adaptador e implementar um banco de dados para armazenar usuários e sessões.

Utilização

Seção intitulada Utilização

Próximos passos

Seção intitulada Próximos passos

Auth.js

Seção intitulada Auth.js

Auth.js é uma solução para autenticação que independe de frameworks. Um adaptador do framework, feito pela comunidade, auth-astro está disponível para o Astro.

Instalação

Seção intitulada Instalação

Use o comando astro add do seu gerenciador de pacotes preferido para adicionar a integração astro-auth.

Terminal window
npx astro add auth-astro

Instalação manual

Seção intitulada Instalação manual

Para instalar astro-auth manualmente, instale o pacote necessário para seu gerenciador de pacotes:

Terminal window
npm install auth-astro

Então, adicione a integração no seu arquivo astro.config.* usando a propriedade integrations:

astro.config.mjs
import { defineConfig } from 'astro/config';
import auth from 'auth-astro';


export default defineConfig({
  // ...
  integrations: [auth()],
});

Configuração

Seção intitulada Configuração

Crie um arquivo auth.config.mjs no diretório raiz do projeto. Adicione qualquer provedor auth ou métodos que você deseja dar suporte, junto de qualquer variável de ambiente que eles requerem.

auth.config.mjs
import GitHub from '@auth/core/providers/github';
import { defineConfig } from 'auth-astro';


export default defineConfig({
  providers: [
    GitHub({
      clientId: import.meta.env.GITHUB_CLIENT_ID,
      clientSecret: import.meta.env.GITHUB_CLIENT_SECRET,
    }),
  ],
});

Crie um arquivo .env na raiz do seu projeto caso não exista. Adicione as duas variáveis de ambiente a seguir. AUTH_SECRET deve ser uma private string com um mínimo de 32 caracteres.

.env
AUTH_TRUST_HOST=true
AUTH_SECRET=<my-auth-secret>

Utilização

Seção intitulada Utilização

Você pode adicionar botões de login e logout utilizando o módulo auth-astro/client em uma tag de script ou componente de framework client-side.

src/pages/index.astro
---
import Layout from 'src/layouts/Base.astro';
---
<Layout>
  <button id="login">Login</button>
  <button id="logout">Logout</button>


  <script>
    const { signIn, signOut } = await import("auth-astro/client")
    document.querySelector("#login").onclick = () => signIn("github")
    document.querySelector("#logout").onclick = () => signOut()
  </script>
</Layout>

Você pode buscar a sessão do usuário utilizando o método getSession.

src/pages/index.astro
---
import Layout from 'src/layouts/Base.astro';
import { getSession } from 'auth-astro/server';


const session = await getSession(Astro.request);
---
<Layout>
  {
    session ? (
      <p>Bem-vindo {session.user?.name}</p>
    ) : (
      <p>Não realizou o login</p>
    )
  }
</Layout>

Próximos passos

Seção intitulada Próximos passos