記事を書こうと思った背景

Next.jsでアプリを作成する際に、特定のページに対して認証機能を持たせる必要がありました。

なので、認証ライブラリの一つである「NextAuth.js」を導入しました。

認証機能を持ったページにアクセスする際には、証明書が必要となりますので、
今回はTCP/TLS認証のオープンソース「Open SSL」を使って認証ページにアクセスする方法を書いていきます。

Open SSLの導入方法はこちらの記事に書いてます

Windows11でOpenSSLを利用するための方法

Open SSLでランダムな文字列を発行する

すでにOpen SSLがコンピュータにインストールされているものとして、話を進めます。

randコマンドでランダムなパスワードを滑降してみましょう。

コマンドプロンプトを起動する。

Windowsの場合は、コマンドプロンプト起動します。
次に、Open SSLが格納されているディレクトリまで移動します。

C:\ProgramFiles\Open-SSLWin64\bin

randコマンドでパスワードを発行する

ランダムパスワードは、下記のコマンドでできます。

openssl rand -base64 32

このような、ランダムパスワードが返却されたOKです。

C:\ProgramFiles\Open-SSLWin64\bin
JeBCcyauK/y3ME0lhg1LWTSrqMZZulMvngrfk=

Next.jsプロジェクトの「.env」ファイルに張り付ける

Open SSLでのランダムパスワードの発行が完了したら、設定ファイル「.env」ファイルに張り付けましょう。

# Environment variables declared in this file are automatically made available to Prisma.
# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema

# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
# See the documentation for all the connection string options: https://pris.ly/d/connection-strings

DATABASE_URL="mysql://root:pass1234@localhost:3306/eventNext"

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=ggw4l4D9rbZJNtZy3qWeKVAt46RmzYj0bVMnvfJywMs=

#権威者ユーザーのパスワード
USER_EMAIL=email@example.com
USER_PASSWORD=password123

重要なのは、この部分です。

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=ggw4l4D9rbZJNtZy3qWeKVAt46RmzYj0bVMnvfJywMs=

上記の箇所を「.env」ファイルに記載することで、認証されたページ内へアクセスることができるようになります。

以上が、Next.jsで認証機能ページへアクセスるための方法を紹介しました。