Agile育成ブログ
未来を変える喜びを
未分類

Next.jsとPrismaで構築する認証システム

  / 
npx create-next-app@latest .
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias? … No

NextAuthのオプションとしてアダプター（今回は Prisma ）を設定します。これによりNextAuth.jsとPrismaを連携して、アクションがあった際にPrisma経由でユーザーをデータベースに保存しています。

bcryptとは、Blowfish暗号を基盤としたパスワードハッシュアルゴリズムです。
一般的にパスワードは、元に戻すことが困難である「一方向性関数」の性質を持つハッシュ関数を用いてハッシュ値で保管します。

「平文」は漏洩したらパスワードが盗まれてしまいます。

「暗号文」は暗号化されていますが「暗号文」を復号する「鍵」があればパスワードを解読できます。パスワードが情報漏洩した時点で、もしかしたら「鍵」も漏洩しているかもしれません。そのため、パスワードを暗号文で保管するのは十分な対策とはいえません。

そして最後は「ハッシュ値」です。適切なハッシュ関数を使っていればハッシュ値へと変換した値を元に戻すことは非常に困難です。

npm i @hookform/resolvers @next-auth/prisma-adapter @prisma/client axios bcrypt date-fns encoding next-auth next-cloudinary react-hook-form react-hot-toast react-icons zod zustand
npm i --save-dev @types/bcrypt prisma

Server [localhost]:
Database [postgres]:
Port [5432]:
Username [postgres]:
Client Encoding [SJIS]:
ユーザー postgres のパスワード:
psql (15.3)
"help"でヘルプを表示します。

postgres=# create database nextjs_prisma;
CREATE DATABASE
npx prisma init --datasource-provider postgresql

メールアドレスのモデル作成

model User {
  id             String    @id @default(uuid())
  name           String?
  email          String?   @unique
  emailVerified  DateTime?
  image          String?
  hashedPassword String?
  createdAt      DateTime  @default(now())
  updatedAt      DateTime  @updatedAt
  accounts       Account[]
}
RELATED POST