@demokit-ai/auth

Authentication abstraction for DemoKit with Supabase Auth integration and extensible provider interface.

Installation

npm install @demokit-ai/auth @supabase/supabase-js

Features

• AuthProvider - React context for authentication state
• DemoAuthProvider - Demo mode authentication with mock users
• useAuth - Hook for accessing auth state and methods
• useUser - Hook for accessing current user
• useSession - Hook for accessing session data
• Supabase Auth integration out of the box
• Full TypeScript support

Usage

Basic Setup with Supabase

import { AuthProvider } from '@demokit-ai/auth'
import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_ANON_KEY!
)

function App() {
  return (
    <AuthProvider client={supabase}>
      <YourApp />
    </AuthProvider>
  )
}

Demo Mode Authentication

Use mock authentication for demos:

import { DemoAuthProvider } from '@demokit-ai/auth'

const demoUsers = [
  { id: '1', email: '[email protected]', name: 'Demo User' },
  { id: '2', email: '[email protected]', name: 'Admin User', role: 'admin' },
]

function App() {
  return (
    <DemoAuthProvider users={demoUsers} defaultUser="1">
      <YourApp />
    </DemoAuthProvider>
  )
}

Using Auth Hooks

import { useAuth, useUser } from '@demokit-ai/auth'

function Profile() {
  const { signOut, isLoading } = useAuth()
  const user = useUser()

  if (isLoading) return <div>Loading...</div>
  if (!user) return <div>Not authenticated</div>

  return (
    <div>
      <p>Welcome, {user.email}</p>
      <button onClick={signOut}>Sign Out</button>
    </div>
  )
}

Protected Routes

import { useAuth } from '@demokit-ai/auth'
import { Navigate } from 'react-router-dom'

function ProtectedRoute({ children }) {
  const { user, isLoading } = useAuth()

  if (isLoading) return <div>Loading...</div>
  if (!user) return <Navigate to="/login" />

  return children
}

API Reference

AuthProvider

Props:

• client - Supabase client instance
• onAuthStateChange - Callback for auth state changes

DemoAuthProvider

Props:

• users - Array of mock user objects
• defaultUser - ID of the default logged-in user
• onSignIn - Callback when a user signs in
• onSignOut - Callback when a user signs out

useAuth()

Returns:

• user - Current user object
• session - Current session
• isLoading - Loading state
• signIn(credentials) - Sign in method
• signOut() - Sign out method
• signUp(credentials) - Sign up method

useUser()

Returns the current user object or null.

useSession()

Returns the current session object or null.

License

MIT