web-dev-qa-db-ja.com

Next.jsに認証を実装する方法

私はNext.jsを初めて使用し、jwtトークンを使用する認証システムに苦労しています。認証システムでのjwtトークンとルーティングを保存するための最良/標準的な方法は何ですか？私は別のチュートリアル/記事から別のアプローチを試みてきましたが、それを完全に理解していません。これが私が試したものです。

  1. ユーザーがログインすると、ユーザー名/パスワードがseparated apiサーバーに送信されます（例：バックエンドスタッフを処理する新しいプロジェクト）、サーバーはaccess-token、次にNext.jsプロジェクトで、受け取ったトークンでCookieを設定します。 Next.jsプロジェクトでは、保護されたルートはwithAuth hocでラップされ、Cookieのトークンをチェックします。この方法の問題は、CookieにhttpOnlyフラグがないため、XSSに対して脆弱であることです。

  2. これは1.に似ていますが、localStorageを使用すると、問題はaccess-tokenは最初のリクエストでサーバーに送信できませんでした。 （これはわかりませんが、私の理解では、すべてのhttpリクエストで、access-token手動で、私が制御できないリクエストについてはどうですか？例：最初のリクエストまたは<a> 鬼ごっこ）。

  3. Next.jsサーバー（カスタムエクスプレスサーバー）内に認証バックエンドを記述しました。ユーザーがログインすると、サーバーはそれを検証してhttpOnly Cookieを設定します。次に、問題は、クライアント側ルーティング（Next.jsルーターを使用してURLに移動）で、トークンをチェックできなかったことです。たとえば、ページがwithAuth hocでラップされているが、JavaScriptを使用してCookie内のトークンにアクセスできない場合。

そして、保護されたルートのgetInitialPropsで、Cookie/localStorageの存在トークンのみをチェックし、トークンが取り消されたりブラックリストに登録されたりした場合、それらを処理する方法をたくさんの人に見てきました。トークンをサーバーに送信しませんでしたか？または、クライアント側のページが変更されるたびにサーバーにトークンを送信する必要がありますか？

jwtnext.jsserver-side-rendering
16
Kongpon Charanwattanakit

Next.JS v8の導入に伴い、 NextJSサンプルページ にサンプルが配置されました。従うべき基本的な考え方は次のとおりです。

[〜＃〜] jwt [〜＃〜]

  • Cookieを使用してトークンを保存する（さらに暗号化するかどうかを選択できます）
  • 承認ヘッダーとしてCookieを送信する

OAuth

  • OAuth2.0などのサードパーティ認証サービスの使用
  • パスポートの使用
2
cr05s19xx