【NextAuth.js + Prisma】ログインしたユーザー情報をDBに保存する
2022/6/10
2022/7/16
NextAuth.jsとPrismaを使って、ログインしたユーザー情報をデータベースに保存する方法をまとめておきます。
今回は主に「Prismaの設定」に関する内容になります。NextAuth.jsの設定は完了している前提で書いているので、まだ設定できていない場合は先にNextAuth.jsの設定が必要になります。
後半にMySQLの場合の設定方法も詳しく記載しています。
目次
⑴ 使用するパッケージをインストールする
$ npm install @prisma/client @next-auth/prisma-adapter
$ npm install prisma --save-dev
⑵ 接続先のデータベースを設定する
.envファイルの作成
Prismaで使用するデータベースの情報(URL等)を記載する.envファイルを作成します。
[project]
├ 〇〇
├ 〇〇
└ .env # 新規作成
.envファイルに接続先のデータベース情報を記載
接続先データベースの「URL」や「ユーザー名」などを.envファイル内に記載していきます。
PostgreSQLややMySQL、SQLiteなどのデータベースの種類によって記載方法が異なることがあるので確認してみてください。
DATABASE_URL=[データベースURL等]
⑶ データベース構造(スキーマ)等の設定する
$ npx prisma init
「prisma」フォルダを作成
[project]
├ 〇〇
├ 〇〇
├ .env
└ prisma # 新規作成
「schema.prisma」ファイルを作成
先ほど作成した「prisma」フォルダ内に「schema.prisma」作成します。
この「schema.prisma」は、データベースの構造を指定するファイルです。
[project]
├ 〇〇
├ 〇〇
├ .env
└ prisma
└ schema.prisma # 新規作成
「schema.prisma」を編集
// =====================================
// 1_接続するデータベースの設定
// =====================================
datasource db {
provider = "mysql"
url = [DATABASE_URL]
}
// =====================================
// 2_「npx prisma generate」で生成するものを指定
// =====================================
generator client {
provider = "prisma-client-js"
}
// =====================================
// 3_作成するモデルを指定
// =====================================
// Accountモデル
model Account {
id String @id @default(cuid())
userId String
type String
provider String
providerAccountId String
refresh_token String? @db.Text
access_token String? @db.Text
expires_at Int?
token_type String?
scope String?
id_token String? @db.Text
session_state String?
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
@@unique([provider, providerAccountId])
}
// Sessionモデル
model Session {
id String @id @default(cuid())
sessionToken String @unique @map("session_token")
userId String @map("user_id")
expires DateTime
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
@@map("sessions")
}
// Userモデル
model User {
id String @id @default(cuid())
name String?
email String? @unique
emailVerified DateTime? @map("email_verified")
image String?
accounts Account[]
sessions Session[]
@@map("users")
}
❶ 接続するデータベースの設定
「⑴データベースの種類(SQLite, progresql, MySQL, …)」と「⑵その接続先URL」を設定します。
// =====================================
// 1_接続するデータベースの設定
// =====================================
datasource db {
provider = "mysql"
url = [DATABASE_URL] # MySQLの接続先URLの書き方は後述
}
❷ 生成するクライアントの指定(Prisma Client)
// =====================================
// 2_「npx prisma generate」で生成するものを指定
// =====================================
generator client {
provider = "prisma-client-js"
}
ここで生成するClientは、アプリ内で使用できるようになります。
const { PrismaClient } = require('@prisma/client')
const prisma = new PrismaClient()
❸ 作成するデータベースのモデルを指定
今回のデータベースには、「NextAuth.js」が基本としているモデルをそのまま使用しています。
// =====================================
// 3_作成するモデルを指定
// =====================================
// Accountモデル
model Account {
...
}
// Sessionモデル
model Session {
...
}
// Userモデル
model User {
...
}
[おまけ] MySQLの接続先URLの書き方
![](https://craft-time.jp/wp-content/uploads/2022/06/KkZe3hO-1024x164.png)
// 基本の書き方
mysql://[USER]:[PASSWORD]@[HOST]:[PORT]/[DATABASE]
// 例
mysql://root:mypw@127.0.0.1:8889/project_databese
USER | データベースのユーザー名。 |
PASSWORD | データベースのパスワード。 |
HOST | ホスト。 |
PORT | ポート。 |
DATABASE | データベースの名前。 |
[おまけ] NextAuth.jsで使用する基本モデル
NextAuth.jsでは基本となるデータベース構造を教えてくれています。
⑷ マイグレートを実行する
マイグレートを実行して、schema.prisma
で指定したモデルのテーブルをデータベースに作成します。
$ npx prisma migrate dev
--name
を付けることでマイグレーションファイルに名前を付けることができます。
$ npx prisma migrate dev --name [マイグレーションファイル名]
$ npx prisma migrate dev --name first-migration # 例
$ npx prisma migrate dev --name added_job_title # 例
⑸ Pricma Clientを作成する
$ npx prisma generate
最近の記事
![](/_next/image?url=https%3A%2F%2Fcraft-time.jp%2Fwp-content%2Fuploads%2F2023%2F11%2F%E7%94%BB%E5%83%8F%E4%BD%9C%E6%88%90-7.png&w=3840&q=75)
音楽生成AI「Suno」の使い方まとめ!作詞作曲が簡単にできる?
簡単に曲が作れるAIということでよく聞く「Suno(Chirp)」についてまとめました。
目次「Suno」とはテキストからさまざまな音声を生成する「Bark」歌詞から曲を生成する「Chirp」...
2023/11/24
2023/11/24
![](/_next/image?url=https%3A%2F%2Fcraft-time.jp%2Fwp-content%2Fuploads%2F2023%2F11%2F%E7%94%BB%E5%83%8F%E4%BD%9C%E6%88%90-5.png&w=3840&q=75)
【Open AI】APIの料金まとめ|GPT・DALL·E・Whisperなど
Open AIのAPI(一部)の料金をまとめました。
参考のために日本円は「1ドル150円」で換算をしています。
目次Text generation: テキスト生成Assistants ...
2023/11/22
2023/11/22
![](/_next/image?url=%2Fimages%2Fnoimage.png&w=3840&q=75)
【Next.js】Assistants APIの基本的なコードまとめ。
Open AIの「Assistants API」をNext.jsで使用する時の基本的なコードをまとめました。
目次Open AIのAPIセットアップ基本の使い方Threads: スレッドを作る...
2023/11/21
2023/11/21
![](/_next/image?url=https%3A%2F%2Fcraft-time.jp%2Fwp-content%2Fuploads%2F2023%2F11%2F%E7%94%BB%E5%83%8F%E4%BD%9C%E6%88%90-1-1.png&w=3840&q=75)
【Next.js】Open AIのAPIでファイルをアップロードする方法。
今回は、Next.jsサイトからOpen AIのAPI(Upload file)で、ファイルをアップロードする方法を実装するのに時間がかかったのでその過程と最終コードをまとめます。(Vercelにデ...
2023/11/21
2023/11/22
![](/_next/image?url=%2Fimages%2Fnoimage.png&w=3840&q=75)
「生成系AIのWEBプロダクトTOP50」をまとめてみる。
Andreessen Horowitzが出している記事で紹介されている「AIプロダクトの月間訪問者数ランキングTOP50」のサービスをまとめました。
目次ChatGPTcharacter.ai...
2023/10/3
2023/10/3
![](/_next/image?url=%2Fimages%2Fnoimage.png&w=3840&q=75)
【Next.js 13】NextAuth+FireStoreにユーザー情報を保存する。
今回は、以下の3つをNext.js 13で実装するためのメモです。
Googleアカウントでログインできる
アカウント、セッション情報をFirestoreに保存する
サーバーサイ...
2023/7/12
2023/7/12