L0G1n SDK

The ultra-fast, brutalist React SDK for the L0G1n ecosystem.

@l0g1n/sdk provides a drop-in React Context Provider and an unstyled, brutalist UI Modal that connects your client applications instantly to the L0G1n authentication and billing backend.

📦 Installation

npm install @l0g1n/sdk firebase
# or
yarn add @l0g1n/sdk firebase
# or
pnpm add @l0g1n/sdk firebase

[!NOTE] firebase and react are required peer dependencies. The SDK acts as a lightweight wrapper around Firebase Auth and Cloud Functions.

🚀 Quick Start

1. Wrap your app with the Provider

You must wrap your application (or the tree where you need auth/billing) with the <L0g1nProvider>. You'll need to pass your standard Firebase config object.

import { L0g1nProvider } from '@l0g1n/sdk';

const firebaseConfig = {
  apiKey: "AIzaSy...",
  authDomain: "your-project.firebaseapp.com",
  projectId: "your-project",
  // ... rest of config
};

function App() {
  return (
    // 'env' maps to your Strapi product environment
    <L0g1nProvider firebaseConfig={firebaseConfig} env="PROD">
      <YourAppComponents />
    </L0g1nProvider>
  );
}

2. Use the Hooks for Custom Logic

The SDK provides a tightly-typed useL0g1n hook giving you access to the current user state, auth methods, and billing triggers.

import { useL0g1n } from '@l0g1n/sdk';

function Dashboard() {
  const { user, loading, signInWithGithub, logOut, createCheckoutSession } = useL0g1n();

  if (loading) return <div>Booting...</div>;

  if (!user) {
    return <button onClick={signInWithGithub}>Login with GitHub</button>;
  }

  const handleSubscribe = async () => {
    try {
      // Calls the secure L0G1n backend to generate a Stripe URL
      const url = await createCheckoutSession('pro_tier_id', 'USD');
      window.location.href = url; // Redirect to Stripe
    } catch (err) {
      console.error("Billing failed", err);
    }
  };

  return (
    <div>
      <p>Welcome, {user.email}!</p>
      <button onClick={handleSubscribe}>Upgrade to Pro ($9.99)</button>
      <button onClick={logOut}>Log Out</button>
    </div>
  );
}

3. Use the Drop-In Modal (Optional)

If you don't want to build your own auth UI, the SDK ships with a highly opinionated, brutalist login modal that perfectly matches the L0G1n aesthetic.

import { useState } from 'react';
import { L0g1nModal } from '@l0g1n/sdk';

function LandingPage() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open L0G1n</button>
      
      <L0g1nModal 
        isOpen={isOpen} 
        onClose={() => setIsOpen(false)} 
        theme="dark" // currently defaults to our green/black brutalist styling
      />
    </>
  );
}

🛠️ API Reference

useL0g1n()

Returns the L0g1nContextType object:

| Property | Type | Description | |----------|------|-------------| | user | User \| null | The current Firebase user object. | | loading | boolean | true while Firebase is initializing auth state. | | app | FirebaseApp \| null | The underlying Firebase App instance. | | auth | Auth \| null | The underlying Firebase Auth instance. | | functions| Functions \| null | The Firebase Cloud Functions instance. | | env | 'DEV' \| 'PROD' | The environment currently targeted for billing. | | signInWithGithub | () => Promise<void> | Triggers GitHub OAuth popup. | | signInWithGoogle | () => Promise<void> | Triggers Google OAuth popup. | | logOut | () => Promise<void> | Signs the current user out. | | createCheckoutSession| (productId: string, currency: 'USD'\|'EUR'\|'BRL') => Promise<string> | Requests a secure Stripe checkout URL from the L0G1n backend. |

<L0g1nProvider /> Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | firebaseConfig | FirebaseOptions | Required | Your standard Firebase client configuration object. | | env | 'DEV' \| 'PROD' | 'PROD' | Directs the backend on which Stripe environment keys to use for this client session. | | children | ReactNode | Required | Your application tree. |

🔒 Security & Architecture

This SDK does not speak to Stripe directly. Doing so would leak your Stripe Secret Keys to the client.

Instead, the SDK uses authenticated Firebase Cloud Functions (httpsCallable). When you call createCheckoutSession(), the SDK securely passes your Firebase Auth token to the l0g1n/server backend. The backend verifies your identity, queries the Strapi Database for the correct pricing data, dynamically generates the Stripe Checkout session, and returns the URL.

Zero sensitive tokens are exposed to the client.