React SDK reference
Section | Description |
---|---|
Installation | How to install the React SDK |
Basic Setup | Setting up the RowndProvider |
Authentication States | Four possible auth states and handling |
User Management | Working with user data and profiles |
Sign In Options | Customizing the sign-in experience |
HTML Hooks | Using declarative data attributes |
Type Definitions | TypeScript interfaces and types |
Best Practices | Recommended patterns and approaches |
Advanced Features | Advanced SDK capabilities |
API Integration | Making authenticated API calls |
Account Management | Managing user accounts |
npm install @rownd/react
or yarn add @rownd/react
.
getAccessToken()
which will fetch your token. Rownd’s SDK automatically checks the token and do token refreshes. Rownd takes care of the UI for your app as well.Property | Type | Required | Description |
---|---|---|---|
appKey | string | Yes | The application key generated in the Rownd dashboard. This uniquely identifies your application. |
postLoginRedirect | string | No | URL where users will be redirected after successful sign-in. If not provided, users stay on the current page. |
postRegistrationRedirect | string | No | URL where new users will be redirected after registration. Useful for onboarding flows. |
rootOrigin | string | No | Root domain for multi-domain setups (e.g., “https://yourdomain.com”). Used when your app spans multiple subdomains. |
useRownd
hook is your primary interface for accessing authentication state and user data. It provides a comprehensive set of properties and methods:
Property | Type | Description | Usage Example |
---|---|---|---|
is_initializing | boolean | Indicates if Rownd is still loading. Always check this before making auth-dependent decisions. | if (is_initializing) return <Loading /> |
is_authenticated | boolean | Whether the user is currently signed in. | if (is_authenticated) showDashboard() |
access_token | string | The current JWT access token. Updates automatically when refreshed. | headers: { Authorization: Bearer ${access_token} } |
user.data | object | The user’s profile data. Contains all user fields. | const { first_name, email } = user.data |
user.is_loading | boolean | Whether user data is being loaded/updated | if (user.is_loading) showSpinner() |
Method | Description | Parameters | Return Type |
---|---|---|---|
requestSignIn() | Triggers the sign-in flow | { auto_sign_in?: boolean, identifier?: string, method?: string } | void |
signOut() | Signs out the current user | None | void |
getAccessToken() | Gets the current access token | { waitForToken?: boolean } | Promise<string> |
Method | Description | Parameters | Return Type |
---|---|---|---|
setUser() | Updates multiple user fields | Record<string, any> | Promise<void> |
setUserValue() | Updates a single user field | (field: string, value: any) | Promise<void> |
manageAccount() | Opens account management UI | None | void |
Property | Type | Description |
---|---|---|
user.data() | object | User’s profile data including custom fields |
user.data.{data-type} | Varies | User’s profile data including custom fields; for example; first_name |
user.groups | string[] | Groups the user belongs to |
user.get()
will depend on your application’s configuration in the Rownd dashboard. The example above shows common fields, but you can add custom fields as needed for your application.
Property | Type | Description |
---|---|---|
auth.access_token | string | Current JWT access token |
auth.app_id | string | ID of the current application |
auth.is_authenticated | boolean | Whether user is authenticated |
auth.is_verified_user | boolean | Whether user has verified credentials |
auth.auth_level | string | Current authentication level |
is_initializing
and is_authenticated
:
requestSignIn
method accepts several configuration options to customize the sign-in experience:
Attribute | Description | Example |
---|---|---|
data-rownd-sign-in-trigger | Creates a clickable sign-in trigger | <button data-rownd-sign-in-trigger>Sign In</button> |
data-rownd-authenticated-text | Text to show when authenticated | data-rownd-authenticated-text="Sign Out" |
data-rownd-authenticated-redirect-url | URL to redirect to after auth | data-rownd-authenticated-redirect-url="/dashboard" |
data-rownd-request-sign-in | Auto-display sign-in modal (closable) | <div data-rownd-request-sign-in /> |
data-rownd-require-sign-in | Force sign-in modal (non-closable) | <div data-rownd-require-sign-in /> |
data-rownd-default-user-identifier | Pre-fill email/phone | data-rownd-default-user-identifier="user@example.com" |
data-rownd-field-interpolate | Template user data | <div data-rownd-field-interpolate>Hello {{first_name}}!</div> |
data-rownd-field-mapping | Display specific user field | <span data-rownd-field-mapping="email" /> |
manageAccount()
function provides a pre-built, customizable account management interface that saves significant development time. This Rownd-generated system handles common user management tasks out of the box.
Feature | Description |
---|---|
Profile Editing | Users can update their basic information (name, email, etc.) |
Email Verification | Handles email verification status and re-verification |
Password Management | Change password and set up passwordless options |
Connected Accounts | Manage social logins and connected services |
Security Settings | 2FA setup, passkey management, session control |
Data Access | View and download personal data |
Account Deletion | Self-service account removal option |
manageAccount()
, you get a complete user account management system without building and maintaining custom interfaces. This significantly reduces development time while providing a consistent, secure, and feature-rich experience for your users.
user.data
when using the hook{{ first_name }}
not {{ user.data.first_name }}
)<RowndProvider>
context