Аутентификация

Аутентификация и авторизация — это два процесса безопасности, управляющие доступом к вашему сайту или приложению. Аутентификация подтверждает личность посетителя, а авторизация предоставляет доступ к защищенным разделам и ресурсам.

Аутентификация позволяет персонализировать части сайта для вошедших пользователей и защищать личную информацию. Библиотеки аутентификации (например, Better Auth, Clerk) предоставляют инструменты для различных методов входа: через email, социальные сети (OAuth) и другие.

Узнайте, как добавить аутентификацию с помощью Supabase (EN) или Firebase (EN) в наших специальных руководствах.

Better Auth

Better Auth — это независимый от фреймворка инструмент для аутентификации (и авторизации) на TypeScript. Он предлагает богатый набор функций «из коробки» и экосистему плагинов для расширенной функциональности.

Он поддерживает Astro официально и может быть легко интегрирован в ваш проект.

Установка

npm install better-auth

pnpm add better-auth

yarn add better-auth

Настройка

Настройте таблицы базы данных для хранения данных пользователей и выберите методы входа, как описано в руководстве по установке Better Auth. Затем вам нужно будет создать обработчик (handler) в вашем проекте Astro.

import { auth } from "../../../lib/auth"; // импорт вашего экземпляра Better Auth
import type { APIRoute } from "astro";

export const prerender = false; // Обязательно для работы в режиме сервера

export const ALL: APIRoute = async (ctx) => {
  return auth.handler(ctx.request);
};

Подробности ищите в руководстве по Better Auth для Astro.

Clerk

Clerk — это комплексная платформа, предоставляющая готовые интерфейсы (UI), гибкие API и панели управления для управления пользователями. Для Astro доступен официальный SDK @clerk/astro.

Использование

Clerk предоставляет компоненты, которые позволяют управлять видимостью страниц в зависимости от состояния аутентификации. Покажите гостям кнопку входа, а авторизованным пользователям — их профиль:

---
import Layout from 'src/layouts/Base.astro';
import { SignedIn, SignedOut, UserButton, SignInButton } from '@clerk/astro/components';

export const prerender = false;
---

<Layout>
    <SignedIn>
        <UserButton />
    </SignedIn>
    <SignedOut>
        <SignInButton />
    </SignedOut>
</Layout>

Также вы можете защищать маршруты на уровне сервера с помощью мидлвара.

Lucia

Lucia — это популярный ресурс для реализации аутентификации на основе сессий. Хотя проект перешел в режим поддержки, его руководства по-прежнему являются отличным источником знаний о том, как устроена аутентификация «под капотом».

Руководства

Создайте базовый API сессий с выбранной базой данных.
Добавьте куки сессий, используя эндпойнты и мидлвар.
Реализуйте GitHub OAuth.