Prisma


<p><strong>GoogleやTwitter、FacebookなどのSNSアカウントを使ってログインできる「ソーシャルログイン」</strong>の実装方法をまとめていきたいと思います。</p>



<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#1">1. 使用するパッケージをインストールする</a><ul><li><a href="#next-auth">「next-auth」をインストール</a></li></ul></li><li><a href="#2_SNS">2. プロバイダ側（SNSサービス側）の設定をする</a><ul><li><a href="#Google">「Googleアカウント」でログインしたい場合</a></li><li><a href="#Twitter">「Twitterアカウント」でログインしたい場合</a></li></ul></li><li><a href="#3_Nextjs">3. Next.js側の設定をする</a><ul><li><a href="#env">「.env」ファイル</a></li><li><a href="#pagesapi8230nextauthjs">「pages/api/[&#8230;nextauth].js」ファイル</a></li><li><a href="#_appjs">「_app.js」ファイル</a></li></ul></li><li><a href="#4">4. ログインボタンを作る</a></li><li><a href="#5">5. ログインユーザー情報をデータベースに保存する</a></li></ul></div>
<h2><span id="1">1. 使用するパッケージをインストールする</span></h2>



<h3><span id="next-auth">「next-auth」をインストール</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-file="ターミナル" data-lang="Bash"><code>$ npm install next-auth</code></pre></div>



<h2><span id="2_SNS">2. プロバイダ側（SNSサービス側）の設定をする</span></h2>



<p>GoogleやTwitterなど認証機能を使いたいサービスごとに<strong>「⑴ clientId」と「⑵ clientSecret」を事前に取得</strong>する必要があります。</p>



<h3><span id="Google">「Googleアカウント」でログインしたい場合</span></h3>



<p><strong><a href="https://console.cloud.google.com/">Google Cloud Platform（GCP）</a></strong>で「clientId」と「clientSecret」の2つを取得します。</p>



<p>こちらは下記記事がとても参考になりました 。</p>



<ul>
<li><a href="https://reffect.co.jp/react/next-auth#Google_Cloud_PlatfomGCP">NextAuth.jsを使ったGoogle認証機能＋データベース(Prisma)の設定の理解</a></li>
</ul>



<h3><span id="Twitter">「Twitterアカウント」でログインしたい場合</span></h3>



<p>※分かり次第更新します。</p>



<h2><span id="3_Nextjs">3. Next.js側の設定をする</span></h2>



<h3><span id="env">「.env」ファイル</span></h3>



<p>プロバイダ側の設定で取得した「clientId」と「clientSecret」を<code>.env</code>ファイル内記載します。</p>



<p>（もしトップディレクトリに<code>.env</code>ファイルがない場合は作成してください。）</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file=".env"><code>GOOGLE_CLIENT_ID=[取得したクライアントID]
GOOGLE_CLIENT_SECRET=[取得したクライアントシークレット]</code></pre></div>



<h3><span id="pagesapi8230nextauthjs">「pages/api/[&#8230;nextauth].js」ファイル</span></h3>



<p><code>pages/api</code>ディレクトリ内に<code>auth</code>フォルダを作成し、そこに<strong><code>[...nextauth].js</code>を作成</strong>します。</p>



<p><code>[…nextauth].js</code>では「<strong>使用するプロバイダの指定</strong>」をします。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-file="pages/api/[...nextauth].js" data-lang="JavaScript"><code>import NextAuth from &#39;next-auth&#39;;
import GoogleProvider from &#39;next-auth/providers/google&#39;;

export default NextAuth({
    // 1: ログインに使用するプロバイダを指定
    providers: [
        GoogleProvider({
            clientId: process.env.GOOGLE_CLIENT_ID,
            clientSecret: process.env.GOOGLE_CLIENT_SECRET,
        }),
    ],
    secret: &#39;secret&#39;,
});</code></pre></div>



<p>プロバイダごとに記載方法が異なるので、<a href="https://craft-time.jp/nextauthjs-providers/">こちらの記事</a>を参考に選んで記載してみてください。</p>



<ul><li><a href="https://craft-time.jp/nextauthjs-providers/"><a href="https://craft-time.jp/wp-admin/post.php?post=822&amp;action=edit">NextAuth.jsで使える主要なプロバイダ一覧まとめ。</a></a></li></ul>



<h3><span id="_appjs">「_app.js」ファイル</span></h3>



<p>_app.jsのComponentを<code>SessionProvider</code>で囲います。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-file="_app.js" data-lang="JavaScript"><code>import {SessionProvider} from &#39;next-auth/react&#39;;

function MyApp({ Component, pageProps: { session, ...pageProps } }) {
    return(
        &lt;SessionProvider session={session}&gt;
            &lt;Component {...pageProps} /&gt;
        &lt;/SessionProvider&gt;
    )};
export default MyApp;</code></pre></div>



<h2><span id="4">4. ログインボタンを作る<span style="font-size: revert; color: initial; font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen-Sans, Ubuntu, Cantarell, &quot;Helvetica Neue&quot;, sans-serif;"></span></span></h2>



<p id="block-f29131a7-ca99-47d4-af2c-22bed2a5f24a">NextAuthでは、<code>signIn()</code>でログイン、<code>signOut()</code>でログアウトの処理を実装することができます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-file="LoginButton.js" data-lang="JavaScript"><code>import { useSession, signIn, signOut } from &quot;next-auth/react&quot;

export default function LoginButton(props) {
    // セッション情報を取得
    const { data: session } = useSession()

    return (
        {session ?  // ログイン判定
            &lt;button onClick={() =&gt; signOut()}&gt;ログアウト&lt;/button&gt;:
            &lt;button onClick={() =&gt; signIn()}&gt;ログイン&lt;/button&gt;
        }
    );
};</code></pre></div>



<h2><span id="5">5. ログインユーザー情報をデータベースに保存する</span></h2>



<p>ログインしたユーザー情報をデータベースへ保存したい場合は、「Prisma」を利用すると比較的簡単に実装することができます。<span style="font-size: revert; color: initial; font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen-Sans, Ubuntu, Cantarell, &quot;Helvetica Neue&quot;, sans-serif;"></span></p>



<p>詳しくは<a href="https://craft-time.jp/nextauth-prisma/">こちらの記事</a>を参考にしてみてください。</p>



<ul>
<li><a href="https://craft-time.jp/nextauth-prisma/">【NextAuth.js + Prisma】ログインしたユーザー情報をDBに保存する</a></li>
</ul>



<p></p>



<ul class="references">
<li><a href="https://reffect.co.jp/react/next-auth#i-3">NextAuth.jsを使ったGoogle認証機能＋データベース(Prisma)の設定の理解</a></li>



<li><a href="https://tech-lab.sios.jp/archives/25470">【連載】世界一わかりみの深いOAuth入門 〜 その1:OAuthってなに？ 〜</a></li>



<li><a href="https://applis.io/posts/how-to-authenticate-user#%E6%96%B9%E6%B3%951-authorization%E3%83%98%E3%83%83%E3%83%80%E3%83%BC">ユーザー認証とは。Web、APIでの認証の仕組みと認証方法</a></li>



<li><a href="https://next-auth.js.org/configuration/options#secret"> Options | NextAuth.js</a></li>
</ul>


【NextAuth.js】ソーシャルログインの実装。


<p>NextAuth.jsとPrismaを使って、<strong>ログインしたユーザー情報をデータベースに保存する方法</strong>をまとめておきます。</p>



<p>今回は<strong>主に「Prismaの設定」に関する内容</strong>になります。NextAuth.jsの設定は完了している前提で書いているので、まだ設定できていない場合は先にNextAuth.jsの設定が必要になります。</p>



<p>後半にMySQLの場合の設定方法も詳しく記載しています。</p>



<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#i">⑴ 使用するパッケージをインストールする</a></li><li><a href="#i-2">⑵ 接続先のデータベースを設定する</a><ul><li><a href="#env">.envファイルの作成</a></li><li><a href="#env-2">.envファイルに接続先のデータベース情報を記載</a></li></ul></li><li><a href="#i-3">⑶ データベース構造(スキーマ)等の設定する</a><ul><li><a href="#prisma">「prisma」フォルダを作成</a></li><li><a href="#schemaprisma">「schema.prisma」ファイルを作成</a></li><li><a href="#schemaprisma-2">「schema.prisma」を編集</a></li><li><a href="#_MySQLURL">[おまけ] MySQLの接続先URLの書き方</a></li><li><a href="#_NextAuthjs">[おまけ] NextAuth.jsで使用する基本モデル</a></li></ul></li><li><a href="#i-4">⑷ マイグレートを実行する</a></li><li><a href="#_Pricma_Client">⑸ Pricma Clientを作成する</a></li></ul></div>
<h2><span id="i">⑴ 使用するパッケージをインストールする</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file="ターミナル"><code>$ npm install @prisma/client @next-auth/prisma-adapter
$ npm install prisma --save-dev</code></pre></div>



<h2><span id="i-2">⑵ 接続先のデータベースを設定する</span></h2>



<h3><span id="env">.envファイルの作成</span></h3>



<p>Prismaで使用する<strong>データベースの情報（URL等）を記載する</strong>.envファイルを作成します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file="フォルダ構成"><code>[project]
 ├ 〇〇
 ├ 〇〇
 └ .env  # 新規作成</code></pre></div>



<h3><span id="env-2">.envファイルに接続先のデータベース情報を記載</span></h3>



<p>接続先データベースの「URL」や「ユーザー名」などを.envファイル内に記載していきます。</p>



<p>PostgreSQLややMySQL、SQLiteなどの<strong>データベースの種類によって記載方法が異なる</strong>ことがあるので確認してみてください。</p>



<ul><li><a href="https://www.prisma.io/docs/concepts/database-connectors/postgresql">PostgreSQL</a></li><li><a href="http://MySQL">MySQL</a></li><li><a href="http://SQLite">SQLite</a></li></ul>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file=".env"><code>DATABASE_URL=[データベースURL等]</code></pre></div>



<h2><span id="i-3">⑶ データベース構造(スキーマ)等の設定する</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-file="ターミナル" data-lang="Bash"><code>$ npx prisma init</code></pre></div>



<h3><span id="prisma">「prisma」フォルダを作成</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file="フォルダ構成"><code>[project]
 ├ 〇〇
 ├ 〇〇
 ├ .env
 └ prisma  # 新規作成</code></pre></div>



<h3><span id="schemaprisma">「schema.prisma」ファイルを作成</span></h3>



<p>先ほど作成した<strong>「prisma」フォルダ内</strong>に「schema.prisma」作成します。</p>



<p>この「schema.prisma」は、データベースの構造を指定するファイルです。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file="フォルダ構成"><code>[project]
 ├ 〇〇
 ├ 〇〇
 ├ .env
 └ prisma
   └ schema.prisma  # 新規作成</code></pre></div>



<h3><span id="schemaprisma-2">「schema.prisma」を編集</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file="schema.prisma"><code>// =====================================
// 1_接続するデータベースの設定
// =====================================
datasource db {
    provider = &quot;mysql&quot;
    url      = [DATABASE_URL]
}


// =====================================
// 2_「npx prisma generate」で生成するものを指定
// =====================================
generator client {
    provider = &quot;prisma-client-js&quot;
}


// =====================================
// 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(&quot;session_token&quot;)
    userId       String   @map(&quot;user_id&quot;)
    expires      DateTime
    user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)

    @@map(&quot;sessions&quot;)
}

// Userモデル
model User {
    id            String    @id @default(cuid())
    name          String?
    email         String?   @unique
    emailVerified DateTime? @map(&quot;email_verified&quot;)
    image         String?
    accounts      Account[]
    sessions      Session[]

    @@map(&quot;users&quot;)
}</code></pre></div>



<h4>❶ 接続するデータベースの設定</h4>



<p>「⑴<strong>データベースの種類</strong>(SQLite, progresql, MySQL, &#8230;)」と「⑵<strong>その接続先URL</strong>」を設定します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file="schema.prisma"><code>// =====================================
// 1_接続するデータベースの設定
// =====================================

datasource db {
    provider = &quot;mysql&quot;
    url      = [DATABASE_URL]  # MySQLの接続先URLの書き方は後述
}</code></pre></div>



<p></p>



<p></p>



<h4>❷ 生成するクライアントの指定（Prisma Client）</h4>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file="schema.prisma"><code>// =====================================
// 2_「npx prisma generate」で生成するものを指定
// =====================================

generator client {
    provider = &quot;prisma-client-js&quot;
}</code></pre></div>



<p>ここで生成するClientは、アプリ内で使用できるようになります。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-file="[...nextauth].js" data-lang="JavaScript"><code>const { PrismaClient } = require(&#39;@prisma/client&#39;)

const prisma = new PrismaClient()</code></pre></div>



<h4>❸ 作成するデータベースのモデルを指定</h4>



<p>今回のデータベースには、<strong>「NextAuth.js」が基本としているモデル</strong>をそのまま使用しています。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file="schema.prisma"><code>// =====================================
// 3_作成するモデルを指定
// =====================================

// Accountモデル
model Account {
    ...
}

// Sessionモデル
model Session {
    ...
}

// Userモデル
model User {
    ...
}</code></pre></div>



<h3><span id="_MySQLURL">[おまけ] MySQLの接続先URLの書き方</span></h3>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="1024" height="164" src="https://craft-time.jp/wp-content/uploads/2022/06/KkZe3hO-1024x164.png" alt="" class="wp-image-795" srcset="https://craft-time.jp/wp-content/uploads/2022/06/KkZe3hO-1024x164.png 1024w, https://craft-time.jp/wp-content/uploads/2022/06/KkZe3hO-300x48.png 300w, https://craft-time.jp/wp-content/uploads/2022/06/KkZe3hO-768x123.png 768w, https://craft-time.jp/wp-content/uploads/2022/06/KkZe3hO-1536x246.png 1536w, https://craft-time.jp/wp-content/uploads/2022/06/KkZe3hO-304x49.png 304w, https://craft-time.jp/wp-content/uploads/2022/06/KkZe3hO-282x45.png 282w, https://craft-time.jp/wp-content/uploads/2022/06/KkZe3hO.png 1600w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption>参照：<a href="https://www.prisma.io/docs/concepts/database-connectors/mysql">Prisma 公式ドキュメント</a></figcaption></figure>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file="MySQLの接続先URL[書き方]"><code>// 基本の書き方
mysql://[USER]:[PASSWORD]@[HOST]:[PORT]/[DATABASE]

// 例
mysql://root:mypw@127.0.0.1:8889/project_databese</code></pre></div>



<figure class="wp-block-table"><table><tbody><tr><td><strong>USER</strong></td><td>データベースのユーザー名。</td></tr><tr><td><strong>PASSWORD</strong></td><td>データベースのパスワード。</td></tr><tr><td><strong>HOST</strong></td><td>ホスト。</td></tr><tr><td><strong>PORT</strong></td><td>ポート。</td></tr><tr><td><strong>DATABASE</strong></td><td>データベースの名前。</td></tr></tbody></table></figure>



<h3><span id="_NextAuthjs">[おまけ] NextAuth.jsで使用する基本モデル</span></h3>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="640" height="461" src="https://craft-time.jp/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-11.14.20.png" alt="" class="wp-image-747" srcset="https://craft-time.jp/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-11.14.20.png 640w, https://craft-time.jp/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-11.14.20-300x216.png 300w, https://craft-time.jp/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-11.14.20-297x214.png 297w, https://craft-time.jp/wp-content/uploads/2022/06/スクリーンショット-2022-06-07-11.14.20-282x203.png 282w" sizes="(max-width: 640px) 100vw, 640px" /><figcaption>参照：<a href="https://next-auth.js.org/adapters/models">NextAuth.js 公式ドキュメント</a></figcaption></figure></div>


<p>NextAuth.jsでは基本となるデータベース構造を教えてくれています。</p>



<ul><li><a href="https://next-auth.js.org/adapters/models">Models | NextAuth.js</a></li><li><a href="https://next-auth.js.org/adapters/prisma">Prisma | NextAuth.js</a></li></ul>



<h2><span id="i-4">⑷ マイグレートを実行する</span></h2>



<p>マイグレートを実行して、<code>schema.prisma</code>で指定したモデルのテーブルをデータベースに作成します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-file="ターミナル" data-lang="Bash"><code>$ npx prisma migrate dev</code></pre></div>



<p><code>--name</code>を付けることでマイグレーションファイルに名前を付けることができます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-file="ターミナル" data-lang="Bash"><code>$ npx prisma migrate dev --name [マイグレーションファイル名]

$ npx prisma migrate dev --name first-migration  # 例
$ npx prisma migrate dev --name added_job_title  # 例</code></pre></div>



<h2><span id="_Pricma_Client">⑸ Pricma Clientを作成する</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-file="ターミナル" data-lang="Bash"><code>$ npx prisma generate</code></pre></div>



<ul class="references"><li><a href="https://next-auth.js.org/adapters/prisma">Prisma | NextAuth.js</a></li><li><a href="https://www.prisma.io/docs/concepts/database-connectors/mysql">MySQL database connector (Reference) | Prisma Docs</a></li><li><a href="https://reffect.co.jp/react/next-auth#i">NextAuth.jsを使ったGoogle認証機能＋データベース(Prisma)の設定の理解</a></li><li><a href="https://zenn.dev/smish0000/articles/f1a6f463417b65">Prisma 基礎</a></li><li><a href="https://next-auth.js.org/tutorials/role-based-login-strategy">role-based-login-strategy | NextAuth.js</a></li></ul>


「Prisma」の記事一覧