Skip to content

JavaScript Authentication Examples

This page provides practical examples of how to use authentication with the CounterAPI JavaScript client.

Note: Authentication is required for the V2 API, which is now the only available CounterAPI version. The legacy V1 API did not support authentication and was deprecated on August 7, 2026.

Prerequisites

Before you can use authentication, you need to:

  1. Create an account on CounterAPI
  2. Create a workspace
  3. Generate an access token

For detailed instructions on these steps, see the Authentication guide.

Node.js Examples

Basic Authentication

import { Counter } from 'counterapi';

// Create an authenticated client
const counter = new Counter({
  workspace: 'your-workspace-name',
  accessToken: 'your-access-token'  // The token you generated on counterapi.dev
});

// Use the authenticated client
const result = await counter.get('secure-counter');
console.log(`Counter value: ${result.value}`);

Using Environment Variables

It's best practice to store your authentication tokens in environment variables:

import { Counter } from 'counterapi';

// Using environment variables in Node.js
const counter = new Counter({
  workspace: process.env.COUNTER_WORKSPACE,
  accessToken: process.env.COUNTER_API_TOKEN
});

// Use the authenticated client
try {
  const result = await counter.up('api-call-counter');
  console.log(`Updated count: ${result.value}`);
} catch (error) {
  console.error('Authentication error:', error);
}

With Express.js

Here's how to implement authenticated counter updates in an Express.js application:

import express from 'express';
import { Counter } from 'counterapi';

const app = express();
const port = process.env.PORT || 3000;

// Create authenticated counter client
const counter = new Counter({
  workspace: process.env.COUNTER_WORKSPACE,
  accessToken: process.env.COUNTER_API_TOKEN
});

// Track API usage with authentication
app.use(async (req, res, next) => {
  const endpoint = req.path.replace(/\//g, '-') || 'root';
  try {
    await counter.up(`endpoint${endpoint}`);
  } catch (error) {
    console.error(`Counter error for ${endpoint}:`, error);
  }
  next();
});

app.get('/', (req, res) => {
  res.send('Hello, authenticated world!');
});

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

Browser Examples

Warning: Security Considerations

When using authentication in browser-side JavaScript, be aware that your access tokens can be viewed by anyone examining your code. For production applications, consider these approaches:

  1. Using a proxy server: Create a backend proxy that makes authenticated requests to CounterAPI
  2. Limited token scope: If you must use client-side tokens, create tokens with minimal permissions

Basic Browser Example

// When importing from CDN or bundled script
const counter = new Counter({
  workspace: 'your-workspace-name',
  accessToken: 'your-access-token'  // The token you generated on counterapi.dev
});

// Use the client as normal
counter.up('page-views')
  .then(result => {
    console.log(`Updated count: ${result.value}`);
    document.getElementById('counter').textContent = result.value;
  })
  .catch(error => {
    console.error('Authentication error:', error);
    document.getElementById('error').textContent = 'Error updating counter';
  });

With Error Handling

More comprehensive error handling for authentication issues:

const counter = new Counter({
  workspace: 'your-workspace-name',
  accessToken: 'your-access-token'
});

async function updateCounter(name) {
  try {
    const result = await counter.up(name);
    return {
      success: true,
      value: result.value,
      message: 'Counter updated successfully'
    };
  } catch (error) {
    // Handle authentication errors specifically
    if (error.status === 401) {
      console.error('Authentication failed: Invalid token');
      return {
        success: false,
        message: 'Authentication error: Invalid token'
      };
    } else if (error.status === 403) {
      console.error('Permission denied: Token lacks required permissions');
      return {
        success: false,
        message: 'Authentication error: Insufficient permissions'
      };
    }

    // Handle other errors
    console.error('Counter error:', error);
    return {
      success: false,
      message: `Error: ${error.message}`
    };
  }
}

With React

Integration example for React applications:

import { useState, useEffect } from 'react';
import { Counter } from 'counterapi';

// Create the counter client
const counter = new Counter({
  workspace: process.env.REACT_APP_COUNTER_WORKSPACE,
  accessToken: process.env.REACT_APP_COUNTER_TOKEN
});

function SecureCounter({ counterName }) {
  const [count, setCount] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Get the initial counter value
    counter.get(counterName)
      .then(result => {
        setCount(result.value);
        setLoading(false);
      })
      .catch(err => {
        setError(`Authentication error: ${err.message}`);
        setLoading(false);
      });
  }, [counterName]);

  // Increment the counter
  const handleIncrement = async () => {
    try {
      const result = await counter.up(counterName);
      setCount(result.value);
    } catch (err) {
      setError(`Authentication error: ${err.message}`);
    }
  };

  if (loading) return <div>Loading...</div>;
  if (error) return <div className="error">{error}</div>;

  return (
    <div>
      <h2>Secure Counter: {count}</h2>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}

export default SecureCounter;