Display user profile claims
Read identity data such as given_name from an ID token.
Kinde · Function
getClaim
getClaim asynchronously retrieves one named claim from the current access or ID token. It reads the access token by default, or the ID token when passed idToken.
How it works
Call getClaim with a claim name to retrieve that claim from the current session's token. It checks the access token by default; pass idToken as the second argument when the claim should come from the ID token, and await the result because the helper is asynchronous.
Syntax
getClaim(claim: string, tokenKey?: "accessToken" | "idToken")Parameters
| Name | Type | Description |
|---|---|---|
claim | string | Name of the claim to retrieve. |
tokenKey | "accessToken" | "idToken" (optional) | Token source; either accessToken or idToken. Defaults to accessToken. |
Returns
A promise resolving to an object containing the selected claim's name and value.
Key points
- The helper can inspect claims from either of the two supported token types.
- Omitting the token selector makes getClaim read from the access token.
- The function returns one selected claim rather than the complete token claims set.
- The React API accepts a string claim key and an optional camelCase token selector.
Common mistakes
- Use camelCase token names such as idToken; the older id_token spelling is no longer the documented form for this React API.
Example: Read a claim from the ID token
const { getClaim } = useKindeAuth();
const claim = await getClaim("given_name", "idToken");
console.log(claim);Reads the given_name claim from the ID token and logs the returned claim object.
When to use it
Check token audience claims
Inspect authorization data such as aud from the access token.
Use session claims in React
Read a token claim after authentication in a React component.
Interview questions
QWhat does getClaim do, and which token does it use by default?
getClaim retrieves one named claim from an access or ID token. The first argument identifies the claim, while the optional second argument selects the token; accessToken is the default.
Follow-up: How would you read a claim from the ID token? Pass the claim name and idToken, then await the returned value.
QHow should a caller handle the result of getClaim?
The method is asynchronous, so callers should await it. The result is an object containing the claim name and its value, such as a scalar or an array.
Follow-up: Why might the value be an array? Claims such as aud can contain multiple values, so consumers should not assume every claim is a string.
QHow is getClaim used in a React component?
Use useKindeAuth to obtain getClaim inside a React component, then call it with the desired claim key. Supplying idToken reads from the ID token instead of the default access token.
Follow-up: How could you retrieve every claim instead? Use the related getClaims helper, optionally passing idToken for the ID token.
Related
useKindeAuthgetClaims