Auto Protect

import { autoProtectPage } from '@gately/sdk'

// Protect current page
autoProtectPage({
  loginUrl: '/login',
  upgradeUrl: '/upgrade'
})

import { createAutoProtect } from '@gately/sdk'

const autoProtect = createAutoProtect({
  // URL patterns to protect
  patterns: [
    { pattern: '/dashboard/*', requireAuth: true },
    { pattern: '/premium/*', requirePlan: 'pro' },
    { pattern: '/admin/*', requirePlan: 'enterprise' }
  ],
  
  // Redirect URLs
  loginUrl: '/login',
  upgradeUrl: '/upgrade',
  
  // Options
  checkOnLoad: true,
  showLoadingState: true
})

interface ProtectionPattern {
  pattern: string           // URL pattern to match
  requireAuth?: boolean     // Require authentication
  requirePlan?: string      // Require specific plan
  requirePlans?: string[]   // Require one of these plans
  redirectUrl?: string      // Custom redirect for this pattern
  allowedRoles?: string[]   // Require specific roles
}

createAutoProtect({
  patterns: [
    { pattern: '/dashboard', requireAuth: true },
    { pattern: '/dashboard/*', requireAuth: true }
  ],
  loginUrl: '/login'
})

createAutoProtect({
  patterns: [
    { pattern: '/free/*', requireAuth: true },
    { pattern: '/pro/*', requirePlan: 'pro' },
    { pattern: '/enterprise/*', requirePlan: 'enterprise' }
  ],
  upgradeUrl: '/pricing'
})

createAutoProtect({
  patterns: [
    { 
      pattern: '/premium/*', 
      requirePlans: ['pro', 'business', 'enterprise']
    }
  ]
})

import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'
import { useAutoProtect } from '@gately/sdk'

function App() {
  const location = useLocation()
  const { checkAccess, isChecking } = useAutoProtect({
    patterns: [
      { pattern: '/dashboard/*', requireAuth: true }
    ]
  })

  useEffect(() => {
    checkAccess(location.pathname)
  }, [location.pathname])

  if (isChecking) {
    return <LoadingScreen />
  }

  return <Routes />
}

import { AutoProtect } from '@gately/sdk'

function App() {
  return (
    <AutoProtect
      patterns={[
        { pattern: '/dashboard/*', requireAuth: true },
        { pattern: '/premium/*', requirePlan: 'pro' }
      ]}
      loginUrl="/login"
      upgradeUrl="/upgrade"
      loadingComponent={<Spinner />}
    >
      <Router>
        <Routes />
      </Router>
    </AutoProtect>
  )
}

createAutoProtect({
  patterns: [...],
  
  onAccessGranted: (pattern, user) => {
    console.log('Access granted to:', pattern)
    analytics.track('page_access', { pattern })
  },
  
  onAccessDenied: (pattern, reason, user) => {
    console.log('Access denied:', reason)
    
    if (reason === 'not_authenticated') {
      // Custom login redirect with return URL
      window.location.href = `/login?return=${encodeURIComponent(window.location.href)}`
      return false // Prevent default redirect
    }
    
    return true // Allow default redirect
  },
  
  onRedirect: (url) => {
    console.log('Redirecting to:', url)
  }
})

createAutoProtect({
  patterns: [...],
  showLoadingState: true,
  loadingSelector: '#app', // Element to show loading state
  loadingClass: 'is-loading' // Class to add during check
})

createAutoProtect({
  patterns: [...],
  onCheckStart: () => {
    document.getElementById('loader').style.display = 'block'
  },
  onCheckComplete: () => {
    document.getElementById('loader').style.display = 'none'
  }
})

createAutoProtect({
  patterns: [...],
  cacheTimeout: 5 * 60 * 1000 // 5 minutes (default)
})

autoProtect.clearCache()

// Next.js middleware
import { NextResponse } from 'next/server'

export function middleware(request) {
  const token = request.cookies.get('gately_auth_token')
  
  if (request.nextUrl.pathname.startsWith('/dashboard')) {
    if (!token) {
      return NextResponse.redirect(new URL('/login', request.url))
    }
  }
  
  return NextResponse.next()
}

createAutoProtect({
  patterns: [...],
  debug: true
})