Next.js Discord

Discord Forum

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

Answered
American Shorthair posted this in #help-forum
Open in Discord
Original message was deleted.
Answered by ncls.
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](https://www.npmjs.com/package/jsonwebtoken) there since the middleware is running on the edge and the [jsonwebtoken library](https://www.npmjs.com/package/jsonwebtoken) does not support running on the edge but you can use libraries that support running on the edge like [jose](https://www.npmjs.com/package/jose)

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

13 Replies

American Shorthair
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
European sprat
What library for jwt?
American Shorthair
jsonwebtoken
European sprat
So you need to await when verifying?
American Shorthair
const AdminPage = () => {
  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
European sprat
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
@European sprat Don't think this is next related at all
American Shorthair
No, just coding help with next framework
@American Shorthair const AdminPage = () => { 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> ); };
ncls.
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](https://www.npmjs.com/package/jsonwebtoken) there since the middleware is running on the edge and the [jsonwebtoken library](https://www.npmjs.com/package/jsonwebtoken) does not support running on the edge but you can use libraries that support running on the edge like [jose](https://www.npmjs.com/package/jose)

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