この記事は、木更津高専 Advent Calendar 2023 22日目の記事です。
←前 AtCoder入緑記事 by @toma09to
→次祇園祭WebサイトのDBについて by @NXVZBGBFBEN

はじめに

プログラミング研究同好会(プロ研)のnaotikiです

今年度、プロ研は木更津高専の学園祭「祗園祭(ぎおんさい)」のホームページ(+システム)を作りました！

今回は私が主に担当した認証関連について書きたいと思います。

本記事は私個人(naotiki)の意見・見解です。
木更津高専、木更津高専プログラミング研究同好会、木更津高専学園祭実行委員会とは一切関係ありません！

管理画面の認証をつくる

学園祭ホームページには各企画のお知らせを表示する場所があり、各企画の最新の情報を見られるようになっています。

ということはこれを投稿できるようにする画面も必要な訳ですが、誰でもURLさえ知ってれば投稿できるとかだと駄目なので認証しないと投稿できないようにします。

しかし、一から認証を作るのは色々あって死んでしまうので、すばらしいフレームワークを使うことにしました。
今回は NextAuth.js を使いました。¹

ログインする方法はEmail(メールリンク)とCredential(メール+パスワード)の2つにしました。
あと、条件として事前に許可された人しかログイン(ユーザー登録)できないようにします。

ORMには企画管理でPrismaを使用していたのでそこに認証系のテーブル情報も書き加えていきます。

ほぼ https://authjs.dev/reference/adapter/prisma#create-the-prisma-schema-from-scratch にあるやつのコピペですが、 User とアクセスを許可された学生のデータが入ってる Memberを紐付けられるようにしました。

Memberの情報

model Member {
  id          String   @id @default(uuid()) @db.Uuid
  email       String   @unique @db.VarChar(255)
  alias       String   @db.VarChar(255)
  displayName String   @db.VarChar(255)
  group       Group[]
  role        Role     @default(Member)
  createdAt   DateTime @default(now())
  modifiedAt  DateTime @updatedAt
  user        User?
}

あとは、/pages/api/[...nextauth].tsをいい感じに書きます。

主に設定したことは

メールをとりあえず自分のメールアドレスからMicrosoftのアプリパスワードを使って送信
サインインするとき、Memberテーブルにメールアドレスがなければサインインを拒否
などです。

ついでにMiddlewareを設定して管理画面は認証必須にします。

middleware

export { default } from "next-auth/middleware"
// /dashboard以下 すべてに適用
export const config = { matcher: ["/dashboard/:path*"] }

ログインして認証に成功すると管理画面に飛べます！

これはユーザー情報を見られる画面

パスワードログインが設定されていない人はここからすぐ設定画面へ行けるようにしてあります。

APIを保護する

せっかく管理画面を保護してもAPIを叩けたら意味が無いので管理APIも認証を必須にします。
NextAuth.js のおかげですぐにできます。

await getServerSession(req, res, authOptions);

でSessionまたはnull(未認証)を取得できるのでこれを基にレスポンスすればいいだけです。

簡単！

おわり

NextAuth.js(Auth.js)を使うと、JWTとかセッション管理とかあまり気にせず手軽に認証を追加できて最強になれるのでとても楽でした！

~~それはそれとしてドキュメントをなんとかしてほしかった・・・~~

Auth.jsに移行中っぽいです。ドキュメントの整備とパッケージ名の移行が中途半端なせいで地獄を見ました。恨みます。 ↩