Hey everyone! 👋

I’m working on a Next.js app where I encrypt data using jose on the server with SignJWT, but I need to decrypt the JWT on the client. Since jwtVerify requires a secret key, it only works on the server.

What’s the best approach to handle decryption on the client? Should I expose an API route for decryption, or is there a way to securely verify JWTs in the browser?

Here’s my server-side encryption and decryption code:

"use server"

import { jwtVerify, SignJWT } from 'jose';

const SECRET_KEY = String(process.env.SECRET_KEY);
const key = new TextEncoder().encode(SECRET_KEY);

export const encryptData = async (data: any) => {
  return await new SignJWT(data)
    .setProtectedHeader({ alg: 'HS256' })
    .setIssuedAt()
    .setExpirationTime('15d')
    .sign(key);
};

export const decryptData = async <T>(input: string): Promise<T> => {
  const { payload } = await jwtVerify(input, key, { algorithms: ['HS256'] });
  return payload as T;
};