JWT認証を実装してみた話

ユーザー機能を実装してみたく、JTW(JSON Web Token)を使用したトークンベースのシンプルな認証システムを作ってみた。
簡単とはいえ、実装はできたので、忘れないよう備忘録としてまとめる。

開発環境	バージョン
Next.js	15.2.1
TypeScript	5.0.0
React	19.0.0

JWTについて

JWTは、トークンベースの認証システム。ログインが完了すると、ユーザー情報を含むペイロード、ヘッダー、秘密鍵（または公開鍵）を用いてJWTを生成する。
生成したJWTをクライアントのブラウザのクッキーやローカルストレージに保存する。
アプリケーションでの操作が行われるたびにクライアントはJWTをサーバに送信し、サーバ側では受け取ったJWTを秘密鍵（または公開鍵）で検証し、ユーザーの認証を行う。

JWTの実装

今回使用したのは、jsonwebtokenというライブラリ。こちらのライブラリを使用して簡単なトークンベースの認証を実装した。

DBに登録されているユーザー情報と入力された情報が一致したら以下のコードでJWTを発行し、cookieに保存


    // JWTを生成するためにペイロードを設定
    const payload = {
      id: {ユーザーID}
      username: {ユーザーネーム},
      iat: Math.floor(Date.now() / 1000), // 発行時刻（秒単位）
    };
    const accessToken = jwt.sign(payload, SECRET_KEY, { expiresIn: "1h" });

データの保存などの操作が行われるたびに、cookieに保存されているJWTを取得し、以下のような関数でJWTをデコードし、ユーザーであるかを確認


    // _/_/_/_/ トークンと秘密鍵から、ペイロードをデコードする関数
    // token:ユーザーのJWT secret:秘密鍵
    const verifyToken = (token: string, secret: string) => {
      try {
        const decoded = jwt.verify(token, secret);

        return decoded;
      } catch (error) {
        console.error("トークンの検証エラー:", error);

        return null;
      }
    };

ペイロードは暗号化されているわけではないので、住所とかパスワードといった機密情報を含めるべきではない。
また、トークンの有効期限を設定しなければ、発行したトークンでずっとログインすることが可能になってしまうので、この期限の設定は重要。

JWT認証を実装してみた話

JWTについて

JWTの実装

参照