@erpspace/auth-context

Supabase authentication context and UI components for React applications.

Project Setup

1. Create a new React project with TypeScript (Vite)

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install

2. Install and configure shadcn/ui

npx shadcn@latest init

Follow the prompts to configure shadcn with your preferred settings.

3. Install @erpspace/auth-context

npm install @erpspace/auth-context

Usage

Basic Setup

Wrap your application with AppContext:

import { AppContext, ProtectedRoute, Spinner } from '@erpspace/auth-context'

function Skeleton() {
  return (
    <div className="min-h-screen w-full flex items-center justify-center">
      <Spinner />
    </div>
  )
}

function App() {
  return (
    <AppContext skeleton={<Skeleton />}>
      <ProtectedRoute>
        {/* Your app content */}
      </ProtectedRoute>
    </AppContext>
  )
}

Configuration

Production

On production, the package automatically fetches configuration from your API at api.{domain}/config. The expected response format:

{
  "SUPABASE_URL": "https://your-project.supabase.co",
  "SUPABASE_KEY": "your-anon-key",
  "SESSION_DOMAIN": ".yourdomain.com",
  "DEFAULT_SUBDOMAIN": "app"
}

Development (using .env)

During development, create a .env file in your project root:

VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_KEY=your-anon-key
VITE_SESSION_DOMAIN=localhost

Important: Add .env to your .gitignore:

# Environment variables
.env
.env.local
.env.*.local

Then configure the AppContext to use these environment variables as fallback:

function App() {
  return (
    <AppContext 
      skeleton={<Skeleton />}
      fallbackConfig={{
        SUPABASE_URL: import.meta.env.VITE_SUPABASE_URL,
        SUPABASE_KEY: import.meta.env.VITE_SUPABASE_KEY,
        SESSION_DOMAIN: import.meta.env.VITE_SESSION_DOMAIN || 'localhost',
      }}
    >
      <ProtectedRoute>
        {/* Your app content */}
      </ProtectedRoute>
    </AppContext>
  )
}

Custom API URL

<AppContext 
  skeleton={<Skeleton />}
  apiUrl="https://api.example.com"
>
  {/* ... */}
</AppContext>

Hooks

import { useConfig, useUser } from '@erpspace/auth-context'

function MyComponent() {
  const config = useConfig()
  const user = useUser()

  return (
    <div>
      <p>Logged in as: {user?.email}</p>
      <p>Using Supabase: {config.SUPABASE_URL}</p>
    </div>
  )
}

Using Individual Contexts

If you need more control, you can use the providers separately:

import { 
  ConfigProvider, 
  UserContextProvider, 
  ProtectedRoute,
  Toaster 
} from '@erpspace/auth-context'

function App() {
  return (
    <ConfigProvider skeleton={<Skeleton />}>
      <UserContextProvider skeleton={<Skeleton />}>
        <ProtectedRoute>
          {/* Your app content */}
        </ProtectedRoute>
      </UserContextProvider>
      <Toaster />
    </ConfigProvider>
  )
}

License

MIT