Next.jsとAuth.jsで認証機能を実装するチュートリアル
はじめに
Next.jsのバージョン14となり様々な機能を提供しています。
- サーバーサイドレンダリング (SSR)
- 静的サイト生成 (SSG)
- APIルート
- 画像最適化
- ルーティングと動的ルーティング
- ミドルウェア
- Typescriptサポート
これらの機能はドキュメントを通してある程度理解可能ではありますが、実際にウェブアプリケーションを作って提供するとなるとこれらを組み合わせたりまたは周辺のライブラリを活用していく必要があります。
どのようなウェブアプリケーションを作っていくにしても必ず必要となってくるのが認証機能となります。
BtoCとなると必ずしも認証機能が必要でないというケースもあるかもしれませんが、サービス拡大にあたってはユーザー最適な機能の提供は必要不可欠となり、やはり認証機能が多かれ少なかれ必要になってくると思います。
今回はどんなウェブアプリケーションでも必要となってくる認証、アクセス制御をNext.jsを使ってどう実装していくのかコードベースでご紹介します。
これらの記事を通してNext.jsでは認証に必要なさまざまな機能を実装できることをイメージできるかと思います。
また記事は機能ごとに分けてご紹介していますので認証機能の中で自社で必要な機能だけをピックアップして参考にして頂くという使い方もいいかと思います。
完成イメージ
-
アカウント登録
一般的なWebサービスを想定しており新たにアカウントをユーザー自身が発行します。
メールアドレスと名前とパスワードを入力してアカウント登録を行います。
この際、すでに登録されているメールアドレスで登録しようとするとエラーとなるよう制御を行なっています。 -
メールを確認しリンクをクリック
アカウント登録が完了すると本人確認として登録したメールアドレス宛にメールが送られます。 -
メール認証処理
届いたメールのリンクをクリックすることでサーバー側で本人確認を行うことができます。 -
ログイン
登録したメールアドレスとパスワードを用いてログインを行います。 -
設定画面にリダイレクト
ユーザー設定画面というログイン済みのユーザーのみアクセス可能なページに遷移させます。
という一連の流れを実装していきます。
-
アクセス制御
このユーザー設定画面をログイン前のユーザーがアクセスした場合はログイン画面に強制的に遷移させます。 -
OAuth認証
GitHubやGoogleなどの外部サービスを活用して認証を行うことも可能となっています。
GitHubの場合
Googleの場合
- 二要素認証
パスワードだけではセキュリティ的にというサービスの場合として二要素認証の実装も行っています。
ログイン時にメールアドレス/パスワードを入力した後に、対象のメールアドレス宛に送られたワンタイムトークンを登録するとログインが可能となります。
- パスワードリセット
ユーザーが登録したパスワードを忘れた場合のためにパスワードリセット機能を実装しています。
その①ユーザーがメールアドレスを入力するとパスワードリセットするための画面のリンクをメール送信します。（この動画ではリンクの遷移先が404となっていますが実装途中のためです。）
その②メールにあるリンクをクリックすると、今回作成した画面が表示されるかと思います。パスワードを入力し「新しいパスワードを設定」ボタンをクリックすると「パスワードを更新しました。ログイン画面よりログインをお願いします。」というメッセージが表示されます。
ログイン画面から新しいパスワードでログインできることを確認します。
システム構成
WIP
認証フローと画面の構成
認証の仕組みについて下記のような設計に基づき実装してあります。
メールアドレスとパスワードを使ってログインするというところまでは既にご存知かと思いますが、ログイン済み、未ログインの場合にそれぞれ画面へのアクセスがどこまでできるかという問題です。
最初の図は基本的なユーザーの利用の流れとなります。トップ画面に来たユーザーは、アカウント登録画面でアカウントを登録し、ログイン画面でログイン処理を行いログインできたら設定画面（一般的なウェブサイトでいうマイページの役割。今回はユーザー情報が表示される画面）に遷移します。
（設定画面については今回とは別の記事で作成していきます。）
既にアカウントを登録済みの場合は、トップ画面からログイン画面に遷移しログイン処理を行います。
設定画面はユーザー情報が表示される画面となり、未ログイン状態でアクセスされると困るのでアクセス拒否するよう設定します。
またログイン済みのユーザーがアカウント登録画面やログイン画面にアクセスしても特にすることはないため、設定画面にリダイレクトするよう設定します。
このようなイメージでログイン済み、未ログインの場合の画面アクセスを設定して行きます。
今回取り扱う技術スタック
- Next.js
Reactのフレームワークで、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）を簡単に実現できます。APIルートもサポートし、柔軟なデータ取得が可能です。
- Tailwind CSS
ユーティリティファーストのCSSフレームワークで、直感的にデザインを作成できます。事前定義されたクラスを使って、HTML内で簡単にスタイルを適用できます。
- shadcn ui
高度にカスタマイズ可能で、デザインに洗練されたコンポーネントを提供するReact UIライブラリです。Tailwind CSSとシームレスに統合できます。
- React Hook Form
Reactアプリケーションでフォームを管理するためのライブラリで、パフォーマンスが良く、使いやすさを重視しています。簡単にフォームバリデーションを追加できます。
- zod
TypeScript向けの宣言的なスキーマバリデーションライブラリで、型安全にバリデーションを行えます。エラー処理も簡潔に書くことができます。
- Prisma
TypeScript/JavaScriptのORM（Object Relational Mapping）ツールで、データベース操作を簡単にし、型安全で効率的にクエリを作成できます。
- Neon DB
サーバーレスでスケーラブルなPostgreSQLデータベースサービスで、データベースのセットアップを簡単にし、ネイティブでサーバーレスアーキテクチャに最適化されています。
- Auth.js
ユーザー認証を簡単に組み込めるライブラリで、OAuthやJWTを用いて、セッション管理を効率よく行えます。
- Sendgrid
メール送信サービスで、APIを介して大量のメールを簡単に送信できます。特にマーケティングやトランザクションメールに強いです。
実装の流れと記事のご紹介
上から順に実装していくことで完成イメージと同じアプリケーションを実現できます。
Next.jsの基本的な機能は知っている、またはこの技術スタックの使い方だけ知りたいなど具体的な課題を持っている方は該当する記事だけ参考にするというやり方もアリかと思います。
実際のコードだけでなく実装方針なども記載していますので参考になる部分は多いかと思います。
Next.jsのトップ画面をTailwind CSSとshadcnで素早く作る
アカウントの登録画面をNext.js/Tailwindcss/shadcnで作る
React Hook Formを活用して登録画面に入力フォームとバリデーションを設定する
Next.jsのサーバーアクションに登録フォームで入力したデータを渡す
Next.jsのサーバーアクションを活用してDBにアカウント情報を登録する
Next.jsのミドルウェアとAuth.jsを活用して画面のアクセス制御をする
Next.jsでログイン画面を作ってメールアドレス/パスワードでログインできるようにする
Next.jsでメール認証機能を実装する①メール送信機能
パスワードリセット処理を実装する①メール送信
Next.jsで二要素認証を実現し不正アクセスへの対応を実現する
Next.jsでGitHubとGoogleのOAuth認証を簡単実装する方法
この記事の対象読者
Next.jsで認証の仕組みの導入方法ついて集中的に取り上げており、次のような方を対象読者として想定しています。
- React、TypeScriptを使用した開発に慣れている方
- Next.js v13以降の実装パターン(App Router)を知っている方
- Next.jsに認証の仕組みを導入する方法を学びたい方
Next.jsで認証の仕組みの導入方法ついて誌面を割くため、ReactやTypeScriptに関する解説は割愛しています。あらかじめご了承ください。
さいごに
Next.jsも近年、十分に商用サービスで活用できるだけの機能とエコシステムが整ってきているかと思います。
これらの記事を通してNext.jsでアプリケーションを自信を持って社内で提案またはお客様先で提案できることを切に願っています。
関連する弊社の支援実績
関連する技術ブログ
キャッシュ戦略完全ガイド：CDN・Redis・API最適化でパフォーマンスを最大化
Webアプリの高速化には、適切なキャッシュ戦略が不可欠。本記事では、CDN（Cloudflare / AWS CloudFront）による静的コンテンツ配信、Redis / Memcached を活用したデータベース負荷軽減、APIレスポンスキャッシュ（GraphQL / REST API）など、キャッシュを駆使してパフォーマンスを向上させる方法を解説。TTL設定、Next.js ISR / SSG のプリフェッチ、クエリキャッシュ（React Query / Apollo Client）、キャッシュヒット率の分析など、実践的なノウハウも紹介します。
shinagawa-web.com
React × Tailwind CSS × Emotionで実践するコンポーネント設計ガイド：デザインシステム・状態管理・再利用性の最適解
React、Tailwind CSS、Emotion、Storybook、Figma、Next.jsを活用したコンポーネント設計のベストプラクティスを紹介。デザインシステムに基づく命名規則、適切な状態管理、再利用性を高める抽象化、アクセシビリティ対応、スタイルガイドラインの整備、テーマ設定、バージョン管理、ドキュメント作成まで、モダンフロントエンド開発に欠かせない知識を徹底解説します。
shinagawa-web.com
10分で完成。AWS Amplify公式テンプレートを使ったNext.jsアプリの簡単デプロイ手順
AWS Amplifyの公式テンプレートを活用し、Next.jsアプリを素早く効率的にデプロイする方法をわかりやすく解説します。テンプレートの導入からコード修正後の再デプロイまで、初心者にも実践しやすい完全ガイドです。
shinagawa-web.com
Next.js × AWS CDK の統合環境構築：Docker でローカル開発から本番デプロイまで
Next.js と AWS CDK を1つのリポジトリで管理し、Docker を活用してローカル開発環境と本番環境向けのイメージを構築する方法を解説。ディレクトリ構成の設計から、Next.js のセットアップ、Docker Compose による開発環境の構築、ECR 向けの本番用 Docker イメージの作成、CDK の導入までを網羅。
shinagawa-web.com
Next.jsでのメール認証処理の実装ガイド：アカウント登録からトークン検証まで
Next.jsを活用したメール認証の実装方法を解説。アカウント登録時のトークン発行から、Sendgridを使ったメール送信処理まで、具体的な手順を紹介します。
shinagawa-web.com
Next.jsでのメール認証処理の実装ガイド：トークン検証からログイン画面へのリダイレクト処理までの詳細解説
前回、トークンを生成し認証用のメールを送信する処理を実装しました。今回はその続きの処理を実装していきます。ユーザー登録後、メール認証のためのトークン検証処理を実装し、成功・エラー処理を分けてユーザーに適切なメッセージを表示する方法を紹介します。ReactとNext.jsを活用したシンプルかつ堅牢な認証機能の流れを解説し、実際の動作確認まで行います。
shinagawa-web.com
Next.jsを活用したGitHubとGoogleのOAuth認証実装完全ガイド — スムーズなユーザーログインの実現方法
本記事では、Next.jsを使用してGitHubとGoogleのOAuth認証を実装する方法を詳しく解説します。OAuthの基礎から、実際のコードの書き方、トークン管理、認証後のユーザー管理に至るまで、実践的なステップを順を追ってご紹介します。ユーザーの利便性を高める認証機能をスムーズに実装するための完全ガイドです。
shinagawa-web.com
Next.jsでログイン画面を作ってメールアドレス/パスワードでログインできるようにする
Next.jsとAuth.jsを活用して、メールアドレスとパスワードによるログイン機能を実装する方法を解説します。Zodによるバリデーション、データベースアクセス、セッション管理、エラーハンドリングなどの実装手順を詳しく紹介。設定画面へのリダイレクトやログアウト処理もカバーしています。
shinagawa-web.com
