The React SDK is the primary way browser-resident IntelliAuth applications integrate. It wraps the OAuth flows, the MFA prompts, the session storage, and the silent refresh, and exposes them as React-idiomatic primitives — a provider component and a single hook.
If you are building a SPA or a server-rendered React app, this is what you ship with. If you are building a Node backend, look at the Node SDK overview instead.
Install
Section titled “Install”pnpm add @intelliauth/react-sdk# or: npm install @intelliauth/react-sdk# or: yarn add @intelliauth/react-sdkThe package targets React 18+ and ships TypeScript types out of the box. No additional @types/ install is needed.
The two things you'll use most
Section titled “The two things you'll use most”| Surface | Role |
|---|---|
<IntelliAuthProvider /> | Wraps your app. Holds the session, runs the silent-refresh loop, exposes context to consumers. You instantiate this once at the root. |
useIntelliAuth() | The hook. Returns the user, the loading state, the error state, and 25+ methods (loginWithRedirect, logout, getAccessToken, etc.). Used everywhere downstream. |
A typical app uses no other SDK surface for the basic flows.
The other surfaces
Section titled “The other surfaces”| Surface | When to reach for it |
|---|---|
AuthClient | The underlying class the provider uses. Reach for it if you need IntelliAuth in a non-React context inside the same project — a service worker, a Web Worker, a legacy non-React component. |
IntelliAuthError + IntelliAuthErrorCode | The error model. Catch + branch on error codes; show appropriate UI. |
attachFingerprint + visitor helpers | Browser fingerprinting helpers used for risk-based authentication signals. |
What the SDK does behind the scenes
Section titled “What the SDK does behind the scenes”You do not need to know this to use the SDK. It is useful to know when debugging:
- Bootstrap. On mount, the provider checks for an existing session (silent auth via the IntelliAuth tenant's session cookie). If found, it fetches the user profile and primes the context.
- Login redirect.
loginWithRedirect()generates the PKCEcode_verifier, stashes it insessionStorage, generates astateparameter, and redirects the browser to/oauth2/authorize. - Callback handling. When the browser comes back to the registered callback URL, the SDK reads the
codeandstatefrom the URL, validatesstate, exchanges the code at/oauth2/token, and stores the tokens. - Silent refresh. A background timer rotates the refresh token roughly 60 seconds before the access token's
exp. If rotation fails (refresh token expired or revoked), the SDK clears the session and emits an error event. - Tab synchronisation. The SDK uses
BroadcastChannelto share session state across browser tabs. A login in one tab is visible to all others within a few hundred milliseconds.
What the SDK does not do
Section titled “What the SDK does not do”- Talk to your application's backend API. The SDK ships tokens; your code attaches them to fetch / axios / TanStack Query calls.
- Render UI for the IntelliAuth login surface. The login page lives on the IntelliAuth tenant URL; the browser is redirected there.
- Store user-facing application state. Your app's state (form values, UI preferences, etc.) lives in your own store.
Stability
Section titled “Stability”The React SDK follows semver. Major versions ship breaking changes; minor versions add backwards-compatible features; patch versions are bugfixes. Reach for the latest tag in production unless your platform has a stricter pin policy.
What's next
Section titled “What's next”Wire it up — start with the Quickstart — React. Once the basics work, the per-surface reference topics above are the reading order for deeper customisation.