NextJS 14 with JWT and Jose fails on production

[neu5]

Link to the code that reproduces this issue

https://github.com/neu5/nextjs-form

To Reproduce

It works locally so to really reproduce it you need to deploy it on production

1. download the repo
2. create an user
3. try to log in at /login

Current vs. Expected behavior

It should work on production the same way it works locally

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.6.0: Fri Sep 15 13:41:30 PDT 2023; root:xnu-8796.141.3.700.8~1/RELEASE_ARM64_T8103
Binaries:
  Node: 18.17.1
  npm: 9.6.7
  Yarn: 1.22.19
  pnpm: N/A
Relevant Packages:
  next: 14.1.4
  eslint-config-next: 14.0.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Middleware / Edge (API routes, runtime)

Which stage(s) are affected? (Select all that apply)

Vercel (Deployed)

Additional context

I was implementing the JWT based on this video
https://www.youtube.com/watch?v=DJvM2lSPn6w

Trying tu use SignJWT from jose package on production results in 500 HTTP error on Vercel hosting
500: INTERNAL_SERVER_ERROR
Code: EDGE_FUNCTION_INVOCATION_FAILED
ID: arn1::s7gbf-1711160443550-1c66d8f156d1

And the logs says
Error: Imported HMAC key length (0) must be a non-zero value up to 7 bits less than, and no greater than, the bit length of the raw key data (0).

[balazsorban44]

Hi, the repro/issue description and the video don't seem to match up. I'm unable to reproduce the issue. SignJWT is not present in your codebase, and next-auth doesn't use it either. Could you create a proper/minimal reproduction? 🙏

If configured correctly, next-auth should work in production/deployed to Vercel.

See: https://next-auth-example.vercel.app
Source: https://github.com/nextauthjs/next-auth/tree/main/apps/examples/nextjs

From the looks of it, you might be missing the secret environment variable in production.

Edit: This doesn't seem like a Next.js bug, so transferring to discussions.

[neu5]

Hi @balazsorban44,
Thank you for your response!

Sorry for the mess, I needed to push forward with the project so I made quick fix and get rid of the jose JWT but I've created branch with this issue
https://github.com/neu5/nextjs-form/tree/feat/prevent-editing-group-if-its-disabled

As for the missing secret what I can say - it's there

But, I've added again the same the environment variable and it looks like it's working this time.
I'll check tomorrow with the current codebase if that was the issue.

[balazsorban44]

Hmm. The linked branch still uses next-auth, which should not show the originally reported error, as it is not using the mentioned jose method.

Update: I saw https://github.com/neu5/nextjs-form/blob/feat/prevent-editing-group-if-its-disabled/app/lib/session.ts

next-auth takes care of this for you already. 🤔

[neu5]

To make it clear, first I’ve followed the next js tutorial
https://nextjs.org/learn
And during the development I faced the issue that I needed to add more informations about the logged user, eg. ‘role’.
So I decided to add custom JWT cookie and I followed the YouTube tutorial linked before.
I have the requirement to have users but I can’t use any providers such as google or GitHub.
I hope that makes sense to you. I’m new to the nextjs so it’s possible that I’m trying to solve this in terrible manner.