@auth-ai/sdk

React SDK for Auth.ai - Easy authentication integration for your React applications.

Installation

npm install @auth-ai/sdk
# or
pnpm add @auth-ai/sdk
# or
yarn add @auth-ai/sdk

Quick Start

1. Wrap your app with AuthProvider

import { AuthProvider } from '@auth-ai/sdk';

function App() {
  return (
    <AuthProvider config={{ baseURL: 'https://api.yourapp.com' }}>
      <YourApp />
    </AuthProvider>
  );
}

2. Use authentication hooks

import { useAuth, ProtectedRoute } from '@auth-ai/sdk';

function Dashboard() {
  const { user, signOut } = useAuth();

  return (
    <ProtectedRoute>
      <div>
        <h1>Welcome, {user?.email}!</h1>
        <button onClick={signOut}>Sign Out</button>
      </div>
    </ProtectedRoute>
  );
}

API Reference

AuthProvider

Wrap your application with this provider to enable authentication.

<AuthProvider
  config={{
    baseURL: 'https://api.yourapp.com',
    credentials: 'include', // optional
  }}
>
  {children}
</AuthProvider>

useAuth()

Access authentication state and methods.

const {
  user,              // Current user object
  session,           // Current session
  isLoading,         // Loading state
  isAuthenticated,   // Boolean auth status
  signIn,            // Sign in function
  signUp,            // Sign up function
  signOut,           // Sign out function
  refreshSession,    // Manually refresh session
} = useAuth();

useUser()

Get current user data.

const user = useUser();

if (user) {
  console.log(user.email, user.role);
}

useOrganization()

Access organization data and methods.

const {
  organization,        // Current active organization
  organizations,       // List of user's organizations
  switchOrganization,  // Switch to different org
  isLoading,
} = useOrganization();

ProtectedRoute

Protect routes that require authentication.

<ProtectedRoute
  fallback={<LoginPage />}     // Optional: custom fallback
  redirectTo="/login"           // Optional: redirect URL
>
  <PrivatePage />
</ProtectedRoute>

Examples

Login Form

import { useAuth } from '@auth-ai/sdk';
import { useState } from 'react';

function LoginForm() {
  const { signIn } = useAuth();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await signIn(email, password);
    } catch (error) {
      console.error('Login failed:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
      />
      <button type="submit">Sign In</button>
    </form>
  );
}

User Profile

import { useUser } from '@auth-ai/sdk';

function UserProfile() {
  const user = useUser();

  if (!user) {
    return <div>Not logged in</div>;
  }

  return (
    <div>
      <h1>{user.name || user.email}</h1>
      <p>Role: {user.role}</p>
      <p>Joined: {new Date(user.createdAt).toLocaleDateString()}</p>
    </div>
  );
}

License

MIT