Hey folks,
Running into a bit of a wall with auth validation in our React frontend. We’re using the implicit grant flow for a customer-facing portal, so we’re getting the access token directly in the URL fragment. The token generation works fine, and I can see the JWT payload if I decode it locally.
The problem is verifying that the token is actually valid and hasn’t been tampered with before we let the user into the app. I know Genesys Cloud uses RS256, so I’m trying to fetch the public keys from the JWKS endpoint to verify the signature client-side.
Here’s the rough approach I’m taking with jose:
import { jwtVerify, importSPKI } from 'jose';
const JWKS_URL = 'https://api.mypurecloud.com/api/v2/oauth/jwks';
async function validateToken(token) {
const response = await fetch(JWKS_URL);
const jwks = await response.json();
// Find the right key based on kid in token header
const header = JSON.parse(atob(token.split('.')[1])); // Rough decode for demo
const key = jwks.keys.find(k => k.kid === header.kid);
const publicKey = await importSPKI(key.x, 'RS256');
try {
const verified = await jwtVerify(token, publicKey);
return verified.payload;
} catch (err) {
console.error('Token invalid', err);
return null;
}
}
It’s bombing out on the importSPKI step. The x property in the JWKS response is just the modulus, but importSPKI expects the full SPKI format. I’m not sure how to reconstruct the public key properly from the modulus and exponent fields in the JWKS response without pulling in a heavy crypto library that doesn’t play nice with our build.
Is there a cleaner way to handle this in a browser environment? Or is it better to just call a backend endpoint to validate the token instead of doing it in the React app? We want to avoid the extra latency if possible, but security is obviously important.
Any pointers appreciated.