We’re building a React frontend that uses the implicit grant flow to handle authentication. The app receives the access_token as a fragment in the redirect URI after the user logs in. We need to validate this token client-side before making any API calls to /api/v2/... endpoints.
The issue is that the token is a JWT, and we want to verify its signature and claims (specifically exp and iss) without sending it back to our backend for every request. We’re using @auth0/auth0-react for now, but that’s overkill since we’re not using Auth0.
Here’s the relevant snippet from our auth service:
import { jwtDecode } from 'jwt-decode';
export const validateToken = (token) => {
try {
const decoded = jwtDecode(token);
const currentTime = Math.floor(Date.now() / 1000);
if (decoded.exp < currentTime) {
throw new Error('Token expired');
}
// Check issuer - Genesys Cloud
if (decoded.iss !== 'https://api.mypurecloud.com') {
throw new Error('Invalid issuer');
}
return decoded;
} catch (error) {
console.error('Token validation failed:', error);
return null;
}
};
The problem is that jwtDecode doesn’t verify the signature. It just decodes it. We’re worried about tampered tokens. Genesys Cloud docs mention using the JWKS endpoint at https://api.mypurecloud.com/.well-known/jwks.json, but I’m not sure how to fetch that and verify the signature in the browser securely.
Is there a standard way to do this? We’ve tried using jose library, but it’s heavy for the client. We’re running into performance issues with large bundles.
Also, the token refresh logic is getting messy. We’re storing the token in memory, but if the user refreshes the page, we lose it. We’re considering using localStorage, but I know that’s not secure.
What’s the best practice here? We’re using react-router-dom v6 and the Genesys Cloud Platform API.
Thanks.