@authflow/sdk

AuthFlow SDK for easy authentication integration in your applications.

Installation

npm install @authflow/sdk

Usage

1. Wrap your app with AuthProvider

import { AuthProvider } from '@authflow/sdk';

function App() {
  return (
    <AuthProvider
      config={{
        apiKey: 'your-api-key-here',
        baseUrl: 'https://auth.yourdomain.com', // Optional, defaults to localhost
      }}
    >
      {/* Your app */}
    </AuthProvider>
  );
}

2. Use authentication hooks

import { useAuth } from '@authflow/sdk';

function MyComponent() {
  const { user, login, logout, loading } = useAuth();

  if (loading) return <div>Loading...</div>;
  if (!user) return <div>Please log in</div>;

  return (
    <div>
      <p>Welcome, {user.email}!</p>
      <button onClick={logout}>Logout</button>
    </div>
  );
}

3. Use pre-built components

import { LoginForm, ProtectedRoute } from '@authflow/sdk';

function LoginPage() {
  return (
    <div>
      <LoginForm
        showRegister={true}
        onSuccess={() => {
          // Redirect after successful login
          window.location.href = '/dashboard';
        }}
      />
    </div>
  );
}

function Dashboard() {
  return (
    <ProtectedRoute redirectTo="/login">
      <div>Protected content</div>
    </ProtectedRoute>
  );
}

4. Use the client directly

import { AuthFlowClient } from '@authflow/sdk';

const client = new AuthFlowClient({
  apiKey: 'your-api-key',
  baseUrl: 'https://auth.yourdomain.com',
});

// Login
await client.login({ email: '[email protected]', password: 'password' });

// Get current session
const user = await client.getSession();

// Logout
await client.logout();

API Reference

AuthProvider Props

• config.apiKey (required): Your project API key
• config.baseUrl (optional): Base URL of the AuthFlow API
• config.cookieDomain (optional): Cookie domain for SSO

useAuth Hook

Returns:

• user: Current user object or null
• loading: Boolean indicating if auth state is being checked
• login(email, password): Login function
• register(email, password, name?): Register function
• logout(): Logout function
• refreshSession(): Refresh current session

LoginForm Props

• onSuccess?: Callback called after successful login/register
• showRegister?: Show register option (default: false)
• customStyles?: Custom CSS classes for styling

ProtectedRoute Props

• children: Content to protect
• redirectTo?: URL to redirect if not authenticated
• fallback?: Component to show while loading or if not authenticated