Kinde · Component

KindeProvider

KindeProvider configures the Kinde React SDK and supplies authentication context to the application tree. Set the client, domain, redirect URIs, and optionally an API audience or scope.

Since: v5

How it works

KindeProvider initializes the Kinde React SDK and supplies its authentication context to descendant components. Configure it with the client, domain, and redirect values, then render the application inside it.

Syntax

<KindeProvider clientId="..." domain="..." logoutUri="..." redirectUri="...">{children}</KindeProvider>

Parameters

Name	Type	Description
`clientId`	`string`	Kinde application client identifier.
`domain`	`string`	Kinde environment domain.
`logoutUri`	`string`	URI to which the user is sent after logout.
`redirectUri`	`string`	URI to which the user is sent after authentication.
`audience`	`string`	Optional registered API identifier requested as the token audience.
`scope`	`string`	Optional OAuth scope override.

Returns

A React provider that supplies Kinde authentication context to its descendants.

Key points

Import KindeProvider from the React SDK and place the application tree inside it.
The component exposes Kinde's internal authentication state through React context.
The documented SDK targets React 18 and later.
Use audience to identify the API or other resource intended to receive the access token.
Passing audience requests that value in the token's audience claim.
Use scope when the provider's default OAuth permissions are not sufficient.

Common mistakes

The current React SDK requires React 18 or newer.
A custom scope replaces the provider's default scope, so specify the complete scope you need.

Example: Wrap a React application with KindeProvider

import { KindeProvider } from '@kinde-oss/kinde-auth-react';

export default function App() {
  return (
    <KindeProvider
      clientId={import.meta.env.VITE_KINDE_CLIENT_ID}
      domain={import.meta.env.VITE_KINDE_DOMAIN}
      logoutUri={window.location.origin}
      redirectUri={window.location.origin}
    >
      <Routes />
    </KindeProvider>
  );
}

Wrap the application tree so the React SDK can provide authentication state and functionality through context.

When to use it

Application authentication

Add Kinde authentication to a React single-page application.

API audience configuration

Request tokens intended for a registered backend API.

Scope customization

Control the OAuth permissions requested during sign-in.

Interview questions

QWhat role does KindeProvider play in a React application?

KindeProvider is a React Context Provider that maintains Kinde's internal state. It should wrap the application components that need access to the SDK's authentication capabilities.

Follow-up: Why must the provider be above consumers? React context values are available only to descendants, so placing it lower leaves other components without the Kinde context.

QWhich core configuration values are used in the basic setup?

The provider accepts clientId, domain, logoutUri, and redirectUri to configure the client and its OAuth redirect behavior. The application is rendered as a child of the provider.

Follow-up: How would you request an API-specific access token? Register the API, then pass its identifier through the audience prop.

QHow do you configure an API audience?

The audience identifies the intended recipient of an access token, such as an application's API. Pass the registered API identifier as the audience prop when initializing KindeProvider.

Follow-up: What if the requested permissions differ from the defaults? Supply the required complete value through the scope prop.

React SDK
Kinde Auth
audience
scope

Source: React SDK - Kinde docs. Checked 2026-10-15.