React SDK

The Asgardeo React SDK (@asgardeo/react) provides a comprehensive set of components, hooks, and utilities to integrate Asgardeo authentication and user management into your React applications.

Installation

Install the Asgardeo React SDK using your preferred package manager:

npm

npm install @asgardeo/react

Yarn

yarn add @asgardeo/react

pnpm

pnpm add @asgardeo/react

Bun

bun add @asgardeo/react

Getting Started

To get started quickly, check out our React Quickstart Guide for step-by-step instructions.

Features

Contexts

The SDK provides a powerful context provider that manages authentication state across your application.

• <AsgardeoProvider /> - Root provider component that wraps your application and manages authentication state

Components

Pre-built, customizable components for common authentication flows and user management.

Action Components

• <SignInButton /> - Trigger sign-in flow
• <SignOutButton /> - Sign out the current user
• <SignUpButton /> - Trigger sign-up flow

Control Components

• <SignedIn /> - Conditionally render content for authenticated users
• <SignedOut /> - Conditionally render content for unauthenticated users
• <Loading /> - Display loading state during authentication

User Self-care Components

• <UserDropdown /> - User menu with profile and settings
• <UserProfile /> - Complete user profile management interface
• <User /> - Display user information

Organization Components (B2B)

• <CreateOrganization /> - Create new organizations
• <OrganizationProfile /> - Manage organization settings
• <OrganizationSwitcher /> - Switch between organizations
• <OrganizationList /> - List user's organizations
• <Organization /> - Display organization information

Hooks

React hooks for programmatic access to authentication and user data.

• useAsgardeo() - Access the main Asgardeo SDK instance

Customization

All components in the Asgardeo 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