記事を書こうと思った背景
Next.jsでアプリを作成する際に、特定のページに対して認証機能を持たせる必要がありました。
なので、認証ライブラリの一つである「NextAuth.js」を導入しました。
認証機能を持ったページにアクセスする際には、証明書が必要となりますので、
今回はTCP/TLS認証のオープンソース「Open SSL」を使って認証ページにアクセスする方法を書いていきます。
Open SSLの導入方法はこちらの記事に書いてます
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で認証機能ページへアクセスるための方法を紹介しました。