| title | React SDK Overview |
|---|---|
| sidebar_position | 1 |
| sidebar_label | Overview |
| description | React SDK for seamless authentication integration |
The React SDK (@thunderid/react) provides a comprehensive set of components, hooks, and utilities to integrate authentication and user management into your React applications.
Install the React SDK using your preferred package manager:
npm install @thunderid/react yarn add @thunderid/react pnpm add @thunderid/react bun add @thunderid/reactTo get started quickly, check out our React Quickstart Guide for step-by-step instructions.
:::warning Use the redirect-based sign-in flow
Browser SPAs should sign in using the redirect-based OAuth2 authorization_code + PKCE flow. Use
the <SignInButton /> component.
Initiating a sign-in flow directly in the browser — the embedded <SignIn /> component or
useThunderID().signIn({ applicationId }) used standalone — is not supported for browser SPAs.
See
Register an application.
:::
The SDK provides a powerful context provider that manages authentication state across your application.
<ThunderIDProvider />- Root provider component that wraps your application and manages authentication state
Pre-built, customizable components for common authentication flows and user management.
<SignInButton />- Trigger sign-in flow<SignOutButton />- Sign out the current user<SignUpButton />- Trigger sign-up flow
<SignedIn />- Conditionally render content for authenticated users<SignedOut />- Conditionally render content for unauthenticated users<Loading />- Display loading state during authentication
<UserDropdown />- User menu with profile and settings<UserProfile />- Complete user profile management interface<User />- Display user information
React hooks for programmatic access to authentication and user data.
useThunderID()- Access the main SDK instance
All components in the React SDK are fully customizable. You can:
- Override default styles using CSS classes or inline styles
- Customize component behavior through props
- Build custom components using the provided hooks
- Extend functionality with middleware and plugins