質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
JWT(JSON Web Token)

JWT(JSON Web Token)とは、JSONをベースとしたアクセストークンの仕様。電子署名付きのURL safeなJSONのことを指します。電子署名が付いているため、改ざんをチェックできる点がメリットです。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

1回答

1635閲覧

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

hitonihiki

総合スコア4

JWT(JSON Web Token)

JWT(JSON Web Token)とは、JSONをベースとしたアクセストークンの仕様。電子署名付きのURL safeなJSONのことを指します。電子署名が付いているため、改ざんをチェックできる点がメリットです。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2022/12/23 03:51

前提

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)

該当のソースコード

TypeScript

1import jwt from "jsonwebtoken"; 2import { useRouter } from "next/router"; 3import { useEffect, useState } from "react"; 4 5interface DecodedType { 6 _id: string; 7} 8 9function useAuth() { 10 const [loginUserId, setLoginUserId] = useState(""); 11 12 const router = useRouter(); 13 14 // ページが表示される前に行う処理 15 useEffect(() => { 16 const token = localStorage.getItem("token"); 17 if (!token) { 18 router.push("http://localhost:3000/"); 19 } 20 21 const secretKey = process.env.NEXT_PUBLIC_SECRET_KEY; 22 try { 23 const decoded = jwt.verify(token!, secretKey as string); 24 setLoginUserId((decoded as DecodedType)._id); 25 } catch (err) { 26 console.log(err); 27 router.push("http://localhost:3000/"); 28 } 29 }, [router]); 30 31 return loginUserId; 32} 33 34export default useAuth; 35

試したこと

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

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

  • Next : 13.0.5
  • jwt : 8.5.1

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

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

投稿2022/12/27 03:15

detethcotaf

総合スコア22

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hitonihiki

2022/12/27 06:04

回答ありがとうございます。 ちょうど最近起きるようになったエラーだったんですね... 別のライブラリを検討しようと思います。 改めて、回答ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問