NextAuth触ってみる

tockii

今はAuth.jsなんだ
https://authjs.dev/

tockii

Emailとパスワードを利用した認証を試しに作ってみる。

tockii

セットアップにSECRETの発行が必要なのか

npx auth secret

tockii

CredentialsだとDBもいるからPrisma使うか
Adapterもあるっぽくて良い

tockii

DBは今起動させてるPostgresSQL使う

tockii

$ pnpm install prisma

$ npx prisma init

これでPrismaの設定は完了

tockii

prismaのenv設定毎回忘れる

tockii

とりあえず今回はシンプルにユーザー情報とログインすると取れるデータのモデルを作成。Adapterは利用しない

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
    id             String   @id @default(cuid())
  name           String?
  email          String   @unique
  hashedPassword String
  createdAt      DateTime @default(now())
  updatedAt      DateTime @updatedAt
}

model Data {
  id             String   @id @default(cuid())
  name           String?
  createdAt      DateTime @default(now())
  updatedAt      DateTime @updatedAt
}

tockii

Email & Password は credentialsかな？
https://next-auth.js.org/providers/credentials
基本的には認証にはもっといい方法あるからそっち使ってねというスタンスっぽい
The industry has come a long way since usernames and passwords as the go-to mechanism for authenticating and authorizing users to web applications. Therefore, if possible, we recommend a more modern and secure authentication mechanism such as any of the OAuth providers, Email Magic Links, or WebAuthn (Passkeys) options instead.

However, we also want to be flexible and support anything you deem appropriate for your application and use case, so there are no plans to remove this provider.

tockii

Auth.jsのexampleだとprovider下に直接設定を記述しているけど、本来は CredentialsProviderを利用するのが良いっぽい

v4では記述あり

tockii

callbacksオプションは前verの方がドキュメント豊富

v5もここにあった

tockii

middlewareは自前で作るのが楽

import { NextResponse } from 'next/server';
import { auth } from '../auth';

export default auth((req) => {
  if (req.nextUrl.pathname === '/user') {
    if (!req.auth) {
      const url = new URL('/auth/signin', req.url);
      return NextResponse.redirect(url);
    }
  }
  return NextResponse.next();
});