Decryption JWT in Client | Next.js | Page 1

pliant sequoia Feb 21, 2025, 5:58 AM

#

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;
};

lavish turretBOT Feb 21, 2025, 5:58 AM

#

Hi @pliant sequoia. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To address your question about decrypting JWTs on the client side in a Next.js application, it's important to note that decrypting JWTs on the client is generally not recommended for security reasons. The secret key used for signing and verifying JWTs should be kept secure on the server. However, there are a few approaches you can consider:

API Route for Decryption:
The safest approach is to create an API route on the server to handle JWT verification. This keeps your secret key secure on the server. You can make a request to this API route from the client when you need to verify a token.

Next.js Documentation provides information on how to create API routes.
Client-side JWT Parsing:
If you only need to read the payload of the JWT without verifying its signature, you can parse the JWT on the client side. This doesn't verify the integrity of the token but allows you to access the payload data.

You can use a library like jwt-decode for this purpose. However, remember that this approach doesn't verify the token's authenticity.
Use a Session Management Library:
Consider using a session management library that handles JWT securely. For example, NextAuth.js provides secure authentication for Next.js apps and handles JWT management.

Here's an example of how you might create an API route for JWT verification:

// pages/api/verify-token.ts
import { NextApiRequest, NextApiResponse } from 'next'
import { jwtVerify } from 'jose'

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

#

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
if (req.method === 'POST') {
try {
const { token } = req.body
const { payload } = await jwtVerify(token, key, { algorithms: ['HS256'] })
res.status(200).json({ payload })
} catch (error) {
res.status(401).json({ error: 'Invalid token' })
}
} else {
res.setHeader('Allow', ['POST'])
res.status(405).end(Method ${req.method} Not Allowed)
}
}


Then, on the client side, you can make a request to this API route to verify the token:

```javascript
async function verifyToken(token) {
  const response = await fetch('/api/verify-token', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ token }),
  })
  if (response.ok) {
    const { payload } = await response.json()
    return payload
  } else {
    throw new Error('Token verification failed')
  }
}

Remember to always prioritize security when dealing with JWTs and sensitive data. The server-side approach is generally the most secure method for handling JWT verification.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@pliant sequoia Kapa.ai is still learning and improving, please let me know how I did by reacting below.

pliant sequoia Feb 21, 2025, 6:00 AM

#

@lavish turret acually I don't to decrypt JWT in client I need to decrypted JWT in client. Now what should I do?

lavish turretBOT Feb 21, 2025, 6:00 AM

#

Let me check the knowledge base for you again. Give me one moment! :books:

#

I apologize for the confusion in my previous response. Let me clarify based on your new question about decrypting JWT on the client side.

Decrypting JWTs on the client side is generally not recommended for security reasons. The secret key used for encryption and decryption should be kept secure on the server. However, if you absolutely need to decrypt a JWT on the client side, here are a few considerations:

Security Risk: Decrypting JWTs on the client exposes your secret key, which is a significant security risk.
Alternative Approach: Instead of decrypting on the client, consider using an API route on the server to handle decryption. This keeps your secret key secure.
Client-side Libraries: If you must decrypt on the client, you could use libraries like jose or jsrsasign, but this is not recommended for production use due to security concerns.

Given the security implications, the best practice is to keep decryption on the server side. You could create an API route for decryption, similar to the verification example I provided earlier:

// pages/api/decrypt-token.ts
import { NextApiRequest, NextApiResponse } from 'next'
import { jwtVerify } from 'jose'

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

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    try {
      const { token } = req.body
      const { payload } = await jwtVerify(token, key, { algorithms: ['HS256'] })
      res.status(200).json({ decryptedData: payload })
    } catch (error) {
      res.status(401).json({ error: 'Decryption failed' })
    }
  } else {
    res.setHeader('Allow', ['POST'])
    res.status(405).end(`Method ${req.method} Not Allowed`)
  }
}

#

Then, on the client side, you would make a request to this API route to decrypt the token:

async function decryptToken(token) {
  const response = await fetch('/api/decrypt-token', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ token }),
  })
  if (response.ok) {
    const { decryptedData } = await response.json()
    return decryptedData
  } else {
    throw new Error('Token decryption failed')
  }
}

This approach keeps your secret key secure on the server while allowing you to access the decrypted data on the client.

Remember, the most secure approach is to handle sensitive operations like JWT decryption on the server side. If you're dealing with sensitive data, it's crucial to maintain proper security practices.

#Decryption JWT in Client

Remember to always prioritize security when dealing with JWTs and sensitive data. The server-side approach is generally the most secure method for handling JWT verification.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Next.js Documentation provides more information on creating and using API routes for such server-side operations.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: