inai-react-sdk

Provide client-side authentication in React apps using the InAI React SDK.

Updated Mar 14, 2026
One-click install
npx skills add https://github.com/InAI-Team/inai-auth-skills --skill inai-react-sdk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: inai-react-sdk
Source: https://github.com/InAI-Team/inai-auth-skills/tree/main/skills/inai-react-sdk
Command: npx skills add https://github.com/InAI-Team/inai-auth-skills --skill inai-react-sdk

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provide client-side authentication UI, hooks, and session management for React apps using InAI Auth, enabling developers to add robust, interactive login flows without duplicating server logic.

Core Features & Use Cases

  • Provider: wrap your app with InAIAuthProvider to share and hydrate auth state across the component tree.
  • Hooks and Components: useAuth, useUser, useSignIn, useSignUp, useSession, and pre-built components like SignIn, UserButton, SignedIn, SignedOut, Protect, and PermissionGate for rapid UI assembly.
  • Real-world Scenarios: add client-side authentication to a React SPA or Astro islands with React islands, including RBAC and MFA support.

Quick Start

Install the @inai-dev/react package and wrap your app with InAIAuthProvider to enable client-side authentication in your React application.

Frequently Asked Questions about inai-react-sdk

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add client-side authentication to a React SPA?▼

Use the InAIAuthProvider to wrap your React app, enabling client-side authentication and session hydration. This approach manages interactive login flows and session state directly in the browser without server duplication.

How do I implement role-based access control and MFA in React?▼

Implement role-based access control and MFA in React using pre-built components like Protect and PermissionGate alongside hooks such as useAuth. This setup handles RBAC rendering and multi-factor authentication flows client-side.

Can I use React authentication hooks in Astro islands?▼

Yes, you can use React authentication hooks in Astro islands. The client-only auth approach relies on the auth_session cookie for hydration, allowing you to apply login flows and session persistence across React islands within Astro pages.

Do I need a specific React version for client-side session management?▼

Yes, you need React version 18 or higher for client-side session management. The authentication SDK requires React >= 18 to properly hydrate auth state using the auth_session cookie and manage UI components.

What is the best way to manage session persistence across React pages?▼

The best way to manage session persistence across React pages is using the useSession hook with the InAIAuthProvider. This maintains client-only auth state via the auth_session cookie during hydration across your application.

Why does client-side authentication require an auth_session cookie?▼

Client-side authentication requires the auth_session cookie to properly hydrate the auth state during initial page load. This ensures the React provider can securely restore user sessions and render protected components without server calls.