認証を追加するチュートリアルを利用して、ログインができるところまで進めていきます。チュートリアルは以下のページで参照できます。https://developer.auth0.com/resources/guides/web-app/nextjs/basic-authentication今回は、ログイン、サインアップ、ログアウトができるところまで作成をしていきます。サンプルを利用しています。紹介アプリケーションの作成まず最初にアプリケーションを作成します。クリックできるようになっています。アプリケーション作成の際には、アプリケーションの名前とアプリケーションのタイプを選択します。作成をしたアプリケーションの設定を進めていきます。作成をしたアプリケーションのページを開くといかようになっています。今回は以下のように設定をします。対して記載していきます。項目は以下の通りです。関しては管理画面ではなく手元でユニークなキーを生成する必要があります。以下のコマンドで生成した文字を利用します。"console.log(crypto.randomBytes(32).toString('hex'))"環境変数に関してはこれで一通りそろいました。パッケージを追加します。ファイルの中身は以下の通りです。handleAuth();続いて認証のプロバイダの設定を追加します。ファイルを作成してログインボタンを実装します。ログインボタンのコードは以下の通りです。ファイルを以下のように書き換えます。ボタンこれに関しては必要に応じてという形になりますが、サインアップに関しても実装しておきます。ファイルを以下のように書き換えます。ファイルを作成して、コードは以下のように設定します。有効になっていることを確認してください。ファイルを作成して、以下のコードを設定してください。);};これでボタンの準備ができました。ナビゲーションの作成ログインのステータスに合わせてボタンを出し分けする、ナビゲーションの部分を作成していきます。作成して、以下のコードを記載します。);};このコードはログインをしていないときはサインアップとログインのボタンを、ログインをしているときはログアウトのボタンを表示するようになっています。作成したボタンを、ページで利用できるようにします。ファイルに対して以下のコードを追加します。実行してローカルで起動します。画面の右上にボタンが表示されています。ボタンをクリックすると、メールアドレスとパスワードの画面が表示されます。登録したメールアドレスとパスワードでログインができるようになりました。ログインをした際には、右上のボタンがログアウトになっているのを確認できます。パッケージを入れて設定をしました。今回までのコードに関しては、以下からコードを参照できるようにしています。