jwt.verify() におけるエラーの解決

Question

前提

Next.js を使ってフロントもバックも開発しています。
今回は、 jwt を使って認証機能を付けたのですがエラーが起きてしまいました。
該当箇所とは関係のない部分の実装をしている途中で急にエラーが起きてしまったので、エラーの原因すら明確にわからず困っています。

実現したいこと

• エラーの解消

発生している問題・エラーメッセージ

TypeError: Right-hand side of 'instanceof' is not an object
    at eval (verify.js?9d88:120:1)
    at getSecret (verify.js?9d88:97:1)
    at module.exports [as verify] (verify.js?9d88:101:1)
    at eval (useAuth.ts?5f37:23:23)
    at commitHookEffectListMount (react-dom.development.js?ac89:23150:1)
    at commitPassiveMountOnFiber (react-dom.development.js?ac89:24926:1)
    at commitPassiveMountEffects_complete (react-dom.development.js?ac89:24891:1)
    at commitPassiveMountEffects_begin (react-dom.development.js?ac89:24878:1)
    at commitPassiveMountEffects (react-dom.development.js?ac89:24866:1)
    at flushPassiveEffectsImpl (react-dom.development.js?ac89:27039:1)
    at flushPassiveEffects (react-dom.development.js?ac89:26984:1)
    at eval (react-dom.development.js?ac89:26769:1)
    at workLoop (scheduler.development.js?bcd2:266:1)
    at flushWork (scheduler.development.js?bcd2:239:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js?bcd2:533:1)

該当のソースコード

import jwt from "jsonwebtoken";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";

interface DecodedType {
  _id: string;
}

function useAuth() {
  const [loginUserId, setLoginUserId] = useState("");

  const router = useRouter();

  // ページが表示される前に行う処理
  useEffect(() => {
    const token = localStorage.getItem("token");
    if (!token) {
      router.push("http://localhost:3000/");
    }

    const secretKey = process.env.NEXT_PUBLIC_SECRET_KEY;
    try {
      const decoded = jwt.verify(token!, secretKey as string);
      setLoginUserId((decoded as DecodedType)._id);
    } catch (err) {
      console.log(err);
      router.push("http://localhost:3000/");
    }
  }, [router]);

  return loginUserId;
}

export default useAuth;

試したこと

ログを取りながらエラー箇所を確認したところ verify の部分でエラーが起きていることは確認しました。
エラーメッセージで検索した結果、 instanceof を使わない等の解決策が出てきたのですが、 verify は自分で実装した部分ではないのでこの方法は有効ではないと思い停滞しています。

補足情報（FW/ツールのバージョンなど）

• Next : 13.0.5
• jwt : 8.5.1

Answer 1

ちょうど同様のエラーになって検索してたら、stackoverflowに回答がありました。

https://stackoverflow.com/questions/74907805/right-hand-side-of-instanceof-is-not-an-object-jsonwebtoken

フロントでjwtを利用することは想定されてないようですね…
別のライブラリを使った方が良さそうです。

Comments

[hitonihiki]

回答ありがとうございます。

ちょうど最近起きるようになったエラーだったんですね...
別のライブラリを検討しようと思います。

改めて、回答ありがとうございました。