Go Local Interactive Cloud Wrapper

A React provider component for Go Local Interactive's cloud services with built-in styling and authentication middleware.

Installation

npm install @golocalinteractive/golocal-cloud-wrapper

Usage

Basic Usage (Styles Auto-injected)

The styles are automatically included when you import the GLICloudProvider:

import { GLICloudProvider } from "@golocalinteractive/golocal-cloud-wrapper";

function App() {
  return (
    <GLICloudProvider>
      <div>Your app content here</div>
    </GLICloudProvider>
  );
}

Authentication Setup

This package includes Auth0 authentication utilities and middleware helpers. To set up authentication in your Next.js app:

1. Environment Variables

Add these to your .env.local:

AUTH0_SECRET='use [openssl rand -hex 32] to generate a 32 bytes value'
AUTH0_BASE_URL='http://localhost:3000'
AUTH0_ISSUER_BASE_URL='https://YOUR_DOMAIN'
AUTH0_CLIENT_ID='your_client_id'
AUTH0_CLIENT_SECRET='your_client_secret'
AUTH0_AUDIENCE='your_audience'

2. Auth API Routes

Create app/api/auth/[auth0]/route.ts:

import { handleAuth } from "@auth0/nextjs-auth0";

export const GET = handleAuth;

4. Login/Logout Links

import { useUser } from "@auth0/nextjs-auth0/client";

function AuthButtons() {
  const { user, isLoading } = useUser();

  if (isLoading) return <div>Loading...</div>;

  if (user) {
    return (
      <div>
        <span>Welcome {user.name}!</span>
        <a href="/api/auth/logout">Logout</a>
      </div>
    );
  }

  return <a href="/api/auth/login">Login</a>;
}

Manual CSS Import (Alternative)

If you prefer to manually control CSS imports, you can import the styles separately:

// Import styles first
import "@golocalinteractive/golocal-cloud-wrapper/styles";

// Then import the provider
import { GLICloudProvider } from "@golocalinteractive/golocal-cloud-wrapper";

function App() {
  return (
    <GLICloudProvider>
      <div>Your app content here</div>
    </GLICloudProvider>
  );
}

User Permissions

The package includes built-in permission management for GoLocal Interactive products.

Important: Server-side functions must be imported from /server path:

// ❌ Wrong - This will cause errors in server components
import { getServerSidePermissions } from "@golocalinteractive/golocal-cloud-wrapper";

// ✅ Correct - Use /server path for server-side imports
import { getServerSidePermissions } from "@golocalinteractive/golocal-cloud-wrapper/server";

Client-Side Permissions (with PermissionsProvider)

First, create an API endpoint:

// app/api/auth/permissions/route.ts
import { NextResponse } from 'next/server';
import { getServerSidePermissions } from '@golocalinteractive/golocal-cloud-wrapper/server';

export async function GET() {
  try {
    const permissions = await getServerSidePermissions();
    return NextResponse.json(permissions);
  } catch (error) {
    return NextResponse.json(
      { essentialInsights: false, organic: false, paid: false, web: false, priceMonster: false, se_company_id: null },
      { status: 500 }
    );
  }
}

Then use in your components:

import { PermissionsProvider, usePermissions, useProductAccess } from "@golocalinteractive/golocal-cloud-wrapper";

function App() {
  return (
    <PermissionsProvider>
      <YourApp />
    </PermissionsProvider>
  );
}

// Option 1: Using usePermissions (original way)
function YourComponent() {
  const { permissions, loading, error } = usePermissions();
  
  if (loading) return <div>Loading...</div>;
  
  return (
    <div>
      {permissions.essentialInsights && <EssentialInsightsContent />}
      {permissions.organic && <OrganicContent />}
      {permissions.paid && <PaidContent />}
      {permissions.web && <WebContent />}
      {permissions.priceMonster && <PriceMonsterContent />}
    </div>
  );
}

// Option 2: Using useProductAccess (shorthand access)
function YourComponentShorthand() {
  const { essentialInsights, organic, paid, web, priceMonster, se_company_id, loading, error } = useProductAccess();
  
  if (loading) return <div>Loading...</div>;
  
  return (
    <div>
      {essentialInsights && <EssentialInsightsContent />}
      {organic && <OrganicContent />}
      {paid && <PaidContent />}
      {web && <WebContent />}
      {priceMonster && <PriceMonsterContent />}
      <p>Company ID: {se_company_id}</p>
    </div>
  );
}

Server-Side Permissions

For server components:

// app/layout.tsx (Server Component)
import { getServerSidePermissions } from '@golocalinteractive/golocal-cloud-wrapper/server';

export default async function RootLayout({ children }) {
  const permissions = await getServerSidePermissions();
  
  return (
    <html>
      <body>
        <ClientProviders initialPermissions={permissions}>
          {children}
        </ClientProviders>
      </body>
    </html>
  );
}

Active Route Tracking

The package includes a useActiveRoute hook for tracking the current route and highlighting active navigation links:

import { useActiveRoute } from "@golocalinteractive/golocal-cloud-wrapper";

function MyNavigation() {
  const { currentPath, isActiveRoute } = useActiveRoute();

  return (
    <nav>
      <a
        href="/dashboard"
        className={isActiveRoute("/dashboard") ? "active" : ""}
      >
        Dashboard
      </a>
      <a
        href="/settings"
        className={isActiveRoute("/settings") ? "active" : ""}
      >
        Settings
      </a>
    </nav>
  );
}

The useActiveRoute hook provides:

• currentPath: The current URL pathname
• isActiveRoute(path): Function that returns true if the given path matches the current route (supports exact matches and nested routes)

Features

• Auto-injected Styles: CSS is automatically included when importing the provider
• Tailwind CSS: Built with Tailwind CSS v4 for consistent styling
• Custom Design System: Includes GLI brand colors and design tokens
• Responsive Design: Mobile-first responsive components
• Dark Mode Support: Built-in dark mode support
• Accessibility: WCAG compliant components
• Active Link Highlighting: Built-in route tracking and active link highlighting

Available CSS Variables

The package includes custom CSS variables for GLI branding:

/* GLI Colors */
--gli-blue: #e5f7ff;
--gli-blue-dark: #007db8;
--gli-orange: #fff6ef;
--gli-orange-dark: #f68029;
--gli-green: #edfad8;
--gli-gray-dark: #c2c2c2;

/* Organic Colors */
--organic-blue: #ecf3f8;
--organic-navy: #013760;
--organic-mid-blue: #1e6aa4;
--organic-light-blue: #95b5d0;

/* Paid Colors */
--paid-green: #5c792f;
--paid-green-light: #85b045;
--paid-lime: #ecfad6;
--paid-green-dark: #324715;

Troubleshooting

Styles Not Applying

If styles aren't taking effect:

1. Check Import Order: Make sure you're importing the provider correctly
2. CSS Conflicts: Ensure no other CSS is overriding the styles
3. Build Process: Verify your build process includes CSS processing
4. Browser Cache: Clear browser cache and reload

Build Issues

If you encounter build issues:

1. PostCSS Config: Ensure you have @tailwindcss/postcss installed
2. Tailwind Version: This package uses Tailwind CSS v4
3. Node Version: Requires Node.js 18+ for Tailwind CSS v4

Development

# Install dependencies
npm install

# Build the package
npm run build

# Build for development
npm run build:dev

# Run tests
npm test

Available Components

Providers

• GLICloudProvider - Cloud provider context for Go Local Interactive services

Hooks

• useActiveRoute - Hook for tracking current route and active link highlighting

Requirements

• React 19+
• TypeScript (recommended)

License

ISC