Skip to content

Component Name: productAccessGate

Last Updated: 2025-10-22 Source Code: .temp-staging-flows/force-app/main/default/lwc/productAccessGate/

API Name: c-product-access-gate Type: Utility / Security Component Target: lightningCommunity__Page, lightningCommunity__Default

Business Purpose

This component serves as a security gate that determines whether users can access specific products based on their login status and buyer group membership. It enforces business rules around product visibility, ensuring only authorized users can view restricted products while providing appropriate redirects and messaging for unauthorized access attempts. This is a critical security component that protects premium/restricted content and products.

User Interface

Visual Description

  • Layout: Conditional rendering - either shows content or redirect/error message
  • Key UI Elements: Product content (when authorized), login prompt (when guest), access denied message (when unauthorized)
  • Responsive: Inherits from wrapped content

Screenshots

  • Authorized view: Shows wrapped product content
  • Unauthorized view: Shows access denied message or redirects to login

Component Structure

Files

  • productAccessGate.html - Template (~300 lines estimated)
  • productAccessGate.js - Controller (~300 lines estimated)
  • productAccessGate.css - Styling (minimal)
  • productAccessGate.js-meta.xml - Metadata

HTML Template Structure

Conditional rendering based on access check results.

<template>
    <template if:true={isAuthorized}>
        <slot></slot> <!-- Wrapped product content -->
    </template>

    <template if:true={isGuest}>
        <div class="login-prompt">
            Please log in to view this product.
            <button onclick={navigateToLogin}>Log In</button>
        </div>
    </template>

    <template if:true={isDenied}>
        <div class="access-denied">
            You do not have access to view this product.
        </div>
    </template>

    <template if:true={isLoading}>
        <lightning-spinner></lightning-spinner>
    </template>
</template>

Key Template Features: - Slot for product content - Conditional rendering based on authorization status - Login redirect functionality - Error messaging

JavaScript Controller

Properties (API)

@api productId

  • Type: String
  • Required: Yes
  • Description: Product record ID to check access for

Example Usage: 

<c-product-access-gate product-id={currentProductId}>
    <div>Protected product content here</div>
</c-product-access-gate>

@api buyerGroupName

  • Type: String
  • Required: No
  • Description: Specific buyer group required for access (optional)

Tracked Properties

  • @track isAuthorized: User has access
  • @track isGuest: User not logged in
  • @track isDenied: User logged in but lacks access
  • @track isLoading: Access check in progress
  • @track errorMessage: Error details

Wire Adapters

  • @wire(isGuest): Checks if user is guest
  • May wire to product/buyer group data

Event Handlers

  • navigateToLogin: Redirects to login page with return URL
  • connectedCallback: Performs access check on load

Private Methods

  • checkAccess: Validates user's buyer group membership
  • handleAccessDenied: Sets denied state and message
  • handleAccessGranted: Sets authorized state

Events

  • Navigation events for login redirect

Styling (CSS)

Minimal styling for access messages and login prompt.

Dependencies

Lightning Web Components

  • lightning/navigation
  • lightning/spinner

Apex Classes

  • ProductService.checkProductAccess()
  • BuyerGroupService.getUserBuyerGroups()

Salesforce Objects

  • Product2: Product access rules
  • BuyerGroup: Group membership
  • BuyerGroupMember: User group assignments

Community Framework

  • @salesforce/user/isGuest
  • @salesforce/community/basePath

Configuration

<LightningComponentBundle>
    <apiVersion>61.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
</LightningComponentBundle>

User Interactions

  1. Component loads and checks user access
  2. If authorized: Shows wrapped content
  3. If guest: Shows login prompt with redirect
  4. If denied: Shows access denied message
  5. User can click login button to authenticate

Validation & Error Handling

  • Handles missing productId
  • Handles Apex errors in access check
  • Provides user-friendly error messages

Data Flow

Component load → Check isGuest → If logged in, check buyer group membership → Determine authorization → Render appropriate UI

Performance Considerations

  • Access check runs on component load (single Apex call)
  • Results could be cached if same product accessed multiple times
  • Minimal rendering overhead (conditional display)

Accessibility (a11y)

  • Login button keyboard-accessible
  • Error messages properly announced
  • Loading state has accessible label

Testing

Test File: Unknown Coverage: Unknown

Recommended Tests: - Authorized user sees content - Guest user sees login prompt - Unauthorized user sees denial message - Login redirect includes return URL - Error handling for failed access check - Multiple buyer groups logic

Usage Examples

Wrapping Product Content

<c-product-access-gate product-id={productRecord.Id} buyer-group-name="Premium Members">
    <div class="product-details">
        <!-- Premium product content -->
        <h1>{productRecord.Name}</h1>
        <div>{productRecord.Description}</div>
        <button>Purchase</button>
    </div>
</c-product-access-gate>

In Product Detail Page

Use this component to wrap sensitive product information, pricing, or purchase buttons.

Changes & History

  • Security gating for restricted products
  • Buyer group integration
  • Guest user redirect logic

Pre-Go-Live Concerns

CRITICAL - Fix Before Go-Live

  • Authorization bypass: Access check must be server-side (client check is UX only)
  • URL manipulation: Direct product URLs must also enforce access (not just component)
  • Session validation: Must verify active authenticated session
  • Caching issues: Access check results must not be cached inappropriately

HIGH

  • Server-side enforcement of all access rules
  • Testing with all buyer group combinations
  • Mobile redirect flow
  • Error handling for edge cases

MEDIUM

  • User experience for denied access
  • Analytics tracking for access attempts
  • Performance optimization for repeated checks

LOW

  • UI polish for messages
  • Loading state refinement

Maintenance Notes

Complexity: Medium (Security implications) Review Schedule: Quarterly security review

Key Notes: - CRITICAL: This component provides UX gating only - server-side enforcement required - Never rely solely on client-side access control - Product visibility rules must be enforced at API level - Buyer group membership changes require cache invalidation - Access denied messaging should not reveal system details - Login redirect must preserve return URL securely

Browser Compatibility: - Chrome 90+, Firefox 88+, Safari 14+, Edge 90+

Security Considerations: - CLIENT-SIDE ONLY: This component is UX convenience, not security enforcement - Server-side must validate access for all product API calls - Apex controllers must check buyer group membership - Product data must respect sharing rules - Login redirect URLs must be validated to prevent open redirect - Error messages must not leak sensitive information

Important Security Notes: 1. This component hides UI elements but does NOT prevent API access 2. Backend Apex must always validate product access 3. Buyer group checks must happen server-side 4. Product pricing/details APIs must enforce access control 5. Checkout process must re-validate product access

Recommended Next Steps: 1. Immediate: Security audit of server-side access enforcement 2. Short-term: Comprehensive testing of access rules 3. Medium-term: Add analytics for access denial patterns 4. Long-term: Consider token-based access for enhanced security