JWT Verification Error: TypeError: Right-hand side of 'instanceof' is not an object

[fading granite]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[sturdy locust]

The above error occurred in the <AdminPage> component:

at AdminPage (webpack-internal:///./pages/admin.jsx:30:74)
at div
at App (webpack-internal:///./pages/_app.js:21:11)
at PathnameContextProviderAdapter (webpack-internal:///./node_modules/next/dist/shared/lib/router/adapters.js:74:11)
at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:303:63)
at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:852:919)
at Container (webpack-internal:///./node_modules/next/dist/client/index.js:78:1)
at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:188:11)
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:364:11)

even tried setting key by hand but it didnt work either

[shut hornet]

What library for jwt?

[sturdy locust]

jsonwebtoken

[shut hornet]

So you need to await when verifying?

[sturdy locust]

  const router = useRouter();

  useEffect(() => {
    console.log(serverRuntimeConfig);
    const tokenE = userService.userValue.encryptedToken; // Replace 'jwt' with the name of your JWT cookie
    console.log(tokenE);
    const key = "test";
    const token = decrypt(tokenE, key);
    
    if (!token) {
      // Redirect if no token is found
      router.push('/users'); // Redirect to login page or any other appropriate page
      return;
    }
    console.log(token);
    const secretKey = 'test';
    const decoded = jwt.verify(token, 'test');
    console.log(decoded);
    
  }, []);

  return (
    <div>
      <p>Admin Check Page</p>
    </div>
  );
};```

this is the code, im not sure if await is needed

[shut hornet]

Lots of stuff on Google about making sure your version is up to date, make sure it's a utf8 string, etc

Don't think this is next related at all

[sturdy locust]

No, just coding help with next framework

[vague wave]

I'd suggest doing those checks in middleware since it prevents access to the admin page right away instead of after loading it and running the useEffect. However, you won't be able to run the jsonwebtoken library there since the middleware is running on the edge and the jsonwebtoken library does not support running on the edge but you can use libraries that support running on the edge like jose

Here's a great tutorial on how to properly use authentication with middleware in your Next.js application: https://youtu.be/pmAnWOofqJE

[sturdy locust]

Thanks so much!

[shut hornet]

+1 for jose