認証

認証と認可は、ウェブサイトやアプリへのアクセスを管理する2つのセキュリティプロセスです。認証は訪問者のアイデンティティを検証し、認可は保護された領域やリソースへのアクセスを許可します。

認証を利用することで、ログインした個人に合わせてサイトの領域をカスタマイズしたり、個人情報やプライベートな情報を最大限に保護できるようになります。認証ライブラリ（例: Lucia Auth、Auth.js）は、電子メールサインインやOAuthプロバイダーなどの複数の認証方法のためのユーティリティを提供します。

Supabaseを利用して認証を追加する方法や、Firebaseを利用して認証を追加する方法については、これらのバックエンドサービス向けの専用ガイドを参照してください。

Lucia

Luciaは、フレームワークに依存しないセッションベースの認証ライブラリで、Astroをよくサポートしています。

インストール

好きなパッケージマネージャでLuciaをインストールします。

npm install lucia

pnpm add lucia

yarn add lucia

設定

Luciaの”Getting started in Astro”ガイドを使用し、Luciaをアダプタとともに初期化して、ユーザーとセッションを保存するデータベースをセットアップします。

使い方

次のステップ

Auth.js

Auth.jsは、フレームワークに依存しない認証ソリューションです。Astro用のコミュニティによるフレームワークアダプタauth-astroが利用できます。

インストール

好きなパッケージマネージャで、astro addコマンドを使ってauth-astroを追加します。

npx astro add auth-astro

pnpm astro add auth-astro

yarn astro add auth-astro

手動インストール

auth-astroを手動でインストールするには、パッケージマネージャで必要なパッケージをインストールします。

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

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

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

その後、astro.config.*ファイルのintegrationsプロパティを用いてインテグレーションを反映させます。

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

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

設定

プロジェクトのルートディレクトリに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,
    }),
  ],
});

まだ存在しなければ、プロジェクトのルートに.envファイルを作成します。以下の2つの環境変数を追加します。AUTH_SECRETは最低32文字以上の秘密の文字列です。

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

使い方

サインインとサインアウトボタンは、scriptタグまたはクライアントサイドフレームワークのコンポーネント内でauth-astro/clientモジュールを使用することで追加できます。

---
import Layout from 'src/layouts/Base.astro';
---
<Layout>
  <button id="login">ログイン</button>
  <button id="logout">ログアウト</button>

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

ユーザーのセッションは、getSessionメソッドを使って取得できます。

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

const session = await getSession(Astro.request);
---
<Layout>
  {
    session ? (
      <p>{session.user?.name}さん、ようこそ</p>
    ) : (
      <p>未ログイン</p>
    )
  }
</Layout>