Display authenticated-user data
A client-rendered account or dashboard view needs the signed-in user’s Kinde context.
Kinde · Hook
useKindeBrowserClient
A client-component hook for reading an authorized user’s Kinde authentication data in Next.js. It also provides helpers for organizations, permissions, and refreshing data.
How it works
useKindeBrowserClient is a client-side hook for accessing an authorized user’s Kinde authentication data in Next.js. It exposes helpers such as organization access, permission retrieval, and data refresh; the component using it must run on the client.
Syntax
const { organization, getOrganization, getPermissions, refreshData } = useKindeBrowserClient();Returns
An object containing Kinde browser-client data and helper functions, including organization, getOrganization, getPermissions, and refreshData.
Key points
- Use the hook inside a client component to access Kinde authentication data for the signed-in user.
- The returned API includes organization state and a getOrganization helper for organization access.
- Client components are required when an interaction needs to refresh data on demand.
- The refreshData helper performs asynchronous server-side work and should be handled accordingly.
Common mistakes
- Use the hook only with Next.js 14 or later; older versions produce a warning.
- Treat refreshData as asynchronous and await it when requesting immediately updated data.
- On-demand refresh must be initiated by a client component because of Next.js limitations.
Example: Read the current organization
"use client";
import { useKindeBrowserClient } from "@kinde-oss/kinde-auth-nextjs";
export default function OrganizationName() {
const { organization, getOrganization } = useKindeBrowserClient();
const currentOrganization = getOrganization();
return <p>{currentOrganization?.name ?? organization?.name ?? "No organization"}</p>;
}A client component obtains organization data from the browser client and renders its name.
When to use it
Read organization context
A workspace-aware interface needs to identify or render the user’s current organization.
Check permissions
An admin or feature-gating interface needs current permission information.
Refresh authorization data
A client interaction changes authorization-related data and the UI must obtain current values.
Interview questions
QWhat is useKindeBrowserClient used for?
It is a browser-side hook from the Kinde Next.js SDK. A client component calls it to access authentication data for an authorized user and helpers such as organization retrieval.
Follow-up: What constraint applies to its use? The component must be a client component, and the utility is supported only in Next.js 14 and above.
QHow can a component read the current organization?
The hook returns an object that can include organization data and methods such as getOrganization. Calling getOrganization lets the component obtain the organization associated with the current user.
Follow-up: How would you avoid stale data after a change? Use the exposed refreshData operation and await it before reading the updated values.
QHow should refreshData be handled?
refreshData is asynchronous, so callers should await it. This gives the component immediate access to the latest data after refreshing.
Follow-up: Where must this refresh be triggered? From a client component, because Next.js does not permit on-demand refreshing from a server component.
Related
useKindeAuthgetOrganizationgetPermissionsrefreshData