Read authorized-user data
A component needs to display information about the signed-in person.
Kinde · Hook
useKindeAuth
useKindeAuth provides Kinde authentication data inside a component. Use it to read authorized-user information or obtain an access token for protected API requests.
How it works
useKindeAuth is a React helper for accessing Kinde authentication data from a component. Destructure the authentication operation or data you need, such as getAccessToken or getUser, and use it within the component.
Syntax
const { getAccessToken } = useKindeAuth();Returns
A Kinde authentication helper object; the page documents using it to access authorized-user Auth data and destructure getAccessToken.
Key points
- Call the hook from a component when you need the current authorized user's Kinde authentication data.
- The documented helper name is useKindeAuth.
- Destructure getAccessToken from the hook when a protected API request needs a Kinde access token.
- Await getAccessToken before using the token in an outgoing request.
- Send the obtained token in the HTTP Authorization header with the Bearer scheme.
Common mistakes
- The hook provides authorized-user data; handle the unauthenticated state when the returned user is unavailable.
Example: Read authorized user data
import { useKindeAuth } from "@kindejs/react-core";
export default function Profile() {
const { getUser } = useKindeAuth();
const user = getUser();
return <p>{user?.given_name ?? "Not signed in"}</p>;
}Reads the current authorized user's Kinde Auth data in a React component.
When to use it
Attach an access token to an API request
A browser-side component calls a protected backend endpoint.
Interview questions
QWhat is useKindeAuth used for?
useKindeAuth is a React helper that exposes Kinde authentication data to components. It can be used to obtain authentication-related values or operations, such as the access token or current user data.
Follow-up: How would you use it for an API request? Obtain the access token, then send it in the request's Bearer authorization header.
QHow can useKindeAuth authenticate a call to your API?
Destructure getAccessToken from the hook and await it before making the request. Put the resulting token in the Authorization header using the Bearer scheme.
Follow-up: What should the API do with that token? Validate the bearer access token before serving the protected request.
QWhat should a component consider when reading user data?
The hook is used inside a component to retrieve Kinde Auth data for the currently authorized user. A component should account for the possibility that no authenticated user data is available.
Follow-up: How can the UI represent that state? Render an anonymous or sign-in state whenever the user value is absent.
Related
getAccessTokenKinde Auth dataKindeProvider