Validating Genesys Cloud JWTs locally in React after Implicit Grant flow

Hey folks,

We’ve been pushing to move our internal agent dashboard off the basic OAuth client credentials flow and onto an implicit grant setup within our React frontend. The goal is to let agents log in directly through the app without bouncing through a backend proxy for every token refresh. We got the authorization code flow working fine on the server side, but now we’re trying to handle the token validation client-side before making any API calls to /api/v2/.*

The issue is that the JWT we get back from the Genesys Cloud auth server seems to skip some of the standard validation steps I’m used to. I’m using jwt-decode to parse the payload, but I’m not sure if I should be verifying the signature against the JWKS endpoint or just trusting the token since it came directly from the Genesys domain.

Here’s what the token payload looks like after decoding:

{
 "iss": "https://api.mypurecloud.com",
 "sub": "agent-id-123",
 "aud": "https://api.mypurecloud.com",
 "exp": 1678886400,
 "iat": 1678882800
}

When I try to hit /api/v2/users/me with this token in the Authorization: Bearer <token> header, it works. But I want to make sure the token hasn’t been tampered with or expired before we even try. I’ve seen references to checking the alg header, but I’m not seeing a clear example of how to fetch the public keys from the Genesys JWKS endpoint and verify the signature in a browser environment.

Is there a standard way to do this in React? Or are we over-engineering it and should just rely on the 401 responses from the API to handle invalid tokens? We’re trying to avoid unnecessary round trips to the server for validation if possible.

Any pointers on the best practice here would be appreciated. We’re currently on the US-East region if that matters for the endpoint URLs.