Using jose instead of jsonwebtoken with Clerk.dev - reactjs

Question

I'm trying to verify a JWT token in a middleware on Next.js (v12.3.2) but am getting errors with jsonwebtoken (following the docs here: https://clerk.dev/docs/request-authentication/validate-session-tokens) because it requires a Node environment.
I've tried using jose instead with the CLERK_JWT_KEY for Clerk.dev but I keep getting a [Error: Key info doesn't have required parameters] error. For reference, this is what my code looks like:
export const decodeAndVerifyToken = async (
getToken: ServerGetToken
): Promise<JWTPayload | undefined> => {
// initialize a variable for the token
let token: string | null;
try {
// get the token using metadata template, which should return
// a 'publicMetadata' object containing an 'isAdmin' value
token = await getToken({ template: "metadata" });
} catch (err) {
// if we had an error getting the token, return undefined
return undefined;
}
// if no token is found, then short-circuit to undefined
if (!token) {
return undefined;
}
// split the jwt key to 64-bit lines
const splitPem = process.env.CLERK_JWT_KEY?.match(/.{1,64}/g) ?? [];
// combine into a public key format
const publicKey =
"-----BEGIN PUBLIC KEY-----\n" +
splitPem.join("\n") +
"\n-----END PUBLIC KEY-----";
//
const test = await importSPKI(publicKey, "ES256").catch((err) =>
console.log(err)
);
};
I've also tried directly calling const decoded = await jwtVerify(token, publicKey); but that also produces errors.
Anyone know how to address?

Answer 1

As per the example key in clerk.dev these are RSA keys you're importing. That key is not a valid key for ES256 that you pass to importSPKI.
I suspect the algorithm will be RS256 but to be sure inspect the token's header to confirm.
Looking at the docs they do have a JWKs endpoint so this might be a wholelot easier for you.
import * as jose from 'jose'
const JWKS = jose.createRemoteJWKSet(new URL('https://<YOUR_FRONTEND_API>/.well-known/jwks.json'))
const { payload, protectedHeader } = await jose.jwtVerify(token, JWKS)

Answer 2

jsonwebtoken doesn't work in middleware because it depends on crypto which is not available on edge functions.
Like you suggested, you can use jose. Make sure to use the key marked "PEM public key" from the Clerk dashboard (hidden under the advanced menu - it should start with -----BEGIN PUBLIC KEY-----).
Then, just pass it is to importSPKI as follows:
const { userId, getToken } = getAuth(request)
const token = await getToken({ template: "candor" })
const publicKey = await jose.importSPKI(process.env.CLERK_PUBLIC_KEY, "RS256")
const { payload } = await jose.jwtVerify(token, publicKey)