Autenticação

A autenticação e a autorização são dois processos de segurança que gerenciam o acesso ao seu site ou aplicativo. A autenticação verifica a identidade de um visitante, enquanto a autorização concede acesso a áreas e recursos protegidos.

A autenticação permite que você personalize as áreas do seu site para indivíduos logados e oferece a maior proteção para informações pessoais ou privadas. Bibliotecas de autenticação (por exemplo, Lucia Auth e Auth.js) fornecem utilitários para vários métodos de autenticação, como login por e-mail e provedores OAuth.

Dica

Não existe solução oficial para autenticação no Astro, mas você pode encontrar integrações “auth” da comunidade no diretório de integrações.

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ão, independente de framework, com ótimo suporte ao Astro.

Instalação

Seção intitulada Instalação

Instale Lucia utilizando o gerenciador de pacotes de sua preferência.

npm

npm install lucia

pnpm

pnpm add lucia

Yarn

yarn add 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

Dica

Siga um dos tutoriais completos do Astro de Lucia para adicionar autenticação do nome de usuário e senha ou GitHub OAuth para o seu projeto Astro.

Próximos passos

Seção intitulada Próximos passos

• Exemplo Astro + projeto Lucia OAuth
• Exemplo Astro + projeto Lucia com nome de usuário e senha

Auth.js

Seção intitulada Auth.js

O Auth.js é uma solução independente de framework para autenticação. 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 auth-astro.

npm

npx astro add auth-astro

pnpm

pnpm astro add auth-astro

Yarn

yarn astro add auth-astro

Instalação manual

Seção intitulada Instalação manual

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

npm

npm install auth-astro @auth/core@^0.18.6

pnpm

pnpm add auth-astro @auth/core@^0.18.6

Yarn

yarn add auth-astro @auth/core@^0.18.6

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=<meu-segredo-auth>

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

• auth-astro no GitHub
• Documentação do Auth.js

Recursos da comunidade

Seção intitulada Recursos da comunidade

• Uso do Microsoft Entra Id EasyAuth com o Astro e o Azure Static Web App