> ## Documentation Index
> Fetch the complete documentation index at: https://usegately.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Page Protection Overview

> Protect content based on authentication and subscription plans

Gately provides multiple ways to protect content on your website, from simple login requirements to plan-based access control.

## Protection Methods

<CardGroup cols={2}>
  <Card title="Data Attributes" icon="code">
    Simple HTML attributes for quick protection
  </Card>

  <Card title="SDK Methods" icon="js">
    Programmatic access control
  </Card>

  <Card title="Auto Protection" icon="wand-magic-sparkles">
    Automatic protection based on URL patterns
  </Card>

  <Card title="Member Content" icon="lock">
    Database-driven content access rules
  </Card>
</CardGroup>

## Quick Start

### Using Data Attributes

The simplest way to protect content:

```html theme={null}
<!-- Require login -->
<div data-gately-protected>
  This content is only visible to logged-in users.
</div>

<!-- Require specific plan -->
<div data-gately-protected data-plan="pro">
  This content is only visible to Pro plan members.
</div>

<!-- Show only if logged in -->
<div data-gately-show-if="logged-in">
  Welcome back!
</div>

<!-- Hide if logged in -->
<div data-gately-hide-if="logged-in">
  Please log in to continue.
</div>
```

### Using SDK Methods

```javascript theme={null}
// Check if user can access content
const canAccess = await gately.checkAccess('content-id')

if (canAccess) {
  showContent()
} else {
  showUpgradePrompt()
}
```

## Protection Levels

| Level          | Description                  | Use Case                |
| -------------- | ---------------------------- | ----------------------- |
| Login Required | User must be authenticated   | Member-only content     |
| Plan Required  | User must have specific plan | Premium features        |
| Custom Rules   | Based on user attributes     | Advanced access control |

## How It Works

1. SDK initializes and checks authentication
2. Protected elements are identified by data attributes
3. Access is checked against user's session and plan
4. Content is shown/hidden based on access rules
5. Unauthorized users are redirected or shown alternatives

```mermaid theme={null}
flowchart TD
    A[Page Loads] --> B{User Authenticated?}
    B -->|No| C[Hide Protected Content]
    B -->|Yes| D{Check Plan}
    D -->|Has Access| E[Show Content]
    D -->|No Access| F[Show Upgrade Prompt]
    C --> G[Show Login Prompt]
```

## Configuration

### Initialize Protection

Protection is automatically initialized when the SDK loads. You can customize behavior:

```javascript theme={null}
gately.initPageProtection({
  // Redirect unauthorized users
  redirectIfDenied: true,
  
  // Check access on page load
  checkOnLoad: true,
  
  // Custom handlers
  onAccessDenied: (content, reason) => {
    console.log('Access denied:', reason)
  },
  
  onRedirect: (url, message) => {
    console.log('Redirecting to:', url)
  }
})
```

### Redirect Rules

Configure redirects in your dashboard or via API:

| Trigger        | Redirect To  |
| -------------- | ------------ |
| Not logged in  | `/login`     |
| No plan access | `/upgrade`   |
| After login    | `/dashboard` |
| After logout   | `/`          |

## Best Practices

<AccordionGroup>
  <Accordion title="Progressive Enhancement">
    Always provide fallback content for users without JavaScript.
  </Accordion>

  <Accordion title="Loading States">
    Show loading indicators while checking access to prevent content flash.
  </Accordion>

  <Accordion title="Clear Messaging">
    Tell users why they can't access content and how to get access.
  </Accordion>

  <Accordion title="Server-Side Validation">
    For sensitive content, always validate access on the server too.
  </Accordion>
</AccordionGroup>

## Security Note

<Warning>
  Client-side protection hides content but doesn't secure it. For truly sensitive data, implement server-side access control using the API.
</Warning>

## Next Steps

<CardGroup cols={2}>
  <Card title="Member Content" icon="database" href="/docs/sdk/protection/member-content.mdx">
    Database-driven content protection
  </Card>

  <Card title="Auto Protect" icon="wand-magic-sparkles" href="/docs/sdk/protection/auto-protect.mdx">
    Automatic URL-based protection
  </Card>
</CardGroup>