JWT (decode/validate) library support

[kosiakMD]

Hello!

Issue

remix Error: Dynamic require of "buffer" is not supported

Inverstigation & solutions

• first error I received was remix Error: Dynamic require of "jsonwebtoken" is not supported
• added to remix.config.cgj -> serverDependenciesToBundle
• then remix Error: Dynamic require of "safe-buffer" is not supported
• also added to config
• at the end I received remix Error: Dynamic require of "buffer" is not supported
• adding this and other dependencies (found in package-lock.json) didn't help

serverDependenciesToBundle: [
    "buffer",
    "safe-buffer",
    "jws",
    "jwa",
    "jsonwebtoken",

• also you can find trying to add Buffer

serverDependenciesToBundle: [
    "buffer",
    "Buffer",
    "safe-buffer",
    "jws",
    "jwa",
    "jsonwebtoken",

• the most interesting thing is that buffer is not in dependencies as it is just ... require('buffer') in npm library safe-buffer with 0 dependencies

Question

How to use NodeJS libraries like buffer on Remix server logic?

As this is a simple case, usually never come an issue, but any of the other libraries could cause the same issue

Additional info

Project structure:

• NX
• Remix (via Rollup yet - migrated from the previous version, but not entirely to Vite) for SSR, Getway to API, and some hidden from client secure/business logic handling (as BFF/middleware/proxy between Client & API)
• NestJs (API)
• React-Native mobile app
• shared libs/modules
• GCP

versions:

"@nx/remix": "^18.0.7",
"@remix-run/css-bundle": "^2.8.1",
"@remix-run/dev": "^2.8.1",
"@remix-run/eslint-config": "^2.8.1",
"@remix-run/router": "^1.15.3",
"@remix-run/testing": "^2.8.1",

TL;TR

Auth logic

Auth is very simple yet - JWT in httpOnly cookies managed by NestJS API (why not by Remix? Because of Single Source of Truth as we have a React-Native mobile app also)

In the case of managing jwt by Nest, Remix should only parse cookies, get token, decode it and validate it:

• reason: render different UI (by e.g. lazy-loading) for different roles

Code Example

export const getRole = async (
  request: LoaderFunctionArgs['request'],
): Promise<RoleEnum> => {
  const { jwtAccessTokenName, sessionSecret } = getEnvConfig<'server'>();
  // Extract token from cookie
  const cookie = request.headers.get('Cookie');
  const token = cookie
    ?.split(';')
    .find((c) => c.trim().startsWith(`${jwtAccessTokenName}=`))
    ?.split('=')[1];
  console.log('Token:', token);
  if (!token) {
    // ...
  }
  // Verify token and get user Role
  const payload = verify(token, sessionSecret);
  return (payload as UserContext).role;

Some not-important details

• Remix and Nest mimic 3 (Nest 4 - 1 plus for mobile app) separate Apps by subdomains (multitenant)
• 1 subdomain = 1 auth role
• 1st stage roles (Public, Admin, Manager) are fully separated
• Nest manages roles separately (module/controller/db) by auth
• Remix (for now) manages subdomains
• User Admin can enter Manager App via admin subdomain & mixed roles