@euroguard/auth-sdk-react

🔐 Multi-tenant authentication SDK for React

• ✅ Email/Password + OTP (2FA)
• ✅ Multi-tenant support (User → Tenant → App)
• ✅ React Hooks API
• ✅ TypeScript
• ✅ Zero dependencies
• ✅ Built-in mock provider

Install

npm install @euroguard/auth-sdk-react

Quick Start

1. Wrap App with AuthProvider

import { AuthProvider } from '@euroguard/auth-sdk-react'

<AuthProvider appKey="your_key">
  <App />
</AuthProvider>

2. Use useAuth Hook

import { useAuth } from '@euroguard/auth-sdk-react'

function LoginPage() {
  const { signin, user, loading, error } = useAuth()

  const handleLogin = async () => {
    await signin({ email: '[email protected]', password: 'Test123!@#' })
  }

  if (user) return <div>Welcome, {user.name}!</div>

  return (
    <>
      <button onClick={handleLogin} disabled={loading}>
        Sign In
      </button>
      {error && <p>{error}</p>}
    </>
  )
}

API

useAuth Hook

const {
  // State
  user,              // User | null
  tenant,            // Tenant | null
  app,               // App | null
  loading,           // boolean
  error,             // string | null
  isAuthenticated,   // boolean

  // Auth
  signup,            // (params) => Promise<void>
  signin,            // (params) => Promise<void>
  logout,            // () => void

  // Tenants
  createTenant,      // (params) => Promise<Tenant>
  getTenants,        // () => Promise<Tenant[]>
  setCurrentTenant,  // (tenant) => void

  // Apps
  createApp,         // (params) => Promise<App>
  setCurrentApp,     // (app) => void

  // 2FA
  setupOTP,          // () => Promise<OTPSetupResult>
  verifyOTP,         // (code, secret) => Promise<void>

  // Utils
  getToken           // () => string | null
} = useAuth()

Examples

Signup

const { signup, loading } = useAuth()

const handleSignup = async (email: string, password: string, name: string) => {
  try {
    await signup({ email, password, name })
    // User is now signed up
  } catch (err) {
    console.error(err)
  }
}

Multi-Tenant

const { createTenant, getTenants, setCurrentTenant, tenant } = useAuth()

// Create tenant
const newTenant = await createTenant({ name: 'My Company' })

// List tenants
const myTenants = await getTenants()

// Switch tenant
setCurrentTenant(myTenants[0])
console.log(tenant.name) // My Company

Apps (API Keys)

const { createApp, tenant } = useAuth()

// Create app with API keys
const app = await createApp({
  tenantId: tenant.id,
  name: 'Mobile App'
})

console.log(app.apiKey)    // sk_live_xxx
console.log(app.apiSecret) // secret_xxx

Two-Factor (OTP)

const { setupOTP, verifyOTP } = useAuth()

// Setup 2FA
const { secret, qrCode, backupCodes } = await setupOTP()
// Show QR code to user

// Verify code
await verifyOTP('123456', secret)

Types

// User
interface User {
  id: string
  email: string
  name: string
  emailVerified: boolean
  createdAt: string
}

// Tenant (company/department)
interface Tenant {
  id: string
  name: string
  userId: string
  createdAt: string
}

// App (application with API keys)
interface App {
  id: string
  tenantId: string
  name: string
  apiKey: string
  apiSecret: string
  createdAt: string
}

// Auth Session
interface AuthSession {
  user: User
  tenant?: Tenant
  app?: App
  token: AuthToken
}

AuthProvider Props

<AuthProvider
  appKey="required_app_key"        // Your app key
  apiUrl="https://api.example.com" // Optional: backend API URL
  clientId="demo_key"
  debug={false}                     // Optional: enable debug logging
>
  {children}
</AuthProvider>

Testing

Built-in mock provider for development (no backend needed).

Test credentials:

Email: [email protected]
Password: Test123!@#

Enable debug mode:

<AuthProvider appKey="test" debug={true}>
  {children}
</AuthProvider>

Check console for auth logs:

[AuthSDK] SDK initialized
[AuthSDK] Signin [email protected]
[AuthSDK] Signin success

Next.js Integration

Create lib/auth-provider.tsx:

'use client'

import { AuthProvider } from '@euroguard/auth-sdk-react'

export function AuthWrapper({ children }) {
  return (
    <AuthProvider appKey={process.env.NEXT_PUBLIC_AUTH_KEY!}>
      {children}
    </AuthProvider>
  )
}

Use in app/layout.tsx:

import { AuthWrapper } from '@/lib/auth-provider'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <AuthWrapper>{children}</AuthWrapper>
      </body>
    </html>
  )
}

Use hook in any component:

'use client'

import { useAuth } from '@euroguard/auth-sdk-react'

export default function Page() {
  const { user, signin, logout } = useAuth()

  if (!user) {
    return <button onClick={() => signin(...)}>Sign In</button>
  }

  return (
    <>
      <h1>Welcome, {user.name}</h1>
      <button onClick={logout}>Logout</button>
    </>
  )
}

Pricing

Free: 10 authentications/month
Starter: 10,000/month - €29/month
Pro: 50,000/month - €99/month
Enterprise: Custom

10x cheaper than Auth0 for B2C apps! 🚀

License

MIT

Need help? Check examples in the repository or create an issue.